オブジェクトは基本的に長方形(矩形)の領域を持ちます。しかし矩形領域内で形を変えることもできます。ここではオブジェクトを角丸にしてみましょう。.clipShape をつかって

  • 前回のコードに続けて書く
  • Text(“こんにちわ”)の .background後に.clipSpahe() を追加
    • .clipShape()に RoundedRectangle( cornerRadius:8 ) を指定する
    • 半径8ポイントで角を丸くした四角でクリップ(切り取る)という意味
  • Text(“こんばんわ”)の .background後に. を追加
    • .clipShape()に RoundedRectangle( cornerRadius:30 ) を指定する
    • 半径30ポイントで角を丸くした四角でクリップ(切り取る)という意味
  • オブジェクトに追加する並びで結果が変わる（背景色を決めた後に丸める）

コード

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text( "こんにちわ" )
            .font( .system(size: 24 ) )
            .foregroundColor( .mint )
            .frame( minWidth: 100, minHeight: 100 )
            .padding()
            .background( .indigo )
            .clipShape( RoundedRectangle( cornerRadius:8 ) )
            .padding( .bottom, 50 )
            
            Text( "こんばんわ" )
            .frame( maxWidth:.infinity, minHeight:60 )
            .padding()
            .background( .purple )
            .clipShape( RoundedRectangle( cornerRadius:30 ) )
        }
    }
}

結果

swiftui_1_2_7_1.png

メモ

iOS16以前は .cornerRadius(半径) でしたが非推奨になりました.

関連情報