在一個部分內居中 DatePicker

Question

你好！ 我試圖將DatePicker居中在 SwiftUI 的Section內。 屏幕截圖顯示當前顯示和所需顯示。

我嘗試了以下方法，但似乎不起作用：

• 將 DatePicker 放在 VStack 中，以.alignment 為中心，
• using.frame(alignment: .center) 在該部分上，
• 並嘗試將中心裝飾器放置到 DatePicker 本身。

第一個 2^ 將部分內的文本居中，但不是屏幕上實際的 DatePicker object 本身。

關於如何做到這一點的解釋，以及對未來此類情況的了解將非常有幫助。 謝謝！

        NavigationView {
        Form {
            Section {
                VStack(alignment: .center) {
                    
                DatePicker("Please enter a time", selection: $wakeUpTime, displayedComponents: .hourAndMinute)
                    .labelsHidden()
                }
            } header: {
                Text("When do you want to wake up?")
                    .font(.headline)
            }
            .frame(alignment: .center)
            

        .navigationTitle("BetterRest")
        .toolbar {
            Button("Calculate", action: calculateBedtime)
        }

Answer 1

您可以使用帶有兩個Spacer的HStack在 SwiftUI 中完成此 output。

NavigationView {
    Form {
        Section {
            HStack{ //Convert to HStack
                Spacer() //add this
                DatePicker("Please enter a time", selection: $wakeUpTime, displayedComponents: .hourAndMinute)
                    .labelsHidden()
                Spacer() // add this
            }
        } header: {
            Text("When do you want to wake up?")
                .font(.headline)
        }
        .frame(alignment: .center)
        .navigationTitle("BetterRest")
        .toolbar {
            Button("Calculate", action: calculateBedtime)
        }
    }
}

Output：

Answer 2

試試下面的代碼：

  var body: some View {
    NavigationView {
        Form {
            Section {
                DatePicker("Please enter a time",
                           selection: $wakeUpTime,
                           displayedComponents: .hourAndMinute)
            } header: {
                Text("When do you want to wake up?")
                    .font(.headline)
            }
            .frame(alignment: .center)
            .navigationTitle("BetterRest")
            .toolbar {
                Button("Calculate") {
                    print("Calculate")
                }
            }
        }
    }
  }