【Swift UI】borderの使い方!枠線や下線の色や太さ

この記事からわかること
- Swift UIのborderモディファイアの使い方
- ビューに枠線や下線を付与する方法
- 色や太さの変更方法
\ アプリをリリースしました /
SwiftUIでビューに枠線を付与できる方法とborderモディファイアの使い方をまとめていきます。
ビューに枠線を付与する方法

SwiftUIでビューに対して枠線を付与する方法はいくつかあります。
- borderモディファイアを使用する
- overlayモディファイアを使用する
borderモディファイアの使い方
一番スマートな方法がborderモディファイアを使用する方法です。引数にはColor構造体(またはShapeStyle
プロトコルに準拠したもの)を渡すことで色味を、width
に線の太さを渡します。

これで要素に対して枠線が付与されます。borderモディファイアを呼び出す前にpadding
を呼び出せば余白を持った枠線を実装することができます。

overlayモディファイアを使用する
枠線を付与する方法としてビューを重ねる役割を持つoverlay
モディファイアと四角形を定義するRectangle
構造体を使用する方法もあります。

ビューに下線を付与する
ビューに対してサイドだけや下線などといった一部分だけの枠線を実装するにはborderモディファイアでは対応できません。そのため、先ほどのRectangle
構造体を使用してVStackなどで整えることで実装可能です。

文字に下線を付与する
Text構造体に下線を付与したい場合はunderline
モディファイアを使用することでテキスト自体に下線を付与することが可能です。
破線の実装方法
ビューに対して破線の枠を実装する際にもborderモディファイアのみでは実装できません。なのでRectangle
構造体を使用して実装します。

ビューに対して付与したい場合はoverlayで重ねます。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。