釋出&選擇釋出，使用SwiftUI搭建一個新建釋出彈窗（下）

語言: CN / TW / HK
時間 2022-10-10 18:15:25

theme: smartblue

攜手創作，共同成長！這是我參與「掘金日新計劃 · 8 月更文挑戰」的第24天，點選檢視活動詳情。

承接上一章節的內容，在上一章節中，我們完成了“新建釋出”的入口和背景蒙層的搭建，那麼本章來進入重點，我們來完成彈窗的互動。

樣式預覽

1.png

彈窗檢視

我們來分析下“新建釋出”彈窗的內容，它包括一個提示的下拉條，一排橫向佈局的釋出功能按鈕，一個關閉彈窗的按鈕。

我們構建一個新的檢視，示例：

``` // 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檢視中組合樣式檢視內容，示例：

``` // MARK: 底部彈窗 struct SlideOutMenu: View {     @Binding var showMaskView: Bool

var body: some View {          VStack {

Spacer()

//構建彈窗檢視元素             VStack {                 // 下拉條                 pullDownBtnView()

Spacer()

// 操作按鈕                 HStack(spacing: 20) {                     operateBtnView(image: "magazine.fill", text: "寫文章")                     operateBtnView(image: "doc.plaintext.fill", text: "發沸點")                     operateBtnView(image: "book.fill", text: "提問題")                     operateBtnView(image: "paperplane.fill", text: "傳資源")                 }

Spacer()

// 關閉按鈕                 colseBtnView()             }             .padding()             .frame(maxWidth: .infinity, maxHeight: 320)             .background(Color.white)             .cornerRadius(10, antialiased: true)         }.edgesIgnoringSafeArea(.bottom)         } } ```

2.png

互動動畫

彈出關閉

完成了彈窗檢視後，我們回到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動畫加了一個從下向上展示的過渡動畫。

3.gif

向下拖動關閉

新建釋出彈窗除了常規的點選關閉按鈕關閉彈窗外，點選彈窗向下拖動時關閉彈窗，要實現這個功能，我們回到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)         } } ```

上述程式碼中，我們給彈窗內容加了offset偏移量修飾符，拖動時，如果isAllowToDrag允許拖動，則拖動位置為offsetY.height偏移的Y軸位置，否則就是0。

然後使用gesture手勢修飾符，使用DragGesture拖動手勢，當onChanged拖動改變時，先判斷是不是向下拖動，如果是則啟用isAllowToDrag變數，然後拖動後讓檢視回到原來的位置。

當彈窗檢視onEnded拖動結束時，判斷拖動的Y軸的位置offsetY.height是不是大於100，也就是彈窗寬度的大約1/3的位置，如果時則修改showMaskView變數關閉彈窗。

專案預覽

完成全部後，我們整體預覽下效果。

4.gif

恭喜你，完成了本章的全部內容！

快來動手試試吧。

如果本專欄對你有幫助，不妨點贊、評論、關注～

「其他文章」
「」
「」