SwiftUI之侧边栏菜单实践
我们采用Stack对应的VStack HStack ZStack来组合完成一个侧边菜单
预备知识
UI控件
VStack
HStack
ZStack
VSstack是按照从上到下按照出现次选依次排列
HStack按照从UI添加顺序从左到右的出现依次排列
ZStack这是按照图层的关系假如VH是水平坐标系，那么Z可认为垂直屏幕的坐标系，依次堆叠后添加的总是显示最外层
@State @Binding
@State 用于View的内部局部或者私有的属性变动，因此最好是设置为私有的
@Binding 用于subviews或者复用的组件中向向下级传递关联数据
层次关系分析
代码拆分
1 主工程
structHomeView: View {
@State var show :Bool = true
var body: some View {
ZStack(alignment: Alignment.topLeading, content: {
MenuView(show: $show)
LeftTopMenu(show:$show)
RightTopMenu(show:$show)
})
}
}2 顶部左右两侧按钮
structLeftTopMenu: View {
@Binding varshow:Bool
var body: some View {
HStack(alignment: .center, spacing: 20) {
ZStack(alignment: Alignment.topLeading, content: {
Button(action: { self.show.toggle()
}) {
Text(self.show ? "Close":"Open").frame(minWidth:0,maxWidth: .infinity)
}
}).frame(width: 85, height: 44)
Spacer()
}
}
}
structRightTopMenu : View {
@Binding varshow:Bool
var body: some View {
HStack(alignment: VerticalAlignment.center, spacing: 20) {
Spacer()
ZStack(alignment: Alignment.topTrailing, content: {
Button(action: { self.show.toggle()
}) {
Text("Right Menu").frame(minWidth:0,maxWidth: .infinity)
}
}).frame(width: 100, height: 44)
}
}
}3 侧边菜单
structMenuView :View {
var menu = menuData
@Bindingvarshow:Bool
var body: some View{
VStack(alignment: HorizontalAlignment.leading,spacing: 20){
ForEach(menu){
item in
MenuRow(image: item.icon, text: item.title)
}
Spacer()
}.padding(20)
.frame(minWidth:0,maxWidth: .infinity)
.background(Color.white)
.cornerRadius(30)
.padding(.trailing, 60)
.padding(.top,30)
.shadow(radius: 20)
.animation(Animation.easeInOut)
.offset(x: show ? 0 : -UIScreen.main.bounds.width)
.onTapGesture {
self.show.toggle()
}
}
}本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-10-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读