【SwiftUI】TextField サンプルコード

自在に書けそうで書けない TextField。

カスタムスタイルを使うより、

そのまま View メソッドのチェインと入れ子で

記述したほうが自在でわかりやすように思います。

	import SwiftUI

	// 【SwiftUI】TextField の角を丸くして背景色を付けるもっとも簡単な方法は
	// https://android.benigumo.com/20240507/rounded-text-field/

	struct TestTextField: View {
	@State private var text = ""

	// style
	// background
	// overlay
	// clear button

	// built-in color *

	var body: some View {
	VStack {
	TextField("normal", text: $text)
	.background()

	TextField("+ rounded border", text: $text)
	.textFieldStyle(.roundedBorder)
	.background()

	TextField("+ overlay", text: $text)
	.textFieldStyle(.roundedBorder)
	.background()
	.overlay {
	RoundedRectangle(cornerRadius: 6)
	.stroke(.secondary, lineWidth: 0.5)
	}

	TextField("+ background + overlay", text: $text)
	.textFieldStyle(.plain)
	.padding(6)
	.background(.background, in: .rect(cornerRadius: 6))
	.overlay(
	RoundedRectangle(cornerRadius: 6)
	.stroke(.secondary, lineWidth: 0.5)
	)

	Divider()

	// create text field style _
	TextField("custom style", text: $text)
	.textFieldStyle(
	RoundedBordertFieldStyle(cornerRadius: 6, color: .background)
	) // OK _

	// create view extension (or view modifier)
	TextField("view extension", text: $text)
	.roundedBorder(cornerRadius: 6, color: .background)

	// create child view
	RoundedBorderTextField(label: "child view", text: $text)

	Divider()

	ZStack(alignment: .trailing) {
	TextField("+ clear button", text: $text)
	.textFieldStyle(.roundedBorder)
	.background()
	.overlay {
	RoundedRectangle(cornerRadius: 6)
	.stroke(.secondary, lineWidth: 0.5)
	}

	Button {
	text = ""
	} label: {
	Image(systemName: "xmark.circle.fill")
	.foregroundStyle(.secondary)
	}
	.buttonStyle(.plain)
	.padding(.trailing, 6)
	.opacity(text.isEmpty ? 0 : 1)
	.animation(.default, value: text.isEmpty)
	}

	}
	.frame(width: 200)
	.padding()
	}
	}

	// https://qiita.com/SNQ-2001/items/7c70c995f94b1d0b738a
	struct RoundedBordertFieldStyle: TextFieldStyle {
	var cornerRadius: CGFloat
	var color: Color

	func _body(configuration: TextField<Self._Label>) -> some View {
	let rect = RoundedRectangle(cornerRadius: cornerRadius)
	configuration
	.textFieldStyle(.plain) // macOS
	.padding(cornerRadius)
	.background(color, in: rect)
	.overlay(rect.stroke(.secondary, lineWidth: 0.5))
	}
	}

	extension View {
	func roundedBorder(cornerRadius: CGFloat, color: Color) -> some View {
	let rect = RoundedRectangle(cornerRadius: cornerRadius)
	return self
	.textFieldStyle(.plain)
	.padding(cornerRadius)
	.background(color, in: rect)
	.overlay(rect.stroke(.secondary, lineWidth: 0.5))
	}
	}

	struct RoundedBorderTextField: View {
	var label: String
	@Binding var text: String

	private let rect = RoundedRectangle.rect(cornerRadius: 6)

	var body: some View {
	TextField(label, text: $text)
	.textFieldStyle(.plain)
	.padding(6)
	.background(.background, in: rect)
	.overlay(rect.stroke(.secondary, lineWidth: 0.5))
	}
	}

	extension Color {
	#if os(macOS)
	static let background = Color(NSColor.windowBackgroundColor)
	static let secondaryBackground = Color(NSColor.underPageBackgroundColor)
	static let tertiaryBackground = Color(NSColor.controlBackgroundColor)
	#else
	static let background = Color(UIColor.systemBackground)
	static let secondaryBackground = Color(UIColor.secondarySystemBackground)
	static let tertiaryBackground = Color(UIColor.tertiarySystemBackground)
	#endif
	}

	#Preview("TestTextField") {
	BackgroundCheckeredPattern(size: 10) {
	TestTextField()
	}
	#if os(macOS)
	.frame(width: 300)
	#endif
	}