SwiftUI на tvOS: как узнать, какой элемент выбран в списке

Question

В списке мне нужно знать, какой элемент выбран, и этот элемент должен быть кликабельным.

Вот что я пытаюсь сделать:

| item1 | info of the item3 (selected) |
| item2 |                              |
|*item3*|                              |
| item4 |                              |

Я могу сделать этос .focusable(), но он не активен.

Button или NavigationLink работает, но я не могу выбрать текущий выбранный элемент.

Когда вы используете Button или NavigationLink.focusable больше не нажимайте.

Так что мой вопрос:

Как я могу выбрать текущий выбранный элемент (чтобы я мог отображать больше информации об этом элементе) и сделать его кликабельным дляотобразить следующий вид?

Пример кода 1 : Фокусировка работает, но .onTap не существует в tvOS

import SwiftUI

struct TestList: Identifiable {
    var id: Int
    var name: String
}

let testData = [Int](0..<50).map { TestList(id: $0, name: "Row \($0)")  }


struct SwiftUIView : View {
    var testList: [TestList]

    var body: some View {
        List {
            ForEach(testList) { txt in
                TestRow(row: txt)
            }
        }
    }
}

struct TestRow: View {
    var row: TestList

    @State private var backgroundColor = Color.clear

    var body: some View {
        Text(row.name)
        .focusable(true) { isFocused in
            self.backgroundColor = isFocused ? Color.green : Color.blue
            if isFocused {
                print(self.row.name)
            }
        }
        .background(self.backgroundColor)
    }
}

Пример кода 2 : элементы можно кликать по NavigationLink, но получить выбранный элемент невозможно, и .focusable больше не вызывается.

import SwiftUI

struct TestList: Identifiable {
    var id: Int
    var name: String
}

let testData = [Int](0..<50).map { TestList(id: $0, name: "Row \($0)")  }


struct SwiftUIView : View {
    var testList: [TestList]

    var body: some View {
        NavigationView {
            List {
                ForEach(testList) { txt in
                    NavigationLink(destination: Text("Destination")) {
                        TestRow(row: txt)
                    }
                }
            }
        }
    }
}

struct TestRow: View {
    var row: TestList

    @State private var backgroundColor = Color.clear

    var body: some View {
        Text(row.name)
        .focusable(true) { isFocused in
            self.backgroundColor = isFocused ? Color.green : Color.blue
            if isFocused {
                print(self.row.name)
            }
        }
        .background(self.backgroundColor)
    }
}

Answer 1

Мне кажется, что это слишком серьезное явление, вы не можете прикрепить событие клика в swiftui для ТВ. Я придумал хак, который позволяет вам сделать большинство компонентов SwiftUI выбираемыми и кликабельными. Надеюсь, что это поможет.

Сначала мне нужно сделать UIView, который фиксирует события.

    class ClickableHackView: UIView {
        weak var delegate: ClickableHackDelegate?

        override init(frame: CGRect) {
            super.init(frame: frame)        
        }

        override func pressesEnded(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
            if event?.allPresses.map({ $0.type }).contains(.select) ?? false {
                delegate?.clicked()
            } else {
                superview?.pressesEnded(presses, with: event)
            }
        }

        override func didUpdateFocus(in context: UIFocusUpdateContext, with coordinator: UIFocusAnimationCoordinator) {
            delegate?.focus(focused: isFocused)
        }

        required init?(coder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }

        override var canBecomeFocused: Bool {
            return true
        }
    }

Активируемый делегат:

protocol ClickableHackDelegate: class {
    func focus(focused: Bool)
    func clicked()
}

Затем создайте расширение swiftui длямой взгляд

struct ClickableHack: UIViewRepresentable {
    @Binding var focused: Bool
    let onClick: () -> Void

    func makeUIView(context: UIViewRepresentableContext<ClickableHack>) -> UIView {
        let clickableView = ClickableHackView()
        clickableView.delegate = context.coordinator
        return clickableView
    }

    func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<ClickableHack>) {
    }

    func makeCoordinator() -> Coordinator {
        return Coordinator(self)
    }

    class Coordinator: NSObject, ClickableHackDelegate {
        private let control: ClickableHack

        init(_ control: ClickableHack) {
            self.control = control
            super.init()
        }

        func focus(focused: Bool) {
            control.focused = focused
        }

        func clicked() {
            control.onClick()
        }
    }
}

Затем я создаю более дружественную оболочку swiftui, чтобы я мог передать любой компонент, который я хочу, чтобы он был фокусируемым и активным

struct Clickable<Content>: View where Content : View {
    let focused: Binding<Bool>
    let content: () -> Content
    let onClick: () -> Void

    @inlinable public init(focused: Binding<Bool>, onClick: @escaping () -> Void, @ViewBuilder content: @escaping () -> Content) {
        self.content = content
        self.focused = focused
        self.onClick = onClick
    }

    var body: some View {
        ZStack {
            ClickableHack(focused: focused, onClick: onClick)
            content()
        }
    }
}

Пример использования:

struct ClickableTest: View {
    @State var focused1: Bool = false
    @State var focused2: Bool = false

    var body: some View {
        HStack {
            Clickable(focused: self.$focused1, onClick: {
                print("clicked 1")
            }) {
                Text("Clickable 1")
                    .foregroundColor(self.focused1 ? Color.red : Color.black)
            }
            Clickable(focused: self.$focused2, onClick: {
                print("clicked 2")
            }) {
                Text("Clickable 2")
                    .foregroundColor(self.focused2 ? Color.red : Color.black)
            }
        }
    }
}