使用 Geometry Reader 和 ScrollVIew 时，SwiftUI 视图向右偏移

Question

我在 SwiftUI 中的 GeometryReader 内使用 ScrollView，但滚动视图内的所有内容都向左偏移，或者至少滚动视图内的项目认为视图的边界远远超出了实际边界风景。如下所示。我正在使用来自 mac 应用商店的 Xcode 12 公开版本以及 macOS Big Sur beta 8。

这是重新创建它的代码。

struct TextClassifierMMLView: View {
    @State var nLayers = 5
    var body: some View {
        GeometryReader{ geo in
            ScrollView{
                VStack{
                    GrayNumberStepperCard(text: "Layers", geo: geo, upperRange: 1000, lowerRange: 1, value: self.$nLayers).padding()
                }
            }
        }.navigationTitle(Text("Text Classifier"))
    }
}


struct GrayNumberStepperCard: View {
    @State var text: String
    @State var geo: GeometryProxy
    @State var upperRange: Int
    @State var lowerRange: Int
    @Binding var value: Int
    
    var body: some View {
        HStack{
            Text(text)
                .font(.custom("OpenSans-SemiBold", size: 14))
                .foregroundColor(.accentColor)
            
            Spacer()
            
            Stepper(value: $value, in: lowerRange...upperRange) {
                Text("\(self.value)")
            }.padding()
        }.frame(width: geo.size.width, height: 15)
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 4)
                .foregroundColor(Color(hex: "F0F5F5"))
        )
        .padding(.horizontal)
        .padding(.vertical, 5)
    }
}

Answer 1

在这个布局中你根本不需要GeometryReader，它只会混淆自动布局。

这里是修改后的代码。使用 Xcode 12 / iOS 14 测试

struct TextClassifierMMLView: View {
    @State var nLayers = 5
    var body: some View {
            ScrollView{
                 VStack{
                      GrayNumberStepperCard(text: "Layers", upperRange: 1000, lowerRange: 1, value: self.$nLayers).padding()
                 }
        }.navigationTitle(Text("Text Classifier"))
    }
}


struct GrayNumberStepperCard: View {
    @State var text: String
    @State var upperRange: Int
    @State var lowerRange: Int
    @Binding var value: Int

    var body: some View {
        HStack{
            Text(text)
                .font(.custom("OpenSans-SemiBold", size: 14))
                .foregroundColor(.accentColor)

            Spacer()

            Stepper(value: $value, in: lowerRange...upperRange) {
                Text("\(self.value)")
            }.padding()
        }.frame(height: 15)
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 4)
                .foregroundColor(Color.red)
        )
        .padding(.horizontal)
        .padding(.vertical, 5)
    }
}