Swift UI Basics 2

Posted on In

SwiftUI Basics 2

Button View

A Button is a view that performs an action when tapped. You can create a button using the Button view.

A ver simple button looks like this:

1
2
3
Button("Tap me") {
    print("Button tapped")
}

You can also customize the button’s appearance using modifiers:

1
2
3
4
5
6
7
8
9
Button(action: {
    print("Button tapped")
}) {
    Text("Tap me")
        .font(.headline)
        .foregroundColor(.white)
        .padding()
        .shadow(radius: 5)
}

Use button to change the state of a view:

1
2
3
4
5
6
7
8
9
10
11
12
13
struct ContentView: View {

    @State private var count = 0

    var body: some View {
        VStack {
            Text("Count: \(count)")
            Button("Increment") {
                count += 1
            }
        }
    }
}

here @State is a property wrapper that allows you to create a mutable state in a view. When the state changes, the view will be re-rendered to reflect the new state.

@Binding

@Binding is a property wrapper that allows you to create a two-way connection between a view and its parent view. It is used to pass a mutable state from a parent view to a child view.

1
2
3
4
5
6
7
struct ParentView: View {
    @State private var isOn = false

    var body: some View {
        ChildView(isOn: $isOn)
    }
}
1
2
3
4
5
6
7
struct ChildView: View {
    @Binding var isOn: Bool
    
    var body: some View {
        Toggle("Toggle", isOn: $isOn)
    }
}

here, the isOn state in the ParentView is passed to the ChildView using the $ prefix. $ creates a binding to the isOn state in the ParentView. The ChildView can then modify the isOn state, and the changes will be reflected in the ParentView.

List View

A List is a view that displays a scrollable list of data. You can create a list using the List view.

1
2
3
4
5
6
7
8
struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3"]
    var body: some View {
        List(items, id: \.self) { item in
            Text(item)
        }
    }
}

Here, the List view takes an array of items and a closure that defines how to display each item. The id: \.self parameter is used to identify each item in the list.

Alert View

An Alert is a view that displays a modal dialog to the user. You can create an alert using the alert modifier.

1
2
3
4
5
6
7
8
9
10
11
12
13
struct ContentView: View {
    @State private var showAlert = false
    var body: some View {
        Button("Show Alert") {
            showAlert = true
        }
        .alert("Alert Title", isPresented: $showAlert) {
            Button("OK", role: .cancel) { }
        } message: {
            Text("This is an alert message.")
        }
    }
}

Here, the alert modifier is used to display an alert when the showAlert state is true. The alert has a title, a message, and a button to dismiss the alert.

TabView

A TabView is a view that displays multiple child views in a tabbed interface. You can create a TabView using the TabView view.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
struct ContentView: View {
    var body: some View {
        TabView {
            Text("Home View")
                .tabItem {  
                    Label("Home", systemImage: "house")
                }
            Text("Settings View")
                .tabItem {
                    Label("Settings", systemImage: "gear")
                }
        }
    }
}

Here, the TabView contains two child views: a Home view and a Settings view. Each child view has a tab item with a label and a system image.

TextField View

A TextField is a view that allows the user to enter text. You can create a TextField using the TextField view.

1
2
3
4
5
6
7
8
struct ContentView: View {
    @State private var name: String = ""
    var body: some View {
        TextField("Enter your name", text: $name)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()
    }
}

Here, the TextField view takes a placeholder text and a binding to the name state. The textFieldStyle modifier is used to apply a rounded border style to the text field.