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

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 - HStack 中的选择器

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

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

将两个选择器放置在 an 中是否无法正确调整它们的大小是否是一个错误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)
            }
        }
    }
}

这是画布：

带有 GeometryReader 的 HStack 中的选取器

拾取器现在更接近于我想要的外观，但尺寸仍然略有偏差，它们现在在中间相互重叠。

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)
            }
        }
    }
}

Answer 2

0

为了防止在 xcode13 中重叠，只需添加

.compositingGroup()

然后加

.clipped()