日期选择按钮 / Swiftui

Question

我已经创建了一个日期选择器，但不知道如何将按钮放在它下面。 你能帮我吗？ 我正在学习新的SwiftUI。 我附上了样例设计图片。 我想要和图片中一样的效果。

@State private var zaman = Date()
@State private var tarihGorun = false
@State private var tarih = "Tarih Seçiniz"

---

   DatePicker("",selection: $zaman,displayedComponents: .date).labelsHidden()
            
            .accentColor(.white)
             .frame(width: 300, height: 50, alignment: .center)
            .font(Font.system(size: 25, design: .default))
             .padding(5)
             .font(Font.system(size: 15, weight: .medium, design: .serif))
             .overlay(
                 RoundedRectangle(cornerRadius: 30)
                     .stroke(Color(red: 45 / 255, green: 0 / 255, blue: 112 / 255), lineWidth: 1))
            .onTapGesture {
                self.tarihGorun = true
            }
        
        if tarihGorun {
            
            
            
            HStack{
                Button(action:{
                    
                    let zamanFormatter = DateFormatter()
                    zamanFormatter.dateFormat = "MM/dd/yyyy"
                    let alinanTarih = zamanFormatter.string(from: self.zaman)
                    self.tarih = alinanTarih
                    self.tarihGorun = false
                }){
                    Text("Tarih Seç")
                }
                
                Button(action:{
                     self.tarihGorun = false
                }){
                    Text("Kapat").foregroundColor(Color.red)
                }
            }
            
        }

- metaflor22

Answer 1

这是你本周第三次发布相同的问题，请不要重新发布问题。这是图像的示例，它只是一个带有下方按钮的普通DatePicker()。

import SwiftUI


struct FirstView: View {
    
    @State var showDatePicker: Bool = false
    @State var savedDate: Date? = nil
    
    var body: some View {
        ZStack {
            HStack {
                Text("Selected date: ")
                Button(action: {
                    showDatePicker.toggle()
                }, label: {
                    Text(savedDate?.description ?? "SELECT DATE")
                })
            }
            

            if showDatePicker {
                DatePickerWithButtons(showDatePicker: $showDatePicker, savedDate: $savedDate, selectedDate: savedDate ?? Date())
                    .animation(.linear)
                    .transition(.opacity)
            }
        }
        
    }
}

struct DatePickerWithButtons: View {
    
    @Binding var showDatePicker: Bool
    @Binding var savedDate: Date?
    @State var selectedDate: Date = Date()
    
    var body: some View {
        ZStack {
            
            Color.black.opacity(0.3)
                .edgesIgnoringSafeArea(.all)
            
            
            VStack {
                DatePicker("Test", selection: $selectedDate, displayedComponents: [.date])
                    .datePickerStyle(GraphicalDatePickerStyle())
                
                Divider()
                HStack {
                    
                    Button(action: {
                        showDatePicker = false
                    }, label: {
                        Text("Cancel")
                    })
                    
                    Spacer()
                    
                    Button(action: {
                        savedDate = selectedDate
                        showDatePicker = false
                    }, label: {
                        Text("Save".uppercased())
                            .bold()
                    })
                    
                }
                .padding(.horizontal)

            }
            .padding()
            .background(
                Color.white
                    .cornerRadius(30)
            )

            
        }

    }
}



struct DatePickerWithButtons_Previews: PreviewProvider {
    static var previews: some View {
        FirstView()
    }
}

- nicksarno

---

谢谢，它起作用了。你知道如何制作日期格式吗？你也能帮忙吗？@nicksarno - metaflor22

请查看 https://dev59.com/y1sV5IYBdhLWcg3w2h_R。 - nicksarno

@nicksarno，你的视频很棒！它们非常有用。 - niks