SwiftUI实战之Picker弹出式显示进行背景模糊(教程含源码)

本文价值与收获

看完本文后，您将能够作出下面的界面

[email protected]

Jietu20200419-171132.gif

看完本文您将掌握的技能

• 掌握Picker基础使用
• 类似alert的调用模式
• 获取响应数据
• 学会使用ViewModifier
• 学会fileprivate
• 学会使用extention

代码

1、主页面代码

import SwiftUI

struct ContentView: View,Picker_Image_Pro {

    @State var isShow = false
    @State var fruit = "选择水果"
    var body: some View {
        VStack{
            Spacer()
            Button("\(self.fruit)"){
                self.isShow.toggle()
            }
            //为了测试背景模糊
            List{
                ForEach(1..<20){ item in
                    Text("\(item)")
                }
            }
            Spacer()
        }
        //链式调用效果
        .showPicker(isPresented: self.$isShow,delegate: self)
            
    }
    //选择后响应函数
    func pickerSelect(selectItem: String) {
        self.fruit = "选择的水果:"+selectItem
    }
    
}

2、制作个view 扩展

extension View {
    
    func showPicker(isPresented: Binding,delegate:Picker_Image_Pro) -> some View {
        
        self.modifier(PickerVM(isPresented: isPresented,delegate: delegate))

    }

}

3、制作个modifier

struct PickerVM: ViewModifier {
    @Binding var isPresented: Bool
    var delegate:Picker_Image_Pro
    func body(content: Content) -> some View {
        
        ZStack {
            content
            .disabled(self.isPresented)
                               .blur(radius: self.isPresented ? 6 : 0)
            if isPresented {
                Picker_Image(isPresented: self.$isPresented,delegate: self.delegate)
                .zIndex(1)
          
            }
        }
  
    }
    
}