如何切换DatePicker可见性并保持对齐与间距一致

我在HStack中放置了一个Button和一个DatePicker，通过按钮切换选择器的可见性：

• 当DatePicker可见时，Button标签设置为.iconOnly样式
• 当DatePicker隐藏时，Button标签显示标题和图标

目前的问题是按钮的图标和标题会出现位置跳动，我希望Button的标签标题与DatePicker的标签处于同一位置。

我已在代码中添加GeometryReader和.border来调试位置，但仍未理清问题所在。

HStack {
    Button {
        withAnimation {
            hasStartDate.toggle()
            if !hasStartDate {
                startDate = nil // Reset the date
            }
        }
    } label: {
        if hasStartDate {
            // Icon-only button for "remove start date"
            Label {
                Text("Remove Start Date")
            } icon: {
                Image(systemName: "minus.circle.fill")
                    .renderingMode(.original)
                    .foregroundColor(.red) // Tint for remove action
                    .imageScale(.medium)
            }
            .labelStyle(.iconOnly)
        } else {
            // Icon and text for "add start date"
            Label {
                Text("Add Start Date")
                    .foregroundColor(.primary)
            } icon: {
                Image(systemName: "plus.circle.fill")
                    .renderingMode(.original)
                    .foregroundColor(.green) // Tint for add action
                    .imageScale(.medium)
            }
        }
    }
    .buttonStyle(.plain)
    // Debug control  position
    .background(
        GeometryReader { geo in
            Color.clear
                .onAppear {
                    print("Button frame: \(geo.frame(in: .local))")
                }
                .onChange(of: hasStartDate) {
                    print("Button frame: \(geo.frame(in: .local))")
                }
        }
    )
    .border(.red, width: 1)
    // End debug control position

    if hasStartDate {
        DatePicker(
            "Start Date",
            selection: Binding(
                get: { startDate ?? Date() },
                set: { startDate = $0 }
            ),
            displayedComponents: .date
        )
        .datePickerStyle(.compact)
        // Debug control position
        .background(
            GeometryReader { geo in
                Color.clear
                    .onAppear {
                        print("DatePicker frame: \(geo.frame(in: .local))")
                    }
                    .onChange(of: hasStartDate) {
                        print("DatePicker frame: \(geo.frame(in: .local))")
                    }
            }
        )
        .border(.green, width: 1)
        // End debug control position
    }
}
// Debug control position
.background(
    GeometryReader { geo in
        Color.clear
            .onChange(of: hasStartDate) {
                let buttonFrame = geo.frame(in: .local)
                let datePickerFrame = geo.frame(in: .local)
                let spacing = datePickerFrame.minX - buttonFrame.maxX
                print("HStack total frame: \(geo.frame(in: .local))")
                print("Calculated spacing: \(spacing)")
            }
    }
)
.border(.blue, width: 1)
// End debug control position

编辑补充：为DatePicker添加.padding(.leading)后，其标签与Button的标签对齐，“Add Start Date”和“Start Date”在切换时处于同一位置，但按钮的仅图标状态仍会向左偏移。

内容的提问来源于stack exchange，提问作者0x1801ce