DEV Community

GoyesDev
GoyesDev

Posted on

[SUI] Formularios (Form)

Form es un contenedor para agrupar controles principalmente usados para configuración de alguna funcionalidad.

Form presenta los controles en un List con estilo grouped, con relleno alrededor.

Notar que, así como el componente List, Form también puede separar el contenido por secciones usando Section.

enum NotifyMeAboutType {
  case directMessages, mentions, anything
}

enum ProfileImageSize {
  case large, medium, small
}

struct ContentView: View {
  @State private var notifyMeAbout: NotifyMeAboutType = .anything
  @State private var playNotificationSounds = false
  @State private var sendReadReceipts = false
  @State private var profileImageSize: ProfileImageSize = .small

  var body: some View {
    NavigationView {
      Form {
        Section(header: Text("Notifications"), footer: Text("¿Qué quieres que te notifique?")) {
          Picker("Notify Me About", selection: $notifyMeAbout) {
            Text("Direct Messages").tag(NotifyMeAboutType.directMessages)
            Text("Mentions").tag(NotifyMeAboutType.mentions)
            Text("Anything").tag(NotifyMeAboutType.anything)
          }
          Toggle("Play notification sounds", isOn: $playNotificationSounds)
          Toggle("Send read receipts", isOn: $sendReadReceipts)
        }
        Section(header: Text("User Profiles")) {
          Picker("Profile Image Size", selection: $profileImageSize) {
            Text("Large").tag(ProfileImageSize.large)
            Text("Medium").tag(ProfileImageSize.medium)
            Text("Small").tag(ProfileImageSize.small)
          }
          Button("Clear Image Cache") {}
        }
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)