在网格内对齐日期选择器

Question

我有一个 SwiftUI 视图，在

GridRows

中呈现多个

Grid

。每行有 2 列，左列右对齐，右列左对齐。每行包含一个标题（左列）和数据字段（右列）。

TextFields

和

Pickers

的行为符合我的预期，与列的左侧对齐。但

DatePicker

只会与其列的右侧对齐。

我尝试过但不起作用的事情：

• 在

  Spacer()

   之后放置 

  DatePicker
• 将

  DatePicker

  放入

  VStack(alignment: .leading)

  的

  GridRow

中

有人知道如何移动 DatePicker 以与左侧的其余行对齐吗？

下面是一个视图来说明

import SwiftUI

struct ContentView: View {
    
    @State var name = ""
    @State var date = Date()
    @State var house = Int()
    
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack(alignment: .leading) {
                    Grid(alignment: .leading) {
                        GridRow {
                            Text("Name \(Image(systemName: "person")):")
                                .font(.headline)
                                .gridColumnAlignment(.trailing)
                            TextField("Full name", text: $name)
                                .font(.body)
                                .padding(.horizontal, 10)
                                .padding(.vertical, 5)
                                .background(Color(UIColor.systemBackground))
                                .cornerRadius(8)
                                .gridColumnAlignment(.leading)
                        }
                        GridRow {
                            Text("Birthdate \(Image(systemName: "calendar")):")
                                .font(.headline)
                            DatePicker("", selection: $date, displayedComponents: .date)
                        }
                        GridRow {
                            Text("House \(Image(systemName: "house")):")
                                .font(.headline)
                            Picker("", selection: $house) {
                                Text("Gryffindor").tag(1)
                                Text("Slytherin").tag(2)
                                Text("Ravenclaw").tag(3)
                                Text("Hufflepuff").tag(4)
                            }
                        }
                    }
                }
                .padding(10)
                .background(RoundedRectangle(cornerRadius: 10)
                    .fill(Color.gray
                        .gradient
                        .opacity(0.15)))
            }
            .padding(.horizontal)
            .navigationTitle("Add Wizard Info")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

Answer 1

通过检查 UI 层次结构，SwiftUI 似乎将日期选择器放在

HStack

中，由标签、

Spacer

和代表

UIViewRepresentable

的

UIDatePicker

组成。

Spacer

使整个东西水平“扩展”，将日期选择器推到右侧。

只需将

.fixedSize()

添加到

DatePicker

中，使其达到理想大小。

DatePicker("", selection: $date, displayedComponents: .date)
    .fixedSize()