在 ScrollView 中将文本对齐为前导 - SWIFTUI

Question

我有一个

ScrollView

:

    ScrollView {
        VStack (alignment: .leading) {
            Text("\(userData.username), \(userData.age)")
                .fontWeight(.semibold)
                .font(Font.system(size:30))
        }
    }

输出为：

我尝试翻转堆栈并将滚动视图放在里面，但得到了相同的结果。

我的解决方法是将其放入 HStack 中并添加 Spacer()

HStack {
         Text("\(userData.username), \(userData.age)")
             .fontWeight(.semibold)
             .font(Font.system(size:30))
             .padding([.leading])
         Spacer()
}

这确实有效，但我认为这不是理想的方法。这是唯一的方法吗？或者是否有更好的解决方案来在滚动视图中垂直对齐文本？

Answer 1

默认情况下，堆栈容器与内容紧密相连，因此对齐不起作用。

这是可能的解决方案

ScrollView {
    VStack (alignment: .leading) {
        Text("\(userData.username), \(userData.age)")
            .fontWeight(.semibold)
            .font(Font.system(size:30))
    }.frame(maxWidth: .infinity, alignment: .leading) // << make screen-wide !!
}

Answer 2

实际上，你只是错过了一个参数，可以这样做：

ScrollView {
    VStack (alignment: .leading, spacing: 8) {
        Text("\(userData.username), \(userData.age)")
            .fontWeight(.semibold)
            .font(Font.system(size:30))
    }
}

Answer 3

解决此问题的另一个好方法是使用 GeometryReader：

var body: some View {
    GeometryReader { geometry in
        ScrollView {
            VStack (alignment: .leading) {
                Text("\(userData.username), \(userData.age)")
                    .fontWeight(.semibold)
                    .font(Font.system(size:30))
            }.frame(maxWidth: geometry.size.width, alignment: .leading) //get the width from geometry
        }
    }
}

GeometryReader 返回一个灵活的首选尺寸给它的父布局。 您可以使用geometry.size来访问容器的宽度和高度。