Question

我创建了一个可选的Scrollview，这意味着如果所需内容的大小适合ScrollView的提供空间，则我将禁用滚动行为。它在iPhone11上运行良好，但对iPhone SE产生了奇怪的影响。在此，在外部Scrollview和内容之间出现填充，就像您在图像上看到的那样。这样会导致不同的页面元素未对齐。

您看到绿色部分来自哪里吗？为什么红色部分没有使用所有可用空间？ “ Lorem ipsum ...”应与“ This is ...”对齐。

struct ViewHeightKey: PreferenceKey {
    static var defaultValue: CGFloat { 0 }
    static func reduce(value: inout Value, nextValue: () -> Value) {
        value = value + nextValue()
    }
}

struct OptionalScrollView: View {
    @State private var fitInScreen = true
    @State private var contentHeight: CGFloat = 0
    
    let text: Text
    
    var body: some View {
        GeometryReader { geo in
            ScrollView {
                VStack {          // container to calculate total height
                    self.text.background(Color.red)
                }.background(Color.yellow)
                .background(GeometryReader {
                    // calculate height by consumed background and store in
                    // view preference
                    Color.clear.preference(key: ViewHeightKey.self, value: $0.frame(in: .local).size.height)
                })
            }
            .onPreferenceChange(ViewHeightKey.self) {
                self.fitInScreen = $0 < geo.size.height
                self.contentHeight = $0
            }
            .disabled(self.fitInScreen)
        }
        .frame(maxHeight: self.contentHeight)
        .background(Color.green)
    }
    
}

Answer 1

符合预期；文本是自紧的，不会占用空间。 VStack与内在内容紧密相关，即文本。如果您想将Text（或VStack，或两者都扩展到可用宽度），请明确执行

默认

带框架

ScrollView {
    VStack {          // container to calculate total height
        self.text
            .frame(maxWidth: .infinity)     // << here !!
            .background(Color.red)
    }.background(Color.yellow)

SwiftUI：内容有填充

1 个答案: