【SwiftUI】TextField サンプルコード 👉 https://android.benigumo.com/20240723/swiftui-textfield/

TextField.swift

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
}