【问题标题】:SwiftUI ActionSheet PickerSwiftUI 操作表选择器
【发布时间】:2020-02-02 18:07:57
【问题描述】:

我正在尝试在 SwiftUI 中创建一个在按下按钮后出现的操作表,并允许用户通过选择器选择并返回项目(例如 https://imgur.com/a/IbS7swX)。

有什么提示吗?

谢谢

【问题讨论】:

    标签: swiftui picker swiftui-actionsheet


    【解决方案1】:
    struct ContentView: View {
      init() {
        UITableView.appearance().separatorColor = .clear
       }
    var inputArray = ["100","101","102"]
    @State var slectedSegmant = "ActionSheet"
    @State var slectedObj = "101"
    @State var enableSheet = false
    var test = false
    var body: some View {
        ZStack {
            VStack(spacing: 10) {
                Picker(selection: $slectedSegmant, label: Text("Segment")) {
                    Text("Alert").tag("Alert")
                    Text("ActionSheet").tag("ActionSheet")
                }.pickerStyle(SegmentedPickerStyle())
                    .labelsHidden()
                    .padding(EdgeInsets.init(top: 50, leading: 10, bottom: 0, trailing: 10))
    
                Text("Alert & Pickers")
                    .font(Font.system(size: 35, design: .rounded))
                    .fontWeight(.bold)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(.horizontal)
    
                List((0...50),id: \.self) { input in
                    ZStack {
                        HStack(spacing: 10) {
                            Image(systemName: "book")
                                .font(.title)
                                .padding(.leading, 10)
                            VStack(alignment: .leading, spacing: 5, content: {
                                Text("Simple")
                                Text("3 different buttons")
                            })
                            Spacer()
                        }.padding(.vertical)
                            .frame(maxWidth:.infinity)
                            .background(RoundedRectangle(cornerRadius: 10).foregroundColor(Color.white).shadow(radius: 1.5)
                            )
    
                        Button(action: {
                            self.enableSheet = true
                        }) {
                            Text("")
                        }
                    }
                }.padding()
            }.blur(radius: $enableSheet.wrappedValue ? 1 : 0)
                .overlay(
                    $enableSheet.wrappedValue ? Color.black.opacity(0.6) : nil
                )
           if $enableSheet.wrappedValue {
                GeometryReader { gr in
                    VStack {
                        VStack {
                            Text("PickerView")
                                .font(.headline)
                                .foregroundColor(.gray)
                                .padding(.top, 10)
                            Text("Prefered ContentHeight")
                                .padding(.top, 5)
                            Picker("test", selection: self.$slectedObj) {
                                Text("100").id("100")
                                Text("101").id("101")
                                Text("101").id("102")
                            }.labelsHidden()
                        }.background(RoundedRectangle(cornerRadius: 10)
                            .foregroundColor(Color.white).shadow(radius: 1))
                        VStack {
                            Button(action: {
                                debugPrint("Done Selected")
                                self.enableSheet = false
                            }) {
                                Text("Done").fontWeight(Font.Weight.bold)
                            }.padding()
                                .frame(maxWidth: gr.size.width  - 90)
                                .background(RoundedRectangle(cornerRadius: 10)
                                .foregroundColor(Color.white).shadow(radius: 1))
    
                        }
                    }.position(x: gr.size.width / 2 ,y: gr.size.height - 200)
                }
            }
        }.edgesIgnoringSafeArea(.all)
      }
     }
    

    输出

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-11-17
      • 2019-11-13
      • 2020-12-11
      相关资源
      最近更新 更多