iOS中如何调整SwiftUI底部.bottomBar类型toolbar的高度?
调整SwiftUI中
.bottomBar样式Toolbar的高度方案 可以调整设置了placement: .bottomBar的Toolbar高度,核心思路是通过控制ToolbarItem内部内容的布局来撑开底部栏,以下是具体实现方法:
方法一:直接给Toolbar内容设置高度
通过给ToolbarItem中的控件添加frame修饰符,指定高度后底部栏会自动适配该高度:
import SwiftUI struct Content: View { var body: some View { NavigationView { List { ForEach((1...100), id: \.self) {_ in Text("test") } } .toolbar { ToolbarItem(placement: .bottomBar) { Button("Toolbar button", action: {}) .buttonStyle(.bordered) .frame(height: 80) // 自定义底部栏高度 .background(Color.gray.opacity(0.2)) // 可选:自定义背景色 } } } } } #Preview { Content() }
方法二:用容器视图统一控制底部栏尺寸
如果需要底部栏充满宽度且自定义高度,可以用VStack或HStack作为容器,设置maxWidth: .infinity和指定高度,确保底部栏整体适配:
import SwiftUI struct Content: View { var body: some View { NavigationView { List { ForEach((1...100), id: \.self) {_ in Text("test") } } .toolbar { ToolbarItem(placement: .bottomBar) { VStack(spacing: 8) { Button("Toolbar button", action: {}) .buttonStyle(.bordered) Text("辅助文本") // 可添加更多内容 } .frame(height: 100) // 自定义整体高度 .frame(maxWidth: .infinity) .background(Color.gray.opacity(0.3)) } } } } } #Preview { Content() }
注意事项
- 高度设置不宜过小,避免内部控件被截断;
- 不同iOS版本对Toolbar的布局约束有细微差异,建议在目标版本上测试适配;
- 如果需要完全自定义底部栏样式,也可以隐藏系统Toolbar,自行实现一个固定在底部的视图。
内容的提问来源于stack exchange,提问作者djdjdkfk
相关产品推荐
相关产品推荐

