前回紹介したButtonについて今回は見た目の工夫について考えてみます。labelのブロック内にViewオブジェクトを書くとボタンとして押せるようになりますが、Text以外にも色々なオブジェクトを使用可能です。ここではButtonと相性の良いLabelオブジェクトの利用を紹介します。

  • 前回のコードに続けて書く
  • ButtonのlabelにはTextやImage, VStackなどを使うことができる
  • 今回は Label オブジェクトを使う
    • Label( 文字列, systemImage:画像名 ) : ImageとTextを同時に表示

コード

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

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Button { 
                print( "押しました" )
            } 
            label: {
                Label( "アイコンを含むボタン", systemImage: "plus" )
                .foregroundStyle( .white )
                .padding( .vertical, 10 )
                .padding( .horizontal, 20 )
                .background( .blue )
                .clipShape( RoundedRectangle(cornerRadius: 8) )
            }
        }
    }
}

結果

swiftui_1_4_2_1.png