Question

我的目标是将两个选取器水平并排放置，每个选取器占用屏幕的一半宽度。想象一个UIPickerView可以适合屏幕的宽度，并且具有两个相等宽度的分量-这就是我试图在SwiftUI中重新创建的东西。

由于SwiftUI中的选择器当前不允许使用多个组件，因此对我来说，显而易见的替代方案是将两个选择器放在HStack内。

这是来自测试项目的一些示例代码：

struct ContentView: View {
    @State var selection1: Int = 0
    @State var selection2: Int = 0

    @State var integers: [Int] = [0, 1, 2, 3, 4, 5]

    var body: some View {
        HStack {
            Picker(selection: self.$selection1, label: Text("Numbers")) {
                ForEach(self.integers) { integer in
                    Text("\(integer)")
                }
            }
            Picker(selection: self.$selection2, label: Text("Numbers")) {
                ForEach(self.integers) { integer in
                    Text("\(integer)")
                }
            }
        }
    }
}

这是画布：

SwiftUI - Pickers in HStack

选择器的大小不会像我期望的那样是屏幕宽度的一半。它们会保留其大小，而是拉伸内容视图的宽度，从而扭曲了流程中其他UI元素的宽度（正如我在其他项目中尝试这样做时所发现的那样）。

我知道我可以使用UIViewRepresentable来获得想要的效果，但是考虑到我要使用它的复杂性，SwiftUI会更容易使用。

是否存在一个错误，即在HStack内放置两个选择器不能正确调整它们的大小，还是SwiftUI中的选择器只是具有无法更改的固定宽度？

更新

使用GeometryReader，我设法更接近于根据自己的意愿调整选择器的大小，但并非始终如此。

侧面说明：您也可以通过简单地将每个选择器上的框架设置为GeometryReader，而无需使用.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)来达到同样的完美效果。

这是示例代码：

struct ContentView: View {
    @State var selection1: Int = 0
    @State var selection2: Int = 0

    @State var integers: [Int] = [0, 1, 2, 3, 4, 5]

    var body: some View {
        GeometryReader { geometry in
            HStack(spacing: 0) {
                Picker(selection: self.$selection1, label: Text("Numbers")) {
                    ForEach(self.integers) { integer in
                        Text("\(integer)")
                    }
                }
                .frame(maxWidth: geometry.size.width / 2)
                Picker(selection: self.$selection2, label: Text("Numbers")) {
                    ForEach(self.integers) { integer in
                        Text("\(integer)")
                    }
                }
                .frame(maxWidth: geometry.size.width / 2)
            }
        }
    }
}

这是画布：

Pickers in HStack with GeometryReader

拾取器现在更接近我想要的外观了，但是大小仍然略有偏离，并且它们现在在中间相互重叠。

Answer 1

您可以通过添加clipped（）修饰符来修复中间的重叠部分。至于宽度，我看到它们完全一样：

struct ContentView: View {
    @State var selection1: Int = 0
    @State var selection2: Int = 0

    @State var integers: [Int] = [0, 1, 2, 3, 4, 5]

    var body: some View {
        GeometryReader { geometry in
            HStack(spacing: 0) {
                Picker(selection: self.$selection1, label: Text("Numbers")) {
                    ForEach(self.integers) { integer in
                        Text("\(integer)")
                    }
                }
                .frame(maxWidth: geometry.size.width / 2)
                .clipped()
                .border(Color.red)

                Picker(selection: self.$selection2, label: Text("Numbers")) {
                    ForEach(self.integers) { integer in
                        Text("\(integer)")
                    }
                }
                .frame(maxWidth: geometry.size.width / 2)
                .clipped()
                .border(Color.blue)
            }
        }
    }
}

SwiftUI-在HStack中并排放置两个选择器不会调整选择器的大小

更新

1 个答案: