SwiftUI 零基础教程之ZStack如何顶对齐

知识大胖

于 2020-02-28 19:29:37 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/iCloudEnd/article/details/104570468

版权

有时我们需要让ZStack内的视图实现顶对齐，该如何实现呢

Jietu20200228-192713.gif

看完本文您将掌握的技能

了解ZStack布局
实现顶对齐
导航条设置按钮
ZStack如何排序

代码

import SwiftUI

struct MRFilter: View {
    var body: some View {
        VStack{
            Spacer()
            HStack{
                Button("按照朝代"){}
                Button("按照朝代"){}
                Button("按照朝代"){}
            }
        }
        .frame(height:200)
        .background(Color.orange)
    }
}
struct ContentView: View {
    @State var showFilter = false
    var body: some View {
        NavigationView{
            ZStack(alignment:.top){
                VStack{
                    Spacer()
                    Text("过滤效果")
                    Spacer()
                }
                .background(Color.purple)
                if self.showFilter {
                    MRFilter()
                    .zIndex(1)
                }
                
            }
            .navigationBarTitle(Text("诗人名人"))
            .navigationBarItems(trailing: Button("筛选"){
                self.showFilter.toggle()
            })
            
        }
    }
}