CODEWITHSUNDEEP
iosswiftswiftuiswiftui-form
Damiano Miazzi
Damiano Miazzi

Reputation: 2325

Form in SwiftUI, position the user picture like in the setting of IOS using swiftUI

How can I put the image in the Form of swiftUI in order to have the same effect like the picture attached?

enter image description here

I have try with this code, but not working:

struct UserDetails: View {
    @ObservedObject var dm : DataManager
    @Binding var userLoggato : UserModel?
    var body: some View {
        Form{
            HStack{
                Image(systemName: "person")
            }
            Text(userLoggato?.name ?? "")
        }
    }
}

If I use the spacer between the Image I obtain another white line with the image inside. I want my image have the gray background and been positioned like in the attached picture.

Upvotes: 6

Views: 3058

Answers (2)

Asperi
Asperi

Reputation: 258087

Here is a demo of possible approach - no spacers - (colors/paddings are configurable, as usual)

Tested with Xcode 11.4

demo

struct UserDetails: View {
    var body: some View {
        Form{
            HStack(alignment: .top) {
                VStack {
                    Image(systemName: "person")
                        .resizable()
                        .frame(width: 60, height: 60)
                        .padding()
                        Text("Person Name").font(Font.title)
                        Text("position title")
                }.padding()

            }
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
            .listRowInsets(EdgeInsets())
            .background(Color(UIColor.lightGray)) // your color here !!

            Text("Email")
        }
    }
}

Upvotes: 4

RealUglyDuck
RealUglyDuck

Reputation: 377

Just add Spacers in HStack:

struct UserDetails: View {
    @ObservedObject var dm : DataManager
    @Binding var userLoggato : UserModel?
    var body: some View {
        Form{
            HStack{
                Spacer()
                Image(systemName: "person")
                Spacer()
            }
            Text(userLoggato?.name ?? "")
        }
    }
}

Upvotes: 1

Related Questions