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

ztmd8pv5 于 2023-03-22 发布在 Swift

关注(0)|答案(2)|浏览(92)

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

swift

来源：https://stackoverflow.com/questions/64037905/swiftui-view-gets-offset-to-the-right-when-using-geometry-reader-and-scrollview

2条答案

按热度按时间

1dkrff031#

在这个布局中根本不需要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)
    }
}

赞(0）回复(0）举报 2023-03-22

qxsslcnc2#

简单的修复.设置HStack间距为0