弹出视图可推送当前视图SwiftUI

时间:2020-07-07 18:31:45

标签: ios swiftui

我正在尝试重用here中的某些设计,但是我无法将其放在屏幕中央,而是将视图推到顶部。我如何在不按视图的情况下显示这样的弹出窗口,只需将其放在视图顶部即可。是否应该使用警报?怎么样?

enter image description here

import SwiftUI

struct DatePicker: View {
    
    @State var hours: Int = 0
    @State var minutes: Int = 0
    @State private var newEatenMealTime = Date()
    @State private var showingNewMealTime = false
    
    var body: some View {
       
        VStack {
            Button(action: {
                self.showingNewMealTime = true
            }) {
                Text("Click me")
            }
            
            if $showingNewMealTime.wrappedValue {
                VStack(alignment: .center) {
                    ZStack{
                        Color.black.opacity(0.4)
                            .edgesIgnoringSafeArea(.vertical)
                        // this one is it
                        VStack(spacing: 20) {
                            Text("Time between meals")
                                .bold().padding()
                                .frame(maxWidth: .infinity)
                                .background(Color.yellow)
                                .foregroundColor(Color.white)

                            HStack {
                                Spacer()
                                VStack {
                                    Picker("", selection: $hours){
                                        ForEach(0..<4, id: \.self) { i in
                                            Text("\(i) hours").tag(i)
                                        }
                                    }
                                    .frame(width: 150, height: 120)
                                    .clipped()
                                }

                                VStack {
                                    Picker("", selection: $minutes){
                                        ForEach(0..<60, id: \.self) { i in
                                            Text("\(i) min").tag(i)
                                        }
                                    }
                                    .frame(width: 150, height: 120)
                                    .clipped()
                                }
                            }

                            Spacer()

                            Button(action: {
                                self.showingNewMealTime = false
                            }){
                                Text("Close")
                            } .padding()
                        }
                        .frame(width:300, height: 300)
                        .background(Color.white)
                        .mask(RoundedRectangle(cornerRadius: 20))
                        .shadow(radius: 20)
                    }
                }
            }
        }
        
        
        
        
        
        
    }
}

struct DatePicker_Previews: PreviewProvider {
    static var previews: some View {
        DatePicker()
    }
}

如果您在顶部看到,则不要单击我,单击我是在屏幕中央,一旦弹出窗口出现,它就会被推送。

1 个答案:

答案 0 :(得分:1)

只需使用ZStack而不是VStack。使用Xcode 11.4 / iOS 13.4进行了测试

var body: some View {

    ZStack {                // << here
        Button(action: {