当前位置: 首页 > article >正文

SwiftUI中Stack、Spacer与Divider的使用

        在SwiftUI中,Stack、Spacer和Divider是用于布局和界面设计的重要组件。
        Stack是一种容器视图,可以将多个子视图垂直或水平地堆叠在一起。通过指定Stack的主轴方向(Axis),你可以控制子视图的排列方式。例如,HStack表示水平方向的Stack,而VStack表示垂直方向的Stack。在Stack中,你可以添加多个子视图,并且这些子视图会按照Stack的布局规则进行排列。
        Spacer是Stack中的一个特殊视图,它用于在Stack的主轴方向上占用额外的空间。在HStack中,Spacer会水平扩展,而在VStack中,Spacer会垂直扩展。通过添加Spacer,你可以控制子视图在Stack中的对齐方式和间距。例如,在HStack中,如果你在右侧添加了一个Spacer,那么左侧的子视图将会左对齐;如果你在左侧添加了一个Spacer,那么右侧的子视图将会右对齐。
        Divider是一条分隔线,通常用于在Stack中的子视图之间添加可视的分隔。Divider不会占用额外的空间,而只是简单地绘制一条分隔线。你可以通过在Stack中添加Divider来分隔不同的子视图,以提高界面的可读性和组织性。
下面是一个简单的示例代码,展示了如何使用Stack、Spacer和Divider来构建界面:

垂直方向排列:VStack()

struct ContentView: View {var body: some View {VStack {Text("Top").background(Color.red)Spacer()Text("Middle").background(Color.blue)Divider()Text("Bottom").background(Color.green)}.padding()}
}


在上面的代码中,我们创建了一个垂直方向的Stack(VStack),并在其中添加了三个Text视图和一个Divider。通过在Text视图之间添加Spacer和Divider,我们控制了子视图在Stack中的对齐方式和间距。在这个例子中,"Top"文本将位于Stack的顶部,"Middle"文本将位于"Top"文本的下方,并且与"Top"文本之间有一定的间距。"Bottom"文本将位于"Middle"文本的下方,并且与"Middle"文本之间有一条分隔线。

水平方向排列:HStack()

堆叠排列:ZStack()

VStack()、HStack()、ZStack()在括号里还可以添加对齐方式(alignment:)、间距(spacing:)等属性。

.padding() 是给组件添加一个内边距。

http://www.lryc.cn/news/2420320.html

相关文章:

  • PL/SQL 数据类型与基本输出
  • 转载:DSN服务器学习
  • 基于laser的Google---cartographer建图测试总结(实测可行)
  • tpl模板引擎和使用
  • 手把手教你爬取天堂网1920*1080大图片(批量下载)
  • Unity动画☀️六、Humanoid和Generic的区别、导入方式(骨骼映射、Avatar创建)
  • 因子(Number_Of_Factors)
  • 再生龙clonezilla安装新设备全过程
  • 【Haskell】一个没有循环的世界
  • 目标检测之空间变形网络(STN)
  • 什么是ISO(国际标准化组织)?
  • 简单介绍了解白鹭引擎Egret
  • CSharp编程语言
  • 如何在linux系统下安装QQ
  • 【MySQL管理】:用户User和权限Privileges
  • Oracle Rac 介绍
  • HTML基础-06-表格(表<table> ,行 <tr>,列 <tb>,表头 <th>,跨列colspan,跨行rowspan,单元格边距 cellpadding,单元格间距cellspacing)
  • 了解XXS攻击---安全测试需了解的内容之一
  • 软件编程学习网站汇总——持续更新中
  • 内网渗透测试:活动目录 Active Directory 的查询
  • 智能小车——循迹模块、避障模块使用介绍
  • 学会重构与对比 ——码农鼻祖天才香农
  • JVM运行时数据区——JDK1.7、JDK1.8
  • CentOS7安装Oracle11gR2
  • vux从安装到基本使用
  • UEFI原理与编程实践--FDF文件
  • HTML select option 详解
  • 解决Windows找不到steam_api.dll文件
  • 一文详解 RSA 非对称加密算法
  • 最新2023年3月编程排行榜出炉,Python太牛了