SwiftUI MVVM Coordinator / Router / NavigationLink

Tôi đang gặp sự cố khi dịch các mẫu kiến ​​trúc UIKit sang SwiftUI. Mẫu hiện tại của tôi chủ yếu là MVVM với Điều phối viên / Bộ định tuyến. Phần MVVM có vẻ khá dễ dàng và tự nhiên với việc bổ sung @ ObservableObject / @ Published. Nhưng điều phối / định tuyến có vẻ không trực quan. Chế độ xem và chức năng điều phối (điều hướng) được kết hợp chặt chẽ trong SwiftUI. Có vẻ như không thực sự có thể tách chúng ra ngoài việc sử dụng cấu trúc trợ giúp AnyView.

Đây là một ví dụ: Tôi muốn tạo một hàng / ô có thể sử dụng lại trong SwiftUI. Giả sử rằng hàng này trong Sản xuất khá phức tạp nên tôi muốn sử dụng lại nó. Tôi cũng muốn đặt nó trong một mô-đun khác để tôi có thể sử dụng lại nó trong nhiều mục tiêu. (như iOS, macCatalyst, v.v.)

Bây giờ tôi muốn kiểm soát những gì sẽ xảy ra khi người dùng nhấn vào chế độ xem đó hoặc các nút trong chế độ xem đó. Tùy theo ngữ cảnh mà tôi cần điều hướng đến các điểm đến khác nhau. Theo tôi có thể thấy mục tiêu NavigationLink có thể có được một trong hai Hardwired vào xem hoặc AnyViewđã được thông qua vào View.

Đây là một số mẫu mã. Ô / hàng này chứa hai nút. Tôi muốn điều hướng đến một số chế độ xem khác phụ thuộc vào ngữ cảnh và không bị cuốn vào mã:

struct ProductFamilyRow: View {
    @State private var selection: Int? = 0
    let item: ProductFamilyItem

    let destinationView1: AnyView
    let destinationView2: AnyView

    var body: some View {
        VStack {
            NavigationLink(
                destination: destinationView1,
                tag: 1,
                selection: self.$selection ) { EmptyView() } NavigationLink( destination: destinationView2, tag: 2, selection: self.$selection
            ) {
                EmptyView()
            }

            HStack {
                Text(item.title)
                Button("Destination 1") {
                    self.selection = 1
                }.foregroundColor(Color.blue)

                Button("Destination 2") {
                    self.selection = 2
                }.foregroundColor(Color.blue)
            }

            //Image(item.image)
        }.buttonStyle(PlainButtonStyle())
    }
}

Đây dường như là một lỗ hổng thiết kế lớn trong SwiftUI. Các thành phần có thể tái sử dụng với Liên kết điều hướng về cơ bản là không thể thực hiện được ngoài việc sử dụng AnyViewhack. Theo như tôi biết AnyViewchỉ được sử dụng cho các trường hợp sử dụng cụ thể mà tôi cần xóa kiểu chữ và có một số nhược điểm về hiệu suất. Vì vậy, tôi không coi đây là giải pháp thành ngữ để tạo ra các khung nhìn có thể sử dụng lại, có thể điều hướng với SwiftUI.

Đây có thực sự là giải pháp duy nhất? Có lẽ tôi đã sai hoàn toàn và dù sao đây cũng là một hướng đi sai lầm. Tôi đã đọc ở đâu đó (không thể tìm thấy bài đăng nữa ..) về việc sử dụng một số trạng thái trung tâm cho biết chế độ xem nào sẽ hiển thị nhưng tôi không thấy ví dụ cụ thể nào về cách thực hiện điều này.

Thử thách thứ 2: Ngoài ra, tôi không muốn tế bào phản ứng trên bất kỳ lần nhấn nào khác sau đó trên các nút. Nhưng dường như không thể kiểm soát nơi ô Điều hướng đến nếu được nhấn. (vì vậy không phải chạm vào một trong các nút mà ở bất kỳ vị trí nào trong ô) Trong mã mẫu hiện tại, nó điều hướng (vì bất kỳ lý do gì) đến "Đích 2".

Cảm ơn trước.

Tốt hơn là sử dụng các số liệu chung cho hàng của bạn, như bên dưới (được thử nghiệm với Xcode 11.4)

Ví dụ sử dụng:

ProductFamilyRow(item: ProductFamilyItem(title: "Test"),
    destinationView1: { Text("Details1") },
    destinationView2: { Text("Details2") })

Giao diện:

Cập nhật - thêm khối để đánh dấu hàng. Danh sách có chức năng tự động phát hiện nút hoặc liên kết bên trong hàng và đánh dấu nếu có (phím!) Tiêu chuẩn. Vì vậy, để vô hiệu hóa hành vi đó, nó cần phải ẩn mọi thứ theo kiểu nút tùy chỉnh.

struct ProductFamilyRowStyle: ButtonStyle {

    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .colorMultiply(configuration.isPressed ? 
                 Color.white.opacity(0.5) : Color.white) // any effect you want
    }
}

struct ProductFamilyRow<D1: View, D2: View>: View {
    let item: ProductFamilyItem
    let destinationView1: () -> D1
    let destinationView2: () -> D2

    init(item: ProductFamilyItem, @ViewBuilder destinationView1: @escaping () -> D1,
        @ViewBuilder destinationView2: @escaping () -> D2)
    {
        self.item = item
        self.destinationView1 = destinationView1
        self.destinationView2 = destinationView2
    }

    @State private var selection: Int? = 0

    var body: some View {
        VStack {
            HStack {
                Text(item.title)
                Button(action: {
                    self.selection = 1
                }) {
                    Text("Destination 1")
                        .background( // hide link inside button !!
                            NavigationLink(destination: destinationView1(),
                                tag: 1, selection: self.$selection) { EmptyView() } ) }.foregroundColor(Color.blue) Button(action: { self.selection = 2 }) { Text("Destination 2") .background( NavigationLink(destination: destinationView2(), tag: 2, selection: self.$selection) { EmptyView() }
                        )
                }.foregroundColor(Color.blue)
            }

            //Image(item.image)
        }.frame(maxWidth: .infinity) // to have container centered
        .buttonStyle(ProductFamilyRowStyle())
    }
}