携手创作，一起生长！这是我参加「日新方案 8 月更文应战」的第22天，点击查看活动概况。

项目背景

闲来无事，在运用某云音乐听歌的时分发现一个侧滑打开的内页，交互作用还不错。

那么这一章节中，咱们将运用SwiftUI建立一个侧边打开页面交互。

项目建立

首要，创立一个新的SwiftUI项目，命名为SlideOutMenu。

展开&收起，使用SwiftUI搭建一个侧滑展开页面交互

逻辑剖析

首要咱们来剖析下根本的逻辑，一般的侧滑打开方法的交互是，在主页右上角有一个“更多”的按钮，点击按钮时，内页菜单从左往右划出，滑出至离右边20～30的方位中止。

然后主页背景将蒙上一个蒙层，点击蒙层时，侧滑打开的页面从右往左收起。

简单剖析完逻辑后，咱们来完成这个交互。

主页进口

首要，咱们需求在主页建立一个进口，示例：

// 顶部导航进口
private var moreBtnView: some View {
Button(action: {
}) {
Image(systemName: "list.bullet")
.foregroundColor(.black)
}
}

然后，咱们可以运用NavigationView和navigationBarItems创立顶部导航按钮款式，示例：

var body: some View {
NavigationView {
Text("点击左上角侧滑打开")
.padding()
.navigationBarTitle("主页", displayMode: .inline)
.navigationBarItems(leading: moreBtnView)
}
}

展开&收起，使用SwiftUI搭建一个侧滑展开页面交互

如此，主页进口部分咱们就完成了。

左边菜单

接下来，咱们来构建左边菜单的内容。咱们可以沿用之前设计过的“设置”页面的结构，咱们先来构建栏目结构。示例：

// MARK: 栏目结构
struct listItemView: View {
var itemImage: String
var itemName: String
var body: some View {
Button(action: {
}) {
HStack {
Image(systemName: itemImage)
.font(.system(size: 17))
.foregroundColor(.black)
Text(itemName)
.foregroundColor(.black)
.font(.system(size: 17))
Spacer()
Image(systemName: "chevron.forward")
.font(.system(size: 14))
.foregroundColor(.gray)
}.padding(.vertical, 10)
}
}
}

在咱们构建侧滑打开的页面前，咱们需求声明两个变量，一个是侧滑打开的页面的宽度，一个是当前这个页面的方位。示例：

@State var menuWidth = UIScreen.main.bounds.width - 60
@State var offsetX = -UIScreen.main.bounds.width + 60

咱们设置的侧滑打开页面的宽度是屏幕宽度-60，而当前侧滑打开页面的方位是负方位，这样就可以在展示的时分先把页面躲藏起来。

而当咱们点击顶部导航中的“更多”按钮时，将offsetX偏移量X轴坐标设置为0。示例：

// 顶部导航进口
private var moreBtnView: some View {
Button(action: {
withAnimation {
offsetX = 0
}
}) {
Image(systemName: "list.bullet")
.foregroundColor(.black)
}
}

然后，咱们创立一个新视图来构建侧滑打开的页面内容，示例：

// MARK: 左边菜单
struct SlideOutMenu: View {
@Binding var menuWidth: CGFloat
@Binding var offsetX: CGFloat
var body: some View {
Form {
Section {
}
Section {
listItemView(itemImage: "lock", itemName: "账号绑定")
listItemView(itemImage: "gear.circle", itemName: "通用设置")
listItemView(itemImage: "briefcase", itemName: "简历办理")
}
Section {
listItemView(itemImage: "icloud.and.arrow.down", itemName: "版别更新")
listItemView(itemImage: "leaf", itemName: "整理缓存")
listItemView(itemImage: "person", itemName: "关于")
}
}
.padding(.trailing, UIScreen.main.bounds.width - menuWidth)
.edgesIgnoringSafeArea(.all)
.shadow(color: Color.black.opacity(offsetX != 0 ? 0.1 : 0), radius: 5, x: 5, y: 0)
.offset(x: offsetX)
.background(
Color.black.opacity(offsetX == 0 ? 0.5 : 0)
.ignoresSafeArea(.all, edges: .vertical)
.onTapGesture {
withAnimation {
offsetX = -menuWidth
}
})
}
}

上述代码中，咱们也对页面宽度menuWidth、偏移方位offsetX进行了声明，方便之后咱们在ContentView视图中进行双向绑定。

我么运用Form表单和Section阶段构建款式，这点就不说了。

值得说的一点是，咱们设置了在页面打开的时分，也便是offsetX页面偏移量X轴坐标不为0，咱们加了一个暗影，完善了侧滑打开页面的悬浮作用。

然后运用offset调整页面初始方位。背景部分，除了依据offsetX页面偏移量X轴坐标加了一个蒙层，并且当咱们点击的背景的时分，咱们将偏移方位offsetX从头赋值，这样就能完成收起的交互作用。

咱们在ContentView视图中展示侧滑打开视图，示例：

var body: some View {
ZStack {
NavigationView {
Text("点击左上角侧滑打开")
.padding()
.navigationBarTitle("主页", displayMode: .inline)
.navigationBarItems(leading: moreBtnView)
}
SlideOutMenu(menuWidth: $menuWidth, offsetX: $offsetX)
}
}

项目展示

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

快来动手试试吧。

如果本专栏对你有帮助，无妨点赞、谈论、关注～