SwiftUIでこのようなボタンを作っていた時のこと。

ただのボタンなのだが、タップする指の位置によってボタンが反応しないことがあった。

調べてみるとすぐに分かったのだが、どうやら中央のテキスト部分にしかボタンのタップ領域が設定されていないのが原因のようだ。

問題のコードがこちら。

1
2
3
4
5
6
7
8
9
Button(action: {
  // 省略
}) {
  Text("登録")
}
.frame(width: 200, height: 50)
.foregroundColor(Color.white)
.background(Color.blue)
.cornerRadius(5)

Buttonに色やサイズを指定するモディファイアを設定しているのだが、これではタップ領域がボタン全体に反映されない。

正解はこちら。

1
2
3
4
5
6
7
8
9
Button(action: {
  // 省略
}) {
  Text("登録")
    .frame(width: 200, height: 50)
    .foregroundColor(Color.white)
    .background(Color.blue)
    .cornerRadius(5)
}

Textビューにモディファイアを設定することで、この問題は解消された。