[SwiftUI]「Picker」の高さを指定する方法

どうも、ちょげ（@chogetarou）です。

Pickerは、デフォルトだと高さを変えられません。

そこで、この記事ではPickerの高さを指定する方法について解説します。

方法

まず、.frameモディファイアで高さを指定します。

Picker(selection: $number, label: Text(""), content: {
                    ForEach(1..<6) { index in
                        Text("\(index)")
                            .tag(index)
                    }
                })
                .frame(height: 50)

これだけだと高さは変わっていないように見えます。

そこで、次に.clipped()を付与します。

 Picker(selection: $number, label: Text(""), content: {
                    ForEach(1..<6) { index in
                        Text("\(index)")
                            .tag(index)
                    }
                })
                .frame(height: 50)
                .clipped()

そうすると、次のように高さが変わります。

Pickerの要素が1つしか表示されないくらいの高さになっています。

Pickerのサイズは、デフォルトだと変更しても、サイズを超えて表示されるようになっているので変わっていないように見えるのです。

そこで、.clipped()をつけます。

clipped()は、サイズ内に収まるようにする修飾子で、付与することで指定したサイズを超えなくなります。

まとめ

Pickerのサイズを変えるには、次のようにします。

• frame()で高さを指定
• clipped()でサイズないに収まるようにする

注意点としては、高さを指定すると選択肢がいくつか見えなくなるのに気をつけてください。