Question

我有快速倡议的观点,提出了若干<代码>。 GridRows in a Grid. 每一行各有2栏,左栏为统一,右栏为左栏。每一行都有标题(左栏)和数据领域(右栏)。

<代码>Text Fields和Pickers按我的期望行事,与栏左侧一致。但<代码>DatePicker将只与其栏右侧一致。

我曾尝试过:

Placing a Spacer() after the DatePicker
Putting the DatePicker inside VStack(alignment: .leading) within its GridRow

任何人都知道如何将日期推向左边的其他牢房?

如下:

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

By inspecting the UI hierarchy, SwiftUI seems to put the date picker inside an HStack, consisting of the label (showing an empty string in your case), a Spacer, and a UIViewRepresentable representing a UIDatePicker.

(Red is the HStack, Blue is the Spacer , Black is the UIViewRepresentable Packping a UIDatePicker. 标签表明,“也看不到”。

使整个“expand”横向化,将日期推向正确。

仅添加https://developer.apple.com/documentation/swiftui/datepicker” rel=“nofollow noreferer”>。


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

如今, 升幅不大,但注意到仍然有节奏:

这就是“条码”的缺省。 HStack在标签和日期选择之间添加。如果你也想删除,你也可以利用以下事实:,即“标签内容”(但不能确保这一点得到保证),并适用你自己的<代码>。

DatePicker("", selection: $date, displayedComponents: .date)
    .labeledContentStyle(ContentOnlyStyle())

// this removes the label, and only shows the content (in this case, the date picker)
struct ContentOnlyStyle: LabeledContentStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.content
    }
}

现在,你甚至不需要<代码>固定。

友情链接