12

私の目標は、2 つのピッカーを横に並べて配置し、各ピッカーが画面の半分の幅を占めるようにすることです。画面の幅に収まり、同じ幅の 2 つのコンポーネントを持つa を想像してみてくださいUIPickerView。これが、私が SwiftUI で再作成しようとしているものです。

SwiftUI のピッカーは現在複数のコンポーネントを許可していないため、私にとって明らかな代替手段は、2 つのピッカーを .xml 内に配置することでした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 の方がはるかに使いやすいでしょう。

2 つのピッカーを の中に配置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 のピッカー

ピッカーは私が望む外観に近づいていますが、サイジングはまだわずかにずれており、真ん中で互いに重なっています.

4

2 に答える 2

-1

0

xcode13での重複を防ぐために追加するだけです

.compositingGroup()

それから加えて

.clipped()
于 2021-11-11T09:01:04.717 に答える