在 tabview 中居中文本元素

Posted 2023-02-24

【中文标题】在 tabview 中居中文本元素

【英文标题】：Center text element in tabview

【发布时间】：2021-06-23 11:13:21

【问题描述】：

当我在构建 WatchOS 应用程序的背景下学习 SwiftUI 时，我正在尝试实现一些看似简单但尚未弄清楚的事情。

查看此屏幕截图，我希望将文本标签（“第 2 页”）显示在 tabview 页面的垂直中心而不是底部。

这是我的主要内容视图的代码：

struct ContentView: View     
    var body: some View 
        VStack 
            PageView()
            Divider()
            Text("First steps are hard")
                .padding()
        
    

这就是我实现页面视图的方式：

struct PageView: View 
    @State private var selection = 1

    var body: some View 
        TabView(selection: $selection) 
            Text("Page 1")
                .tag(0)
                .background(Color.yellow)
            Text("Page 2")
                .tag(1)
                .background(Color.red)
            Text("Page 3")
                .tag(2)
                .background(Color.green)
        
        .border(Color.blue)
    

我尝试在VStack 上设置不同的对齐选项，以及直接在标签上设置填充和框架修饰符。我也尝试将PageView 嵌入另一个VStack，但到目前为止没有任何帮助。

感谢您的宝贵时间和帮助！

【参考方案1】：

如果您使用GeometryReader 仅测量单个选项卡视图内的区域，您可以将其.frame 的宽度和高度减半。我提取了你的Text("Page 2") 来演示一下。

struct PageView: View 
    @State private var selection = 1
    
    var body: some View 
        TabView(selection: $selection) 
            Text("Page 1")
                .tag(0)
                .background(Color.yellow)
            PageTwo()
                .tag(1)
            Text("Page 3")
                .tag(2)
                .background(Color.green)
        
        .border(Color.blue)
    


struct PageTwo: View 
    var body: some View 
        GeometryReader(content:  geometry in
            Text("Page 2")
                .background(Color.red)
                .frame(width: geometry.size.width, height: geometry.size.height / 2)
        )
    

【讨论】：

不错！这似乎行得通。我不知道GeometryReader，但它似乎是框架布局的一个非常重要的对象。非常感谢！

我很高兴能提供帮助。而且我看到我在回答中说错了，当我实际上没有这样做时，您可以“将宽度减半”。在这种情况下，.frame 仅读取宽度值本身，但占用高度的一半。 GeometryReader 可能有点笨拙，但它非常强大，可以在需要时微调布局。