Список SwiftUI с NavigationLink. Как изменить цвет выделения при нажатии?

У меня есть список с NavigationLink внутри. Когда я нажимаю на строку, она выделяется. Цвет, связанный со стилем пользовательского интерфейса (в info.plist), может быть темным или светлым. Как изменить цвет этой подсветки? Я нашел здесь несколько решений с «EpmtyView ()» и «.buttonStyle ()», но они не работают в моем случае. При использовании настраиваемого стиля кнопки выделяется только содержимое ячейки (например, текст), но не сама ячейка. Проблема, я думаю, связана с "selectionStyle", потому что "UITableViewCell.appearance (). SelectionStyle = .none" убирает эту подсветку.

struct ContentView: View {
    var myArray = ["one", "two", "three"]

    init() {
         UITableView.appearance().backgroundColor = UIColor.clear
    }

    var body: some View {
        NavigationView {
            VStack {
                List {
                    ForEach(self.myArray, id: \.self) { text in
                        NavigationLink(destination: DestinationView()) {
                            MyRow(text: text)
                        }
                        .listRowBackground(Color.black)
                    }
                }.listStyle(GroupedListStyle())
            }.background(Color.black)
        }
    }
}

extension UINavigationController {
    override open func viewDidLoad() {
        super.viewDidLoad()
        let standartAppearance = UINavigationBarAppearance()
        standartAppearance.backgroundColor = UIColor.black
        navigationBar.standardAppearance = standartAppearance
        navigationBar.scrollEdgeAppearance = standartAppearance
        navigationBar.compactAppearance = standartAppearance
    }
}

выделение строки


swiftui list swiftui-navigationlink row highlight
person yoprst    schedule 14.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот возможный подход

Идея состоит в том, чтобы отключить стандартный стиль выбора и создать анимированный фоновый вид строки списка в зависимости от выбранного тега навигационной ссылки.

введите описание изображения здесь

См. Измененную часть вашего кода ниже ...

init() {
    UITableView.appearance().backgroundColor = UIColor.clear
    UITableViewCell.appearance().selectionStyle = .none
}

@State private var selection: Int? = nil
var body: some View {
    NavigationView {
        VStack {
            List {
                ForEach(Array(self.myArray.enumerated()), id: \.1.self) { (i, text) in
                    NavigationLink(destination: DestinationView(), tag: i, selection: self.$selection) {
                        MyRow(text: text)
                    }
                    .onTapGesture {
                        withAnimation {
                            self.selection = i
                        }
                    }
                    .listRowBackground(self.selection == i ? Color.yellow : Color.black)
                }
            }.listStyle(GroupedListStyle())
        }.background(Color.black)
    }
}
person Asperi    schedule 15.02.2020
comment
Спасибо за предложенное решение! Я только что попробовал. К сожалению, это работает довольно медленно, и цвет ячейки остается неизменным, когда вы возвращаетесь, как показано в демонстрации. Если нажать и удерживать палец на ячейке, ничего не происходит, хотя в нативной версии она становится подсвеченной. - person yoprst; 15.02.2020