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

Question

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

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.

Dehnel

What do you mean by same effect? In circle, paddings, label, background? Would you be more precise? – Cathrin

Can't use the spacer , I want my image stay in the centre top part of the form and have the grey background like the screenshot above. If I use the stack it just add an extra line inside the form. – Dehnel

Answer 1

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

Tested with Xcode 11.4

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")
        }
    }
}

Cathrin

Excellent answer. However, for background, I'd prefer using: .listRowBackground(Color(.systemGroupedBackground)) – Rothenberg

Thanks, this .listRowInsets(EdgeInsets()) is important to fix my problem https://mcmap.net/q/1778985/-how-to-achieve-this-form-scrolling-visual-effect-like-iphone-39-s-settings/10158398 – Galer

Answer 2

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 ?? "")
        }
    }
}

Lenrow