SwiftUI ボタン

2020年1月15日

SwiftUIのButtonでテキストのみ、テキスト+画像のボタンを作る – Qiita

縦並びの場合はHStackのところをVStackにするだけで縦並びになります。

Button(action: {
// action
}) {
VStack {
Image(systemName: “suit.heart.fill”)
Text(“Button”)
}
}

テキストカラーの指定
テキストカラーの指定には

@inlinable public func accentColor(_ accentColor: Color?) -> some View
を使います。

Button(action: {
// action
}) {
VStack {
Image(systemName: “suit.heart.fill”)
Text(“Button”)
}
}.accentColor(.red)

画像だけ別の色にする場合は中のImageに別のカラーを指定します。

Button(action: {
// action
}) {
VStack {
Image(systemName: “suit.heart.fill”).foregroundColor(.orange)
Text(“Button”)
}
}.accentColor(.red)

中のViewに対してforegroundColorを指定してもカラーの変更ができるので、
全て同じ色の場合はButtonのaccentColor
それぞれ別の色の場合はButtonの中のViewにforegroundColorを指定するような感じになるかと思います。

Buttonのサイズを指定した場合のタップ範囲について
Buttonのサイズを指定する場合

Button(action: {
// action
}) {
VStack {
Image(systemName: “suit.heart.fill”)
.foregroundColor(.orange)
Text(“Button”)
}.background(Color.blue)
}
.accentColor(.red)
.frame(width: 100, height: 100)
.background(Color.green)

このようにButtonに対してframeを指定してしまうと

タップが有効な範囲は青色の部分だけになってしまいます。

Buttonのサイズを変える場合は、中のViewに対してframeを指定しましょう。

Button(action: {
// action
}) {
VStack {
Image(systemName: “suit.heart.fill”)
.foregroundColor(.orange)
Text(“Button”)
}.frame(width: 100, height: 100)
}
.accentColor(.red)
.background(Color.green)

こうすると緑の範囲が全てタップ有効になります。