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

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

1 个答案: