SwiftUI基础之布局控件Stack和padding

认识HStack、VStack、ZStack

在SwiftUI中的布局更加类似于UIStackView类,也可能当时UIStackView类的出现也是为了后面的SwiftUI所做的实验吧,而在SwiftUI上使用更加方便,也更加全能。

  • HStack:水平方向的布局
  • VStack:垂直方向的布局
  • ZStack:深度方向的布局

使用Stack

HStack

scss 复制代码
HStack {
     Text("TEST1")
        .background(.blue)
     Text("TEST1")
        .background(.red)
     Text("TEST1")
        .background(.yellow)
}.background(.green)

展示如下:

我们可以发现这个是横向布局,并且HStack容器的大小是按照子控件怎么改变呢

sapce
scss 复制代码
HStack(spacing: 0) {
     Text("TEST1")
        .background(.blue)
     Text("TEST1")
        .background(.red)
     Text("TEST1")
        .background(.yellow)
}.background(.green)

这个时候子控件之间就没有间隔了。

alignment

我们看下特殊的例子,也就是子控件高度不一致的情况。

scss 复制代码
HStack(spacing: 0) {
    Text("TEST1 \n ")
        .background(.blue)
    Text("TEST1 \n \n")
        .background(.red)
    Text("TEST1")
        .background(.yellow)
 }.background(.green)

展示如下:

我们会发现子控件都是默认垂直居中的,那么如果要居上或者下的话,就要用alignment参数,alignment是VerticalAlignment类型的,有三个值:

  • top
  • center
  • bottom

那我们测试下top

scss 复制代码
HStack(alignment: .top,spacing: 0) {
    Text("TEST1 \n ")
        .background(.blue)
    Text("TEST1 \n \n")
        .background(.red)
    Text("TEST1")
        .background(.yellow)
 }.background(.green)

这个时候就会居上了:

这就是HStack的简单用法!

VStack

scss 复制代码
VStack {
     Text("TEST1")
        .background(.blue)
     Text("TEST1")
        .background(.red)
     Text("TEST1")
        .background(.yellow)
}.background(.green)

展示如下:

同样也可以用space取出间距,我这边就不做演示了,而alignment是HorizontalAlignment类型的,参数的值也包括3个:

  • leading 居左
  • center 居中
  • trailing 居右

ZStack

scss 复制代码
ZStack() {
    Text("TEST12345 \n \n")
        .background(.blue)
    Text("TEST123 \n")
        .background(.red)
    Text("TEST1")
        .background(.yellow)
}.background(.green)

展示如下:

我们可以看出来,子控件是垂直排列的,并且是居中的,在ZStack里面是没有sapce的,因为垂直方向的间距对我们没有意义。

alignment是Alignment的,我们可以使用枚举,也可以用Alignment的构造方法。

如果用枚举的话,有下面9个值:

  • center 水平和垂直方向都是居中
  • top 垂直方向居上,水平方向居中
  • bottom 垂直方向居下,水平方向居中
  • leading 水平方向居左,垂直方向居中
  • trailing 水平方向居右,垂直方向居中
  • topLeading 水平方向居左,垂直方向居上
  • topTrailing 水平方向居右,垂直方向居上
  • bottomLeading 水平方向居左,垂直方向居下
  • bottomTrailing 水平方向居右,垂直方向居下

如果用构造方法:

less 复制代码
Alignment(horizontal: HorizontalAlignment, vertical: VerticalAlignment)

分别设置水平和垂直方向的布局方式

复合使用

HStack、VStack、ZStack是可以嵌套使用的,如下:

scss 复制代码
VStack{
    HStack {
        Text("水平1")
            .background(.blue)
        Text("水平2")
            .background(.yellow)
        Text("水平3")
            .background(.gray)
     }
     ZStack {
         Text("TEST12345 \n \n")
             .background(.blue)
         Text("TEST123 \n")
             .background(.red)
         Text("TEST1")
             .background(.yellow)
      }.background(.green)
}.background(.pink)

展示如下:

认识padding

这个方法是用来设置内间距,我们可以看到,Stack容与子控件的内边距为0,所以用这个可以设置内边距。

scss 复制代码
HStack {
     Text("TEST1")
        .background(.blue)
     Text("TEST1")
        .background(.red)
     Text("TEST1")
        .background(.yellow)
}
 .padding(.all, 10.0)
 .background(.green)

展示如下:

这个padding不仅可以用在Stack上,还可以用在所有控件上,那么,我们用在Text上试试。

scss 复制代码
HStack {
     Text("TEST1")
        .padding(.all,10)
        .background(.blue)
     Text("TEST1")
        .padding(.all,10)
        .background(.red)
     Text("TEST1")
        .padding(.all,10)
        .background(.yellow)
}
 .padding(.all, 10.0)
 .background(.green)

可以发现Text都有了内边距

padding的方向和大小

padding不仅可以设置四个方向,也可以单独设置某一个方向,或某几个方向。

使用枚举:

  • all 所有方向
  • top 上
  • bottom 下
  • leading 左
  • trailing 右
  • horizontal 水平方向
  • vertical 垂直方向

使用构造方法:

less 复制代码
EdgeInsets(top: CGFloat, leading: CGFloat, bottom: CGFloat, trailing: CGFloat)

我们使用构造方法试下:

scss 复制代码
HStack {
     Text("TEST1")
        .background(.blue)
     Text("TEST1")
        .background(.red)
     Text("TEST1")
        .background(.yellow)
}
 .padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 10))
 .background(.green)

展示如下:

相关推荐
Frank学习路上4 小时前
【IOS】XCode创建firstapp并运行(成为IOS开发者)
开发语言·学习·ios·cocoa·xcode
瓜子三百克10 小时前
CALayer的异步处理
macos·ios·cocoa
吴Wu涛涛涛涛涛Tao11 小时前
一步到位:用 Very Good CLI × Bloc × go_router 打好 Flutter 工程地基
flutter·ios
杂雾无尘13 小时前
开发者必看:如何在 iOS 应用中完美实现动态自定义字体!
ios·swift·apple
kymjs张涛15 小时前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
与火星的孩子对话1 天前
Unity进阶课程【六】Android、ios、Pad 终端设备打包局域网IP调试、USB调试、性能检测、控制台打印日志等、C#
android·unity·ios·c#·ip
恋猫de小郭2 天前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
点金石游戏出海2 天前
每周资讯 | Krafton斥资750亿日元收购日本动画公司ADK;《崩坏:星穹铁道》新版本首日登顶iOS畅销榜
游戏·ios·业界资讯·apple·崩坏星穹铁道
旷世奇才李先生3 天前
Swift 安装使用教程
开发语言·ios·swift
90后的晨仔3 天前
Xcode16报错: SDK does not contain 'libarclite' at the path '/Applicati
ios