Form And Group

Here are two ways to group widgets in SwiftUI:

From
GroupBox

Form

The official documentation defines a form as: “A container for grouping controls used for data entry, such as in settings or inspectors.” In fact, we often see it used in iOS settings or in the Health app, where there is data entry, not just tap interactions.

It’s also possible to divide the form into different sections and use a title for each.

Take a look at the example:

struct ContentView: View {
    @State var value = ""
    @State var age = ""
    @State var isOn: Bool = true
    var body: some View {
        VStack {
            Form {
                Section(header: Text("First Header")) {
                    HStack {
                        Text("Age")
                        Spacer()
                        TextField("", text: $age)
                        .frame(width: 80, height: 30)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                    }
                    HStack {
                        Toggle(isOn: $isOn) {
                            Text("Enable editing")
                        }
                    }
                    Picker("Select", selection: $value.self) {
                        ForEach(0..<10, id: \.self) {
                            Text("\($0)").tag("\($0)")
                        }
                    }
                }
                Section(header: Text("Second Header")) {
                    HStack {
                        Toggle(isOn: $isOn) {
                            Text("Enable Sound")
                        }
                    }
                }
            }
        }
    }
}

To have:

GroupBox

The GroupBox is similar to the Form in that it is used to group widgets. However, it is a view, not a container. It has only an optional title, doesn’t support sections, and some objects behave differently when placed inside a GroupBox.

struct ContentView: View {
    @State var age = ""
    @State var value = ""
    @State var isOn: Bool = true
    var body: some View {
        VStack {
            GroupBox(label: Text("Title")) {
                Picker("Select", selection: $value.self) {
                    ForEach(0..<10, id: \.self) {
                        Text("\($0)").tag("\($0)")
                    }
                }
                HStack {
                    Text("Age")
                    Spacer()
                    TextField("", text: $age)
                        .frame(width: 80, height: 30)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
                HStack {
                    Toggle(isOn: $isOn) {
                        Text("Enable editing")
                    }
                }
                
            }
            Spacer()
        }
    }
}

To have:

You can see that the look and feel is a bit different, and the label of the Picker has disappeared. In this case, we need to add a Text view to contain the label.

What should we use? My advice is to use a Form when we want (and have) a simple layout. In other cases, use a GroupBox—for example, when we want to group objects and also include a ScrollView.

Form

GroupBox

Leave a Reply Cancel reply