在 tabview 中居中文本元素

Question

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

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

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

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 中，但到目前为止没有任何帮助。

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

Answer 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)
        })
    }
}

在 tabview 中居中文本元素

Center text element in tabview

swiftui

watchkit

watchos