SwiftUI – Master and Detail

By | 04/11/2019

In this post, we will see how to create a View Detail, using the dynamic list created in the post: SwiftUI – Static and Dynamic List.

First of all, we modify the struct User adding a new property called “Info”:

struct User: Identifiable {
    var id: Int
    var Username:String
    var Password:String
    var Info: String
}



Then, we create a SwiftUI View called “DetailUser” that, we will use to show the details of an User object:

[DETAILUSER.SWIFT]

import SwiftUI

struct DetailUser: View {
    // it is a property wrapper that allows any view access to global dependencies
    @Environment(\.presentationMode) var presentationMode
    
    var objUser:User
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text(objUser.Username).font(.largeTitle)
            Text(objUser.Info)
        }
        // Define the title of the View
        .padding().navigationBarTitle("Detail", displayMode: .inline)
        // Hide the back button
        .navigationBarBackButtonHidden(true)
        // Add your custom back button here
        .navigationBarItems(leading:
            Button(action: {
                // define an action
                self.presentationMode.wrappedValue.dismiss()
            }) {
                // Define the button's text
                Text("Go List")
        })
    }
}

// These lines of code mean that whatever code is wrapped within these commands, will only be shown in the preview for debugging purposes.
#if DEBUG
struct DetailUser_Previews: PreviewProvider {
    static var previews: some View {
        DetailUser(objUser: User(id: 1, Username: "test", Password: "test", Info: "test"))
    }
}
#endif



Finally, we have to add the DetailUser view into the file “ContentViewList.swift”:

[CONTENTVIEWLIST.SWIFT]

import SwiftUI

struct ContentViewList: View {
    // define a varible called lstUser
    let lstUser: [User] = [
        .init(id: 1, Username: "Username1", Password: "Password1", Info: "Text for Info of Item with id 1"),
        .init(id: 2, Username: "Username2", Password: "Password2", Info: "Text for Info of Item with id 2"),
        .init(id: 3, Username: "Username3", Password: "Password3", Info: "Text for Info of Item with id 3"),
        .init(id: 4, Username: "Username4", Password: "Password4", Info: "Text for Info of Item with id 4"),
        .init(id: 5, Username: "Username5", Password: "Password5", Info: "Text for Info of Item with id 5"),
        .init(id: 6, Username: "Username6", Password: "Password6", Info: "Text for Info of Item with id 6")]
    
    var body: some View {
        // Defintion of a Navigation Controller
        NavigationView{
            // put the array into a List
            List(lstUser) { item in
                NavigationLink(destination: DetailUser(objUser: item))
                {
                    HStack
                    {
                        Text("ID: \(item.id)")
                        VStack
                        {
                            Text(item.Username)
                            Text(item.Password)
                        }.padding(.leading, 20)
                    }.padding(.leading, 10)
                }
            }.navigationBarTitle("Dynamic List")
        }
    }
}

struct ContentViewList_Previews: PreviewProvider {
    static var previews: some View {
        ContentViewList()
    }
}



Now, if we run the application, this will be the result:



Leave a Reply

Your email address will not be published.