如何设置 SwiftUI 工具栏显示在视图的中心

Posted

技术标签:

【中文标题】如何设置 SwiftUI 工具栏显示在视图的中心【英文标题】:How to set up SwiftUI toolbar to display in the center of the view 【发布时间】:2021-12-25 15:09:15 【问题描述】:

我正在尝试在视图中的不同位置使用 SwiftUI ToolbarItem,例如在底部栏和导航中。我想知道是否可以将 ToolBarItem 在视图中垂直居中,而不是顶部或底部。为 ToolBarItem 设置展示位置时,我没有看到用于居中的展示位置属性。知道这个 ToolBarItem 如何在视图中居中吗?

这是我的 ToolBarItem 代码,当前设置为 .bottomBar:

struct ContentView: View 
    @State private var cityName = ""
        
    var body: some View 
        NavigationView 
            VStack() 
                //some content
            .navigationTitle("Weather")
            .toolbar 
                ToolbarItem(placement: .bottomBar) 
                    HStack 
                        TextField("Enter City Name", text: $cityName)
                            .frame(minWidth: 100, idealWidth: 150, maxWidth: 240, minHeight: 30, idealHeight: 40, maxHeight: 50, alignment: .leading)
                        Spacer()
                        Button(action: 
                            // some action
                        ) 
                            HStack 
                                Image(systemName: "plus")
                                    .font(.title)
                            
                            .padding(15)
                            .foregroundColor(.white)
                            .background(Color.green)
                            .cornerRadius(40)
                        
                    
                
            
        
    

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



【问题讨论】:

【参考方案1】:

尝试这种方法将您的工具栏元素放在ContentView 的中间。

它应该看起来与您拥有的 .toolbar ... 完全一样,并且它的功能完全符合您的预期。 这种方法的主要区别在于 您可以将工具栏放在您喜欢的任何位置。 您还可以使用GeometryReader 在您的视图中进行非常精细的放置。

struct ContentView: View 
    @State private var cityName = ""
    
    var toolbar: some View 
        HStack 
            Spacer()
            TextField("Enter City Name", text: $cityName)
                .frame(minWidth: 100, idealWidth: 110, maxWidth: 140, minHeight: 30, idealHeight: 40, maxHeight: 50, alignment: .leading)
            Spacer()
            Button(action: ) 
                Image(systemName: "plus").font(.title)
                .padding(15)
                .foregroundColor(.white)
                .background(Color.green)
                .cornerRadius(40)
            
            Spacer()
        
    
    
    var body: some View 
        NavigationView 
            VStack 
                Spacer()
                toolbar
                Spacer()
            .navigationTitle("Weather")
        
    

【讨论】:

以上是关于如何设置 SwiftUI 工具栏显示在视图的中心的主要内容,如果未能解决你的问题,请参考以下文章

如何导航到 SwiftUI 设置的新视图

SwiftUI:在列表中的两个视图之间画一条线/如何确定视图的中心位置?

显示另一个 swiftUI 视图时如何停止相机工作?

如何将底部边缘与上方视图的中心对齐 swiftui

Swiftui + 核心位置:地图无法以用户为中心

如何在 SwiftUI 中设置视图中的控制器