SwiftUI NavigationSplitView на iPad: удалить акцент с выбранного элемента на боковой панели

я принимаюNavigationSplitViewдля приложения, которое можно использовать как на iPad, так и на iPhone.

В моем коде ниже я хочу выделить выбранный элемент на боковой панели только словом «Выбрано».

При работе с iPad Air 5-го поколения боковая панель отображается по-разному в режиме предварительного просмотра и в симуляторе:

  • В предварительном просмотре поведение именно то, что я хочу: слово «Выбрано» указывает на элемент, видимый в подробном представлении (см. Рисунок ниже без синей рамки).
  • Однако при работе в симуляторе вокруг выделения виден акцентный прямоугольник (см. рисунок ниже с синей рамкой). Моя цель - удалить этот прямоугольник.

На самом деле, если мы удалим.listRowBackground()модификатор, в превью акцент светло-серый, в симуляторе синий.

Некоторые вещи, которые я пробовал:

  1. Замена.listRowBackground(EmptyView())с.listRowBackground(Collar.clear): нет успеха.
  2. С использованием.accentColor(.clear): это не работает (прямоугольник становится белым), и, кроме того, оно устарело, поэтому я хочу его избежать.
  3. Добавление.tint(.clear)иlistItemTint(.clear): нет успеха.
  4. ЗаменаListсForEach, но тогда приходится переделывать расположение строк, и результат уже не тот.

Мне нужно сохранить «желтый» фон.

Кто-нибудь знает, как убрать этот прямоугольник?

Мой код:

      struct MyView: View {
    
    @State private var selected: MyContent?
    
    let list = [MyContent("First"), MyContent("Second"), MyContent("Third")]
    
    var body: some View {
        
        NavigationSplitView {
            
            List(list, selection: $selected) { item in
                
                NavigationLink(value: item) {
                    HStack {
                        Text(item.title)
                        Spacer()
                        Text(selected == item ? "Selected" : "")
                    }
                    .foregroundColor(.primary)
                }
                .listRowBackground(EmptyView())
                
            }
            .scrollContentBackground(.hidden)
            .listStyle(.plain)
            .background(.yellow)
            
        } detail: {
            if let selected {
                Text("Detail of \(selected.title)")
            }
        }
    }
}

struct MyContent: Identifiable, Hashable {
    let id = UUID()
    let title: String
    
    init(_ title: String) {
        self.title = title
    }
}

Чего я хочу добиться (ОК в предварительном просмотре):

Прямоугольник, который я хочу удалить (работает на симуляторе):

Развертывание для iOS 16.0 на Xcode 14.

1 ответ

Попробуйте применить .accentColor под списком, сопоставив его с фоном. В моем случае это работает:

      struct MyView: View {
    
    @State private var selected: MyContent?
    
    let list = [MyContent("First"), MyContent("Second"), MyContent("Third")]
    
    var body: some View {
        
        NavigationSplitView {
            
            List(list, selection: $selected) { item in
                
                NavigationLink(value: item) {
                    HStack {
                        Text(item.title)
                        Spacer()
                        Text(selected == item ? "Selected" : "")
                    }
                    .foregroundColor(.primary)
                }
                
            }
            .scrollContentBackground(.hidden)
            .listStyle(.plain)
            .background(.yellow)
            .accentColor(.yellow) //<-- this
            
        } detail: {
            if let selected {
                Text("Detail of \(selected.title)")
            }
        }
    }
}
Другие вопросы по тегам