Swift Playgrounds中如何为标签页添加多行文本？

API 探路者

2026-7-20

Swift Playgrounds中TabItem添加多行文本的解决方法

你的代码问题在于将额外文本Text("Developer")放在了tabItem闭包外部，这会导致整个标签页的布局被不必要地撑开，出现过大间距。正确的做法是把所有标签相关的元素（图标、多行文本）都放在tabItem内部的布局容器中。

实现步骤与代码示例

将多行文本加入tabItem内的VStack，和图标、主标题一起排列
通过VStack的spacing参数手动控制元素间距，避免默认大间距导致标签过高
给次要文本设置更小的字体，让布局更紧凑协调

TabView {
    // 标签页对应的内容视图
    Text("Settings Page Content")
        .tabItem {
            VStack(spacing: 2) { // 自定义间距，缩小行与行之间的距离
                Image(systemName: "gear")
                    .font(.title)
                Text("Settings")
                    .font(.caption)
                Text("Developer")
                    .font(.caption)
            }
        }
        .tag(5)
}