You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.17 16:41:02