Centering Item Inside Horizontal Stack with left and right views doesn't work with DatePicker

Question

There was a similar question Center Item Inside Horizontal Stack that I followed the Asperi's basic answer that suited for me ( other answer did not worked, too).


struct HeaderTestView: View {
    
    @State private var currentDate = Date()
    
    var body: some View {
        ZStack {
            HStack {
                HStack {
                    Button(action: {
                    }) {
                        Image(systemName: "arrowtriangle.left.fill")
                    }
                }
                Spacer()
                
                HStack {
                    Button(action: {
                    }) {
                        Image(systemName: "arrowtriangle.right.fill")
                    }
                }
            }
            HStack {
                Text("Title")

                DatePicker("Date", selection: $currentDate, displayedComponents: [.date])
            }
        }
    }
}

My Center Item are a Text and a DatePicker, everything works as expected until the date picker is placed. The title of DatePicker is placed on the left and date is placed on the right.

Without the DatePicker

With the DatePicker

Any idea to solve this beautifully so that a Text and a DatePicker are close on the center while there are two HStacks that are adjested to on the left and right

As, I understand the DatePicker wants as much as space as possible, adding a `.frame(width:300)` can make the HStack on the center. This is a temprory solution for me, since the size of the title can be change.. — kelalaka, Oct 08 '22 at 19:27

score 2 · Accepted Answer · answered Oct 08 '22 at 22:48

Add .fixedSize() to the HStack containing the Text view and DatePicker:

struct ContentView: View {
    
    @State private var currentDate = Date()
    
    var body: some View {
        ZStack {
            HStack {
                HStack {
                    Button(action: {
                    }) {
                        Image(systemName: "arrowtriangle.left.fill")
                    }
                }
                Spacer()
                
                HStack {
                    Button(action: {
                    }) {
                        Image(systemName: "arrowtriangle.right.fill")
                    }
                }
            }
            HStack {
                Text("Title")
                
                DatePicker("Date", selection: $currentDate, displayedComponents: [.date])
            }
            .fixedSize()  // here
        }
    }
}

or add .fixedSize() to the DatePicker.

Yes, That was what I was looking, thanks. Now, I see that it is for all Views — kelalaka, Oct 08 '22 at 22:55

Centering Item Inside Horizontal Stack with left and right views doesn't work with DatePicker

1 Answers1