HowTo —— SwiftUI2.0 使用 ToolBar 替代 navigationbarItems

SwiftUI2.0 为了实现更好的多平台支持同时需要兼顾 1.0 版本代码兼容性,提供了一些与已有控件功能上类似但名称和用法全新的控件。比如 ToolBar, navigationTitle 等。Toolbar 可以实现 navigationbarItems 的全部功能,并新增了在多平台下的适配。采用了全新的语法,代码更易阅读。 > > 在当前的 Xcode Version 12.0 beta 2 (12A6163b) 版本下,ToolBar 在 macOS 下仍然有非常多的问题。

健康笔记是我开发的一个iOS app,主要服务于有长期健康管理需求的人士。可为全家不同成员创建各自的笔记,允许使用者自定义数据类型以记录各种健康数据。

推广

基本用法

struct ToolBarTest: View {
    var body: some View {
      NavigationView{
        Text("ToolBar 演示")
            .toolbar{
                ToolbarItem(placement:.automatic){
                    HStack(spacing:20){
                        Button(action:{print("wave")}){
                            Image(systemName: "waveform.path.badge.plus")
                                .foregroundColor(.purple)
                                .scaleEffect(1.5, anchor: .center)
                        }
                        
                    }
                }
                //placement 设置放置位置,ToolBarItem 中的 View 解析不会完全和预期一致,不知道是特别限制还是 bug. 比如说无法显示多彩符号,无法使用 Spacer 等。
                ToolbarItem(placement: .bottomBar){
                    HStack(spacing:100){
                        Button(action:{print("lt")}){
                            Image(systemName: "lt.rectangle.roundedtop.fill")
                                .foregroundColor(.purple)
                                .scaleEffect(1.5, anchor: .center)
                        }
                        
                        Button(action:{print("rt")}){
                            Image(systemName: "rt.rectangle.roundedtop.fill")
                                .foregroundColor(.purple)
                                .scaleEffect(1.5, anchor: .center)
                        }
                    }
                }
            }
        }
    }
}
截屏 2020-07-10 上午 9.01.52

多平台适配

为了能够更好的适配多平台,placment 提供了 automatic 这样的多平台自适应选项。placement 有些值全平台可用,有些只支持部分平台,还有一部分的可在多平台运行不过只能在部分平台正确显示。

import SwiftUI

struct ToolBarTest: View {
    @State var placementSelection:Placement = .automatic
    @State var placement:ToolbarItemPlacement = .automatic
    @State var show = true
    var body: some View {
        NavigationView{
            VStack{
                Picker("placement:",selection:$placementSelection){
                    ForEach(Placement.allCases,id:\.self){ placement in
                        Text(placement.rawValue)
                            .tag(placement)
                    }
                }
                .labelsHidden()
                .padding(.all, 10)
                .onChange(of: placementSelection) { value in
                    switch value{
                    case .automatic:
                        placement = .automatic
                    case .principal:
                        placement = .principal //iOS 不显示
                    case .navigation:
                        placement = .navigation
                    case .primaryAction:
                        placement = .primaryAction
                    case .status:
                        placement = .status //iOS 不显示
                    case .confirmationAction:
                        placement = .confirmationAction //iOS 不显示
                    case .cancellationAction:
                        placement = .cancellationAction //iOS 不显示
                    case .destructiveAction:
                        placement = .destructiveAction //iOS 不显示
                    #if os(iOS)
                    case .bottomBar:
                        placement = .bottomBar
                    //不知道为什么有 bug, 设置后不显示
                    //ToolbarItem(placement:.bottomBar) 可以显示
                    case .navigationBarLeading:
                        placement = .navigationBarLeading
                    case .navigationBarTrailing:
                        placement = .navigationBarTrailing
                    #endif
                    }
                }
                //在 macOS 下如果需要显式设置是否显示 ToolBar, 需要设置 id,iOS 下可以不用设置
                //当前在 macOS 下,如果不显式关闭可能导致不同 View 的 ToolBar 混合到了一起,或者重复出现。不知道是否是 bug 还是设计逻辑
                .toolbar(id:"ToolBar") {
                    ToolbarItem(id:"1",placement:placement,showsByDefault:show) {
                        Button("确定"){
                            
                        }
                    }
                }
                .navigationTitle("Toolbar 演示")
                
                #if os(macOS)
                Toggle("显示 ToolBar",isOn:$show)
                Spacer()
                #endif
            } .frame(maxWidth:.infinity,maxHeight: .infinity)
        }
        
    }
}

enum Placement:String,CaseIterable{
    case automatic,principal,navigation
    case primaryAction,status,confirmationAction
    case cancellationAction,destructiveAction
    #if os(iOS)
    case navigationBarLeading,navigationBarTrailing,bottomBar
    #endif
}

macOS 下不同 placement 的演示

遗憾

macOS 目前 bug 较多,ToolBarItem 对于 View 的解析还不完整,ToolBarContentBuilder 不支持逻辑判断。

本博客所有文章除特别声明外,均采用CC 4.0许可协议。转载请注明出处和作者。

关注微信公共号肘子的Swift记事本或在推特上关注@fatbobman,永远不会错过新内容! 您的支持和鼓励将为我的博客写作增添更多的动力! 如果您或身边的朋友有健康数据管理的需求,请使用我开发的app【健康笔记】,正是因为它我才创建了这个博客。

关注