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.

What do you mean by `same effect`? In circle, paddings, label, background? Would you be more precise? — Asperi, Aug 13 '20 at 09:29
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. — Damiano Miazzi, Aug 13 '20 at 10:17

Asperi · Answer 1 · 2022-05-25T11:59:21.070

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

Excellent answer. However, for background, I'd prefer using: `.listRowBackground(Color(.systemGroupedBackground))` — James Selvakumar, May 20 '22 at 01:26

score 1 · Answer 2 · answered Aug 13 '20 at 09:16

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

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

2 Answers2