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

##一般的なButtonの作り方

Xcodeの保管で出てくるButtonのイニシャライザは下記のもので、
1つ目の引数にaction
2つ目の引数に表示するテキスト
を指定します。

public init(action: @escaping () -> Void, @ViewBuilder label: () -> Label)

Button(action: {
    // action
}) {
    Text("Button")
}

##テキストのみのButtonの作り方

Xcodeの保管では出てこないのですが、テキストのみのボタンの場合上記のイニシャライザを使わずに作ることができます。

Button("Button") {
    // action
}

このようになります。
少しスッキリ書けますね！

##テキスト+画像のButtonの作り方

テキストと画像を使うボタンの場合は最初に記載したイニシャライザを使います。

Button(action: {
    // action
}) {
    HStack {
        Image(systemName: "suit.heart.fill")
        Text("Button")
    }
}

横並びにする場合はHStackを使ってImageとTextを指定します。

縦並びの場合は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)

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