如何设置 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 工具栏显示在视图的中心的主要内容,如果未能解决你的问题,请参考以下文章