[英]SwiftUI View gets offset to the right when using Geometry Reader and ScrollVIew
I am using a ScrollView inside of a GeometryReader in SwiftUI, but everything inside the scroll view gets offset to the left, or at least the items inside the scroll view think that the boundary of the view extends far past the actual boundary of the view.我在 SwiftUI 中的 GeometryReader 内部使用了 ScrollView,但是滚动视图中的所有内容都向左偏移,或者至少滚动视图中的项目认为视图的边界远远超出了视图的实际边界。 as seen below.
如下所示。 I am using the public release of Xcode 12 from the mac app store along with macOS Big Sur beta 8.
我正在使用 Mac 应用商店中公开发布的 Xcode 12 以及 macOS Big Sur beta 8。
Here's the code to recreate this.这是重新创建它的代码。
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)
}
}
You don't need GeometryReader
in this layout at all, it only confuses automatic layout.在这个布局中你根本不需要
GeometryReader
,它只会混淆自动布局。
Here is modified code.这是修改后的代码。 Tested with Xcode 12 / iOS 14
使用 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)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.