如何在窗体中居中对齐节项目

Question

我试图在一个部分内居中对齐一组视图，但我得到的只是引导对齐。我尝试使用VStack而不是HStack，并使用.frame(width: ..., alignment: .center)，但这些都不适用于我。如果我用Text替换ScrollView，那么它就可以工作。我使用的是Xcode12.3和iOS 14.3。

struct TestSectionAlign : View {
    var body : some View {
        Form {
            Section(header: Text("background color")) {
                viewForBackgroundColor
            }
        }
    }
    var viewForBackgroundColor : some View {
        HStack {
            Spacer()
            ScrollView.init(.horizontal, showsIndicators: false) {
                HStack {
                    Spacer()
                    ForEach(0..<15) { i in
                        Button(action: {
                            // do something
                        }) {
                            Image(systemName: "circle.fill").foregroundColor(Color.init(white: Double(i)/16.0))
                        }
                        .buttonStyle(PlainButtonStyle()) 
                    }
                    Spacer()
                }
            }
            Spacer()
        }
    }
}

​

​

Answer 1

这是一个使用GeometryReader的解决方案，然后手动设置HStack的宽度并将其居中对齐

struct ContentView : View {
    var body : some View {
        Form {
            Section(header: Text("background color")) {
                viewForBackgroundColor
            }
        }
    }
    var viewForBackgroundColor : some View {
        GeometryReader { geometry in
            HStack(alignment: .center) {
                ScrollView.init(.horizontal, showsIndicators: false) {
                    HStack(alignment: .center) {
                        ForEach(0..<15) { i in
                            Button(action: {
                                // do something
                            }) {
                                Image(systemName: "circle.fill").foregroundColor(Color.init(white: Double(i)/16.0))
                            }
                            .buttonStyle(PlainButtonStyle())
                        }
                    }.frame(width: geometry.size.width, height: geometry.size.height, alignment: .center) //<< here now center
                }
            }.border(Color.red)
        }
    }
}