【SwiftUI】iOS 15から追加されたButtonのmodifier

iOS 15でButtonを使用すると、実機のダークモードのときだけ謎の縁取り？外枠？みたいなのが現れてしまいました。

原因と対策は以下の通りです。

iOS 15からButtonのmodifierに.buttonStyleが新たに追加されていました。

Styling Buttons

You can customize a button’s appearance using one of the standard button styles, like bordered, and apply the style with the buttonStyle(_:) modifier:

HStack { Button(“Sign In”, action: signIn) Button(“Register”, action: register)}.buttonStyle(.bordered)

If you apply the style to a container view, as in the example above, all the buttons in the container use the style:

https://developer.apple.com/documentation/swiftui/button

You can also create custom styles. To add a custom appearance with standard interaction behavior, create a style that conforms to the ButtonStyle protocol. To customize both appearance and interaction behavior, create a style that conforms to the PrimitiveButtonStyle protocol. Custom styles can also read the button’s role and use it to adjust the button’s appearance.

https://developer.apple.com/documentation/swiftui/button

もとからあるスタイルを使ったり、カスタムスタイルを作成して使用できるらしいです。

外観だけのカスタムスタイルはButtonStyleプロトコル、外観とインタラクション動作のカスタムスタイルはPrimitiveButtonStyleプロトコルに準拠する必要があるとのこと。

buttonStyleの引数には

• automatic
• bordered
• borderedProminent
• borderless
• card
• link
• plain

がある。

今回はiOS14のときと同じデザインにしたかったのでplainを使用することにしました。

Button(action: {
//action
}, label {
    Text("button")
}
.buttonStyle(.plain)

とりあえずこれで解決しました。

buttonStyle modifierを使うといままでZStackとか.overlayとかで作ってたButtonを簡単に作れそうなのでほかのスタイルも後で試してみようと思います。

以上

SwiftUI初心者にわかりやすいオススメ参考書