发布&选择发布，使用SwiftUI搭建一个新建发布弹窗（下）

2023-11-03 63

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 发布&选择发布，使用SwiftUI搭建一个新建发布弹窗（下）

发布&选择发布，使用SwiftUI搭建一个新建发布弹窗（下）

样式预览

弹窗视图

我们来分析下“新建发布”弹窗的内容，它包括一个提示的下拉条，一排横向布局的发布功能按钮，一个关闭弹窗的按钮。

我们构建一个新的视图，示例：

// MARK: 底部弹窗
struct SlideOutMenu: View {
    @Binding var showMaskView: Bool
    var body: some View {
         VStack {
            Spacer()
            //构建弹窗视图元素
        }    
    }
}

上述代码中，我们创建了一个新视图SlideOutMenu。以及还使用@Binding声明了一个变量，方便我们在ContentView视图中做双向绑定。由于弹窗在底部，我们使用VStack纵向布局，然后使用Spacer将弹窗撑开到底部。

完成后，我们来完成弹窗的样式部分。

下拉条

我们一块一块内容完成它，首先是下拉条，示例：

// 下拉条
func pullDownBtnView() -> some View {
    Rectangle()
        .foregroundColor(Color(.systemGray4))
        .cornerRadius(30)
        .frame(width: 50, height: 5)
}

上述代码中，我们构建了一个Rectangle矩形，并赋予了颜色systemGray4灰色和圆角，尺寸我们使用规定的长宽。

发布功能按钮

发布功能按钮部分，由于具备相同的样式，我们可以使用结构体的方式构建基础样式，再在视图中调用，也可以使用创建视图的方法构建基础样式再调用。两种方法都可以使用，示例：

// 操作功能
func operateBtnView(image: String, text: String) -> some View {
    Button(action: {
        self.showMaskView = false
    }) {
        VStack(spacing: 15) {
            Image(systemName: image)
                .font(.system(size: 30))
                .foregroundColor(.black)
                .frame(width: 80, height: 80)
                .background(Color(.systemGray6))
                .cornerRadius(8)
            Text(text)
                .font(.system(size: 17))
                .foregroundColor(.black)
        }
    }
}

上述代码中，我们构建了一个框架视图operateBtnView，传入两个String类型的变量image、text，分别代表操作按钮中的图标图片和操作按钮名称。

当我们点击按钮的时候，切换showMaskView状态关闭蒙层。

关闭按钮

关闭按钮样式也比较简单，我们依旧单独构建样式部分，示例：

// 关闭按钮
func colseBtnView() -> some View {
    Button(action: {
        self.showMaskView = false
    }) {
        Image(systemName: "xmark")
            .font(.system(size: 24))
            .foregroundColor(.gray)
            .padding(.bottom, 20)
    }
}

上述代码中，我们单独构建按样式视图colseBtnView。当我们点击关闭按钮的时候，也调用切换showMaskView状态关闭蒙层。

样式组合

完成上述3个视图后，我们在SlideOutMenu视图中组合样式视图内容，示例：

交互动画

弹出关闭

完成了弹窗视图后，我们回到ContentView视图中，将弹窗视图附上，示例：

var body: some View {
    ZStack {
        VStack {
            topBarMenu()
            Spacer()
        }
        if showMaskView {
            MaskView(showMaskView: $showMaskView)
            SlideOutMenu(showMaskView: $showMaskView)
                    .transition(.move(edge: .bottom))
                    .animation(.interpolatingSpring(stiffness: 200.0, damping: 25.0, initialVelocity: 10.0))
        }
    }
}

上述代码中，我们根据showMaskView变量状态决定是否展示背景蒙层视图和弹窗视图，然后在展示SlideOutMenu新建发布弹窗时，使用transition过渡和animation动画加了一个从下向上展示的过渡动画。

向下拖动关闭

新建发布弹窗除了常规的点击关闭按钮关闭弹窗外，点击弹窗向下拖动时关闭弹窗，要实现这个功能，我们回到SlideOutMenu弹窗视图中，首要声明2个变量，示例：

@State private var offsetY = CGSize.zero
@State var isAllowToDrag: Bool = false

上述代码中，offsetY变量存储拖动时弹窗Y轴的位置，用来判断用户在向上拖动还是向下拖动，也为了确定向下拖动Y轴到某一位置的，触发关闭弹窗交互。

变量isAllowToDrag是承接offsetY变量，当我们判断向上拖动时，禁用弹窗拖动，防止弹窗向上拖动，保证只能向下拖动。

然后在SlideOutMenu主要内容中使用拖动修饰符，示例：

// MARK: 底部弹窗
struct SlideOutMenu: View {
    @Binding var showMaskView: Bool
    var body: some View {
         VStack {
            //隐藏了弹窗视图代码
            }
            .padding()
            .frame(maxWidth: .infinity, maxHeight: 320)
            .background(Color.white)
            .cornerRadius(10, antialiased: true)
            .offset(y: isAllowToDrag ? offsetY.height : 0)
            .gesture(
                DragGesture()
                    .onChanged { gesture in
                        // 如果向下拖动
                        if gesture.translation.height > 0 {
                            self.isAllowToDrag = true
                            self.offsetY = gesture.translation
                        }
                    }
                    .onEnded { _ in
                        // 如果拖动位置大于100
                        if (self.offsetY.height) > 100 {
                            self.showMaskView = false
                        } else {
                            self.offsetY = .zero
                        }
                    }
            )
        }.edgesIgnoringSafeArea(.bottom)    
    }
}