ボタンにアイコン画像を表示する
GZYtechボタンにアイコン画像を表示する方法を紹介します。下記に示すような表示になります。
Button の label モディファイアで設定します。アイコン画像の名前は SF Symbols アプリで調べて、お気に入りのものを設定してみてください。
Button( action: {
// ここに動かしたいコードを記述する.
// たとえばボタン有効or無効トグルなど.
}, label: {
// お好みのアイコンを指定する.
Image( systemName: "video" )
.resizable()
.scaledToFit()
.padding()
})
.frame( width: 200.0, height: 160.0 )
.foregroundColor( .white )
.background( .blue )
.cornerRadius( 8.0 )
実際に動くコード
ボタンを押してそれぞれのアクティブ、ノンアクティブのフラグをトグルします。
"video" のアイコンのボタンは、フラグで背景色を切り替えています。
"phone" のアイコンのボタンは、フラグでアイコンの種類と背景色を切り替えています。
import SwiftUI
struct ContentView: View {
@State var flag0: Bool = false
@State var flag1: Bool = false
let BTN_W = 200.0
let BTN_H = 160.0
let BTN_R = 8.0
var body: some View {
VStack {
Spacer()
Button( action: {
flag0 = !flag0
}, label: {
Image( systemName: "video" )
.resizable() // これを忘れないように.
.scaledToFit()
.padding() // これがないとフレームギリギリまで表示されてしまう.
})
.frame( width: BTN_W, height: BTN_H )
.foregroundColor( .white )
.background( flag0 ? .red : .blue )
.cornerRadius( BTN_R )
Spacer()
Button( action: {
flag1 = !flag1
}, label: {
Image( systemName: flag1 ? "phone.arrow.down.left" : "phone" )
.resizable()
.scaledToFit()
.padding()
})
.frame( width: BTN_W, height: BTN_H )
.foregroundColor( .white )
.background( flag1 ? .red : .green )
.cornerRadius( BTN_R )
Spacer()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
