web-dev-qa-db-ja.com

ボタンをVStack全体に広げる

現在、次のSwiftUIビューがあります。

_HStack {
  ...
  VStack {
    TextField { ... }
    SecureField { ... }
    Button { ... }
  }
  ...
}
_

enter image description here

.background(Color.green)をButtonに追加しました。ご覧のとおり、ビューはテキストにぴったりです。

ボタンの幅を調整してVStack-UIStackViewの_.fill_モードのようなものになるようにボタンの幅を調整する方法があるかどうか疑問に思っています。

swiftswiftui
6
Kelvin Lau

このようなもの？

              Button(action: {
                    // Do your login thing here
                }) {
                    Capsule()
                        .frame(height: 44)
                        .overlay(Text("Login").foregroundColor(Color.white)).padding()
                }
1
SMP

UIStackViewと同様の_.fill_メソッドがあるかどうかはわかりませんが、Button（またはそのためのビュー）に間隔を空けたい場合は、私にとってうまくいったのは、frameまたはpaddingを設定することです

.frame(width: 300, alignment: .center)（ここで高さを設定することもできますが、そうでない場合は、ボタンのテキストに基づいて高さを推測できるはずです。

任意の幅を設定したくない場合は、_import UIKit_を使用してUIScreenを利用し、デバイスの全幅を取得することもできます。 （これを取得するSwiftUIの方法があるかもしれませんが、現時点ではまだ見つかりません）

_.frame(width: UIScreen.main.bounds.width, alignment: .center)
_

そして、あなたはいくつかの呼吸室のために少しのパディングを追加することができます

.padding(.all, 20)

パディングの問題は、画面の追加の幅に追加されるため、幅を設定するときに考慮する必要があることです。

（20 *リーディングとトレーリングの両側）

_.frame(width: UIScreen.main.bounds.width - 40, alignment: .center)
_

（呼吸スペースは、テキストが画面の最後までカバーする場合、または配置が_.leading_または_.trailing_の場合に使用します）

0
Simon

ボタンのテキストのフレームをUIScreenのサイズにし、その後に背景色を設定します（すべてのスタイルの変更が完了したことを確認してくださいafterフレームサイズの変更。そうでない場合、スタイルの変更は元のデフォルトフレームに表示されます）。フレームサイズは上方向に伝播し、ボタンの幅も画面の幅に拡大します。

Button(action: {
                // Sign in stuff
            }) {
                Text("Sign In")
                .frame(width: UIScreen.main.bounds.width, height: nil, alignment: .center)
                .background(Color.green)
            }

画面の端からオフセットするために、フレームと背景の設定の間に負の水平パディングを追加することもできます。

Button(action: {
                    // Sign in stuff
                }) {
                    Text("Sign In")
                    .frame(width: UIScreen.main.bounds.width, height: nil, alignment: .center)
                    .padding(.horizontal, -10.0)
                    .background(Color.green)
                }
0
RPatel99