当内容适合滚动视图边界时，SwiftUI ScrollView 不会将内容居中 [英] SwiftUI ScrollView does not center content when content fits scrollview bounds

问题描述

我试图让 ScrollView 内的内容居中，当该内容小到不需要滚动时，而是与顶部对齐.这是错误还是我缺少添加内容?使用 Xcode 11.4 (11E146)

I'm trying to have the content inside a ScrollView be centered when that content is small enough to not require scrolling, but instead it aligns to the top. Is this a bug or I'm missing adding something? Using Xcode 11.4 (11E146)

    @State private var count : Int = 100

    var body : some View {
//        VStack {
            ScrollView {
                VStack {
                    Button(action: {
                        if self.count > 99 {
                            self.count = 5
                        } else {
                            self.count = 100
                        }
                    }) {
                        Text("CLICK")
                    }
                    ForEach(0...count, id: \.self) { no in
                        Text("entry: \(no)")
                    }
                }
                .padding(8)
                .border(Color.red)
                .frame(alignment: .center)
            }
            .border(Color.blue)
            .padding(8)
//        }
    }

推荐答案

您添加的 frame(alignment: .center) 修饰符不起作用，因为它的作用是将您的视图包裹在完全相同大小的新视图.因此，对齐不会做任何事情，因为没有额外的空间来重新定位视图.

The frame(alignment: .center) modifier you’ve added doesn’t work since what it does is wrapping your view in a new view of exactly the same size. Because of that the alignment doesn’t do anything as there is no additional room for the view do be repositioned.

您的问题的一个潜在解决方案是将整个 ScrollView 包装在 GeometryReader 中以读取可用高度.然后使用该高度来指定孩子不应小于它.这将使您的视图在 ScrollView 内居中.

One potential solution for your problem would be to wrap the whole ScrollView in a GeometryReader to read available height. Then use that height to specify that the children should not be smaller than it. This will then make your view centered inside of ScrollView.

struct ContentView: View {
    @State private var count : Int = 100

    var body : some View {
        GeometryReader { geometry in
            ScrollView {
                VStack {
                    Button(action: {
                        if self.count > 99 {
                            self.count = 5
                        } else {
                            self.count = 100
                        }
                    }) {
                        Text("CLICK")
                    }
                    ForEach(0...self.count, id: \.self) { no in
                        Text("entry: \(no)")
                    }
                }
                .padding(8)
                .border(Color.red)
                .frame(minHeight: geometry.size.height) // Here we are setting minimum height for the content
            }
            .border(Color.blue)
        }
    }
}

这篇关于当内容适合滚动视图边界时，SwiftUI ScrollView 不会将内容居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！