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

##一般的なButtonの作り方

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

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

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

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

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

```swift
Button("Button") {
    // action
}
```
このようになります。
少しスッキリ書けますね！

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

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

```swift
Button(action: {
    // action
}) {
    HStack {
        Image(systemName: "suit.heart.fill")
        Text("Button")
    }
}
```
<img width="135" alt="スクリーンショット 2019-09-13 12.03.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106260/a5a59f7f-eb80-89bb-c704-d764fe26997b.png">

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

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

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

<img width="95" alt="スクリーンショット 2019-09-13 12.06.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106260/74efe000-e19b-2606-fdff-fbf8a491218d.png">

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

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

```swift
Button(action: {
    // action
}) {
    VStack {
        Image(systemName: "suit.heart.fill")
        Text("Button")
    }
}.accentColor(.red)
```
<img width="107" alt="スクリーンショット 2019-09-13 12.11.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106260/fdf8d1a6-edb0-4f97-5748-8ca5dd3d38df.png">

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

```swift
Button(action: {
    // action
}) {
    VStack {
        Image(systemName: "suit.heart.fill").foregroundColor(.orange)
        Text("Button")
    }
}.accentColor(.red)
```
<img width="94" alt="スクリーンショット 2019-09-13 12.25.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106260/9ed87776-0168-b544-e076-6b2bdc63d905.png">

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

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

Buttonのサイズを指定する場合

```swift
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を指定してしまうと
<img width="146" alt="スクリーンショット 2019-09-13 12.35.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106260/bf83afc5-2475-ff55-8be7-34205fe518e0.png">

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

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

```swift
Button(action: {
    // action
}) {
    VStack {
        Image(systemName: "suit.heart.fill")
        .foregroundColor(.orange)
        Text("Button")
    }.frame(width: 100, height: 100)
}
.accentColor(.red)
.background(Color.green)
```
<img width="133" alt="スクリーンショット 2019-09-13 12.40.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106260/7d2533fa-1dc9-65ed-aae0-7bae4c6aa63e.png">

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