👽
【Swift UI】borderについて詳しく
borderについて詳しく調べる
borderは簡単ですが、汎用性が高く書き方を忘れるので書いていきます。
参考になりば！！
borderの書き方
borderはTextやTextFiledなど様々な部品に枠をつけることができます。
| コード | 見た目 |
|---|---|
 |
 |
しかし、枠が狭くテキストが見えにくくなっています。
borderにpaddingをつける
borderで枠をつけるとデフォルトでは狭く、テキストが見えづらくなります。
そこで、borderの前にpaddingを指定することで余白をつけましょう。
| コード | 見た目 |
|---|---|
 |
 |
色と太さを変える
.borderに色とwidthを設定するだけです。
| コード | 見た目 |
|---|---|
 |
 |
背景色
背景色の付け方は、.backGroundをつけるだけですがpaddingと違い.borderの後ろにつけないと部品の背景色になります。
| コード | 見た目 |
|---|---|
 |
 |
形を変える
.cornerRadiousが非推奨になってしまったので、.clipShapeを使います！
円 .clipShape(Circle())
| コード | 見た目 |
|---|---|
 |
 |
楕円 .clipShape(.ellipse)
| コード | 見た目 |
|---|---|
 |
 |
ボタンボーダー .clipShape(.buttonBorder)
| コード | 見た目 |
|---|---|
 |
 |
カプセル型 .clipShape(.capsule)
| コード | 見た目 |
|---|---|
 |
 |
角を丸くする .clipShape(.rect(cornerRadius: ))
| コード | 見た目 |
|---|---|
 |
 |
Discussion