如何让preferenceKey 接受SwiftUI 中的视图？

Question

我正在尝试构建一个自定义 NavigationView，但我正在努力解决如何实现自定义“.navigationBarItems(leading: /* insert views /, trailing: / insert Views */ )”。我假设我必须使用一个preferenceKey，但我不知道如何让它接受视图。

我的顶部菜单如下所示：

import SwiftUI

struct TopMenu<Left: View, Right: View>: View {
    
    let leading: Left
    let trailing: Right
    
    init(@ViewBuilder left: @escaping () -> Left, @ViewBuilder right: @escaping () -> Right) {
        self.leading = left()
        self.trailing = right()
    }
    
    var body: some View {
        
        VStack(spacing: 0) {
            
            HStack {
                
                leading
                
                Spacer()
                
                trailing
                
            }.frame(height: 30, alignment: .center)
            
            Spacer()
            
        }
        .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
        
    }
}

struct TopMenu_Previews: PreviewProvider {
    static var previews: some View {
        TopMenu(left: { }, right: { })
    }
}

这是我尝试创建一个preferenceKey 来更新它，我显然错过了一些非常基本的东西：

struct TopMenuItemsLeading: PreferenceKey {
    static var defaultValue:View
    
    
    static func reduce(value: inout View, nextValue: () -> View) {
        value = nextValue()
    }
}

struct TopMenuItemsTrailing: PreferenceKey {
    static var defaultValue:View
    
    
    static func reduce(value: inout View, nextValue: () -> View) {
        value = nextValue()
    }
}

extension View {
    func topMenuItems(leading: View, trailing: View) -> some View {
        self.preference(key: TopMenuItemsLeading.self, value: leading)
        self.preference(key: TopMenuItemsTrailing.self, value: trailing)
    }
}

Answer 1

可能的做法是使用AnyView，比如

struct TopMenuItemsLeading: PreferenceKey {
    static var defaultValue: AnyView = AnyView(EmptyView())
    
    
    static func reduce(value: inout AnyView, nextValue: () -> AnyView) {
        value = nextValue()
    }
}

struct TopMenuItemsTrailing: PreferenceKey {
    static var defaultValue: AnyView = AnyView(EmptyView())
    
    
    static func reduce(value: inout AnyView, nextValue: () -> AnyView) {
        value = nextValue()
    }
}

extension View {
    func topMenuItems<LView: View, TView: View>(leading: LView, trailing: TView) -> some View {
        self
          .preference(key: TopMenuItemsLeading.self, value: AnyView(leading))
          .preference(key: TopMenuItemsTrailing.self, value: AnyView(trailing))
    }
}

Answer 2

您可以像这样声明 TopView 的初始化程序以采用 Views：

struct TopMenu<Left: View, Right: View>: View {
    
    let leading: Left
    let trailing: Right
    
    init(left: Left,
         right: Right) {
        self.leading = left
        self.trailing = right
    }
    //etc.

然后像定义navigationBarItems修饰符一样声明修饰符：

extension View {
    
    func topMenuItems<L, T>(leading: L, trailing: T) -> some View where L : View, T : View {
        VStack(alignment: .center, spacing: 0) {
            TopMenu(left: leading, right: trailing)
            self
        }
    }
    func topMenuItems<L>(leading: L) -> some View where L : View {
        VStack(alignment: .center, spacing: 0) {
            TopMenu(left: leading, right: EmptyView())
            self
        }
    }
    func topMenuItems<T>(trailing: T) -> some View where T : View {
        VStack(alignment: .center, spacing: 0) {
            TopMenu(left: EmptyView(), right: trailing)
            self
        }
    }

}

Answer 3

好的，所以这里有一些很好的部分答案，但没有一个真正达到我的要求，即使用preferenceKey将视图传递到视图层次结构。本质上是 .navigationBarItems 方法在做什么，但使用我自己的自定义视图。

但是我找到了一个解决方案，所以就这样吧（如果我错过了任何明显的捷径，我深表歉意。这是我第一次使用preferenceKeys 做任何事情）：

import SwiftUI

struct TopMenu: View {
    
    @State private var show:Bool = false
    
    var body: some View {
        VStack {
            TopMenuView {
                
                Button("Change", action: { show.toggle() })
                
                Text("Hello world!")
                    .topMenuItems(leading: Image(systemName: show ? "xmark.circle" : "pencil"))
                    .topMenuItems(trailing: Image(systemName: show ? "pencil" : "xmark.circle"))
            }
        }
    }
}

struct TopMenu_Previews: PreviewProvider {
    static var previews: some View {
        TopMenu()
    }
}

/*

To emulate .navigationBarItems(leading: View, trailing: View), I need four things:
 
    1) EquatableViewContainer - Because preferenceKeys need to be equatable to be able to update when a change occurred
    2) PreferenceKeys - That use the EquatableViewContainer for both leading and trailing views
    3) ViewExtenstions - That allow us to set the preferenceKeys individually or one at a time
    4) TopMenu view - That we can set somewhere higher in the view hierarchy.
 
 */

// First, create an EquatableViewContainer we can use as preferenceKey data
struct EquatableViewContainer: Equatable {
    
    let id = UUID().uuidString
    let view:AnyView
    
    static func == (lhs: EquatableViewContainer, rhs: EquatableViewContainer) -> Bool {
        return lhs.id == rhs.id
    }
}

// Second, define preferenceKeys that uses the Equatable view container
struct TopMenuItemsLeading: PreferenceKey {
    static var defaultValue: EquatableViewContainer = EquatableViewContainer(view: AnyView(EmptyView()) )
    
    static func reduce(value: inout EquatableViewContainer, nextValue: () -> EquatableViewContainer) {
        value = nextValue()
    }
}

struct TopMenuItemsTrailing: PreferenceKey {
    static var defaultValue: EquatableViewContainer = EquatableViewContainer(view: AnyView(EmptyView()) )
    
    static func reduce(value: inout EquatableViewContainer, nextValue: () -> EquatableViewContainer) {
        value = nextValue()
    }
}

// Third, create view-extensions for each of the ways to modify the TopMenu
extension View {
    
    // Change only leading view
    func topMenuItems<LView: View>(leading: LView) -> some View {
        self
            .preference(key: TopMenuItemsLeading.self, value: EquatableViewContainer(view: AnyView(leading)))
    }
    
    // Change only trailing view
    func topMenuItems<RView: View>(trailing: RView) -> some View {
        self
            .preference(key: TopMenuItemsTrailing.self, value: EquatableViewContainer(view: AnyView(trailing)))
    }
    
    // Change both leading and trailing views
    func topMenuItems<LView: View, TView: View>(leading: LView, trailing: TView) -> some View {
        self
            .preference(key: TopMenuItemsLeading.self, value: EquatableViewContainer(view: AnyView(leading)))
    }
}


// Fourth, create the view for the TopMenu
struct TopMenuView<Content: View>: View {
    
    // Content to put into the menu
    let content: Content
    
    @State private var leading:EquatableViewContainer = EquatableViewContainer(view: AnyView(EmptyView()))
    @State private var trailing:EquatableViewContainer = EquatableViewContainer(view: AnyView(EmptyView()))
    
    
    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        
        VStack(spacing: 0) {
            
            ZStack {
                
                HStack {
                    
                    leading.view
                    
                    Spacer()
                    
                    trailing.view
                    
                }
                
                Text("TopMenu").fontWeight(.black)
            }
            .padding(EdgeInsets(top: 0, leading: 2, bottom: 5, trailing: 2))
            .background(Color.gray.edgesIgnoringSafeArea(.top))
            
            content
            
            Spacer()
            
        }
        .onPreferenceChange(TopMenuItemsLeading.self, perform: { value in
            leading = value
        })
        .onPreferenceChange(TopMenuItemsTrailing.self, perform: { value in
            trailing = value
        })
        
    }
}
`````