如何设置SwiftUI toolbar使其在视图中垂直居中显示

SwiftUI 内置的 Toolbar 是系统预留的导航组件，仅支持挂载在导航栏、底部栏等系统预设的固定位置，没有提供可让 ToolbarItem 垂直居中于整个视图的 placement 枚举值。要实现需求，有两种可选方案：

方案1：自定义悬浮工具栏（推荐，可实现任意位置放置） #

直接放弃系统 Toolbar，改用 ZStack 层叠原有内容和自定义工具栏，即可自由控制工具栏的垂直位置：

struct ContentView: View {
    @State private var cityName = ""
        
    var body: some View {
        NavigationView {
            // ZStack实现层叠布局，可自由控制控件位置
            ZStack {
                // 原有业务内容
                VStack {
                    // 此处填写你的页面内容
                    Text("天气信息展示区域")
                }
                .navigationTitle("Weather")
                
                // 原Toolbar内的自定义控件直接放在ZStack中，默认垂直+水平居中
                HStack {
                    TextField("输入城市名称", text: $cityName)
                        .frame(minWidth: 100, idealWidth: 150, maxWidth: 240, minHeight: 30, idealHeight: 40, maxHeight: 50, alignment: .leading)
                        .textFieldStyle(.roundedBorder)
                    Spacer()
                    Button(action: {
                        // 你的点击逻辑
                    }) {
                        Image(systemName: "plus")
                            .font(.title)
                            .padding(15)
                            .foregroundColor(.white)
                            .background(Color.green)
                            .cornerRadius(40)
                    }
                }
                .padding(.horizontal, 20)
                // 如需调整垂直位置，可添加offset，负数向上偏移，正数向下偏移
                // .offset(y: -50)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

方案2：仅导航栏区域水平居中 #

如果你不需要工具栏脱离导航栏位置，仅需要 ToolbarItem 在顶部导航栏内水平居中，可直接将 placement 参数设置为 .principal 即可：

ToolbarItem(placement: .principal) {
    // 你的控件内容
}

这种方式的控件依然位于顶部导航栏区域，不会移动到视图垂直居中的位置。

内容的提问来源于stack exchange，提问作者JS_is_awesome18