【SwiftUI】Button - 応用編 -

前回の基礎編に引き続き、応用編として色々なボタンを試してみます。

下記のようにボタンを画面に表示してみました。コードも下記になります。

・スクリーンショット

・コード

	// The folloing site is display result for buttons
	// Ex１) Frame
	Button(action: {
	//Action
	}, label: {
	Text("Button")
	.font(.title)
	.foregroundColor(.purple)
	.padding(10)
	.border(Color.purple, width: 3)
	})
	// Ex2) CornerRadius
	Button(action: {
	//Action
	}, label: {
	Text("Button")
	.font(.title)
	.cornerRadius(40)
	.foregroundColor(.purple)
	.padding(10)
	.overlay(
	RoundedRectangle(cornerRadius: 40)
	.stroke(Color.purple, lineWidth: 3)
	)
	})
	// Ex3) Double Frame
	Button(action: {
	//Action
	}, label: {
	Text("Button")
	.font(.title)
	.cornerRadius(40)
	.foregroundColor(.purple)
	.padding(10)
	.overlay(
	RoundedRectangle(cornerRadius: 40)
	.stroke(Color.purple, lineWidth: 3)
	)
	})
	// Ex4) Courner Radius
	Button(action: {
	//Action
	}, label: {
	Text("Hello World")
	.fontWeight(.bold)
	.font(.title)
	.padding()
	.background(Color.purple)
	.foregroundColor(.white)
	.padding(10)
	.border(Color.purple, width: 5)
	})
	// Ex5) Gradation
	Button(action: {
	print("Delete tapped!")
	}) {
	HStack {
	Image(systemName: "trash")
	.font(.title)
	Text("Delete")
	.fontWeight(.semibold)
	.font(.title)
	}
	.padding()
	.foregroundColor(.white)
	.background(LinearGradient(gradient:
	Gradient(
	colors: [Color.green, Color.yellow]
	),
	startPoint: .leading,
	endPoint: .trailing))
	.cornerRadius(40)
	}

view raw SwiftUI-Buttons hosted with ❤ by GitHub

---