👽
【Swift UI】線を引く方法！ 〜番外編も 2023/12
SwiftUIで線を引く方法
SwiftUIで線を引くにはDividerという構造体を使用します。
Dividerで引かれた線には色をつけることもできます。
Divider()
公式リファレンス貼っときます！
横に伸びる線
Divider()は、デフォルトで横線を引くようになっています。
| コード | 見た目 |
|---|---|
 |
 |
縦に伸びる線
Divider()をHStackのなかで使用すると縦の線になる。
| コード | 見た目 |
|---|---|
 |
 |
線に色をつける
Divider()は、デフォルトでは灰色の線を描画します。
しかし、色をつけることも可能です！
.background()で色をかえる。
| コード | 見た目 |
|---|---|
 |
 |
線の長さを変える
Divider()で引かれる線の長さを変える。
.frame(width: )
もしくは、
.padding(.horizontal, )でも.frame(width: )と同じ動きができる。
.padding(.horizontal, 150)
| コード | 見た目 |
|---|---|
 |
 |
線の長さを変える（実験）
frameをheightにしてみる。
.frame(width: )をheightにすると線と要素の間に空間ができる。
.frame(height: )
.background()と併用できます。
| コード | 見た目 |
|---|---|
 |
 |
線の角度を変える。
.rotationEffect(.init(degrees: ))を使うことで、線の角度を変えることができる。
| コード | 見た目 |
|---|---|
 |
 |
番外編
太い線を引く
Divider()では太い線を引くことができませんが、 Rectangle()を使うことで可変式な線を引くことができます。
.frame(height: )の値を変えることで太い線をくことができます。
色と角度はDivider()と同じです。
| コード | 見た目 |
|---|---|
 |
 |
角度と色と線の長さ
.frame()にwidthを付け加えることで線の長さも変えられる。
heightだけではなく、widthをつけることで線の長さを変えられる。
| コード | 見た目 |
|---|---|
 |
 |
Discussion