75142913在线留言
【SwiftUI基础篇】1 常用layout(布局)HStack(横向)VStack(垂直)ZStack(叠加)_IOS开发_网络人

【SwiftUI基础篇】1 常用layout(布局)HStack(横向)VStack(垂直)ZStack(叠加)

Kwok 发表于:2021-03-22 14:22:53 点击:12 评论: 0

SwiftUI经常会使用到的布局方法及对其修饰的常见方法。HStack(横向)VStack(垂直)ZStack(叠加)

一、HStack 横向布局视图及LazyHStack

1、HStack 用于水平(horizontal)线上摆放子视图。并直接渲染内部的所有子视图。所以为了效率请在内容较少的时候才使用 HStack。

常用初始化:

init(alignment: VerticalAlignment = .center, spacing: CGFloat? = nil){
//这里返回一个content:View
}

a、参数1:alignment :[.top(顶部对齐)、.center(中部对齐)、.bottom(底部对齐)] 子视图的对齐方式

b、参数:spacing:CGFloat? [nil] 子视图之间的间距

c、参数:content 返回一个View的闭包,用于显示多个子视图

HStack(alignment: .top, spacing: 10) {
     ForEach(1...5, id: .self) {
         Text("子视图" + String($0))
          .layoutPriority(Double($0))//视图优先级,数字越大权限越高
    }
}

.layoutPriority 控制 HStack 中元素的布局优先级。Double值越高的视图会在空间不足的情况下尽量被满足显示。默认优先级为 0

HStack官方解释:与LazyHStack不同的是,它只在你的应用程序需要在屏幕上显示它们时呈现视图,HStack一次呈现所有的视图,不管它们是在屏幕上还是在屏幕外。当你有少量的子视图或者不希望延迟“惰性”版本的呈现行为时,使用常规的HStack。

2、LazyHStack 的用法和 HStack 相同,仅有的区别是它会“惰性初始化”,也就是只有在子视图即将出现在屏幕上的时候,再初始化子视图。

下面是一个横向滚动的视图(重复100次),当用户滚动时HStack子视图才会被创建,当我们有大量渲染的时候请务必使用此项。

ScrollView(.horizontal) {
    LazyHStack(alignment: .top, spacing: 100) {
        ForEach(1...100, id: .self) {
            Text("第" + String($0) + "列")
            .font(.title)
            .border(Color.gray)//加个边框
        }
    }
}

小聪明:经常分不清(HZV)Stack的小伙伴。我使用拼音H为heng横着,Z像2就是2维的,剩下的V就只有竖着了。

二、VStack 垂直布局视力及LazyVStack

与上面的HStack使用方法一样,只是布局的方向发生了变化,相应的对齐方式也有所不同。

1、VStack 用于垂直(Vertical)线上摆放子视图。并立即渲染内部的所有子视图。所以为了效率请在内容较少的时候才使用 VStack。

常用初始化:参考上面的HStack,唯一不同的是对齐方式参数发生了改变alignment:[.leading(左对齐)、.center(中间)、.trailing(右对齐)]

VStack {
    ForEach(1...10, id: .self) {
        Text("子视图" + String($0))
    }
}.frame(maxWidth: 30)//限制一个最大宽度

2、LazyVStack 的用法和 VStack 相同,仅有的区别是它会“惰性初始化” ,即用户滑动子视图在频幕上的时候才渲染。代码示例参考LazyHStack,将ScrollView参数.horizontal改为.vertical(默认)

三、ZStack  2维堆叠子视图

ZStack从下往上覆盖其子视图(代码越前越在底层),并在两个轴上将它们对齐的视图。

常用初始化init:与上面不同的是少了一个spacing间距,因为是重叠的。alignment: [horizontal(水平): . leading, vertical(垂直): . bottom]或者组合参数.bottomLeading

ZStack {
    Color.purple.ignoresSafeArea(.all, edges: .all)//忽略安全区,这里可视为纯紫色的背影
    Rectangle().fill(Color.blue)//画一个矩形铺满安全区
    Circle().fill(Color.orange)//在矩形上面画一个圆
    Text("ZStack").font(.title)//在圆的中间写上字
}

我们常常使用ZStack设置一个背景颜色(渐变色)或者背景图片等,通常配合所有的布局视图使用达到我们想要的效果。

可以用 zIndex 调整 ZStack 中视图的顺序,zIndex 越大的视图会被放在越上面zIndex 可以是负数,如果不标注的话 zIndex 为 0

ZStack {
    Text("ZStack").font(.title).zIndex(2)
    Circle().fill(Color.orange).zIndex(1)
    Rectangle().fill(Color.blue).zIndex(0)
}

可以看到代码顺序不一样但是效果却和上面的视图一样。

四、Spacer() 占据剩余的空间

一种灵活的空间,沿其包含的堆栈布局的长轴展开,如果不包含在堆栈中,则在两个轴上展开,下面的代码会在屏幕4边的中间显示:上、下、左、右。

初始化参数:minLength: CGFloat? = nil 最小长度

ZStack {
    HStack {
        Text("左").font(.largeTitle)
        Spacer()//将会把左右的中间用空白填满
        Text("右").font(.largeTitle)
    }
    VStack {
        Text("上").font(.largeTitle)
        Spacer()//将会把上下的中间用空白填满
        Text("下").font(.largeTitle)
    }
}

Spacer 对 Stack 来说和其他子视图一样,Spacer 上也可以设置 layoutPriority但是这会导致其他视图都消失....

也可以使用.frame修改器控制其大小做微调处理。 

SwiftUI实战:一个简单的天气显示界面:http://www.neter8.com/ios/110.html 对本文知识运用的综合案例。

除非注明,网络人的文章均为原创,转载请以链接形式标明本文地址:http://www.neter8.com/ios/108.html
标签:布局Kwok最后编辑于:2021-04-01 09:01:25
0
感谢打赏!

《【SwiftUI基础篇】1 常用layout(布局)HStack(横向)VStack(垂直)ZStack(叠加)》的网友评论(0)

本站推荐阅读

热门点击文章