SwiftUI—使用HStack在水平方向排列视图

简介: SwiftUI—使用HStack在水平方向排列视图

HStack视图可以使其子视图,在水平方向上等距排列。


示例代码:


struct ContentView : View {
    var body: some View {
        HStack(alignment: .bottom, spacing: 40){ //设置水平排列的对齐方式为底部对齐,所有的子视图在HStack里,按照他们的底部边缘进行对齐。设置子视图的水平距离为40
            Image(systemName: "book.fill")
            Text("Interactive Tutorials")
            Spacer() //它的作用是自动调整自身的宽度,以使VStack里的所有子视图,在水平方向上撑满整个屏幕
            Image(systemName: "icloud.and.arrow.down") //在空格视图的右侧,添加另一个图像视图。这样空格视图,将其它的子视图分成左右两侧。空格视图的宽度根据屏幕尺寸的不同,会进行自动的调整。
        }
        .padding()
    }
}


2466108-9d74b7961ef9eaae.webp.jpg


目录
相关文章
|
iOS开发
SwiftUI极简教程34:LazyVGrid垂直网格和LazyHGrid水平网格的使用
SwiftUI极简教程34:LazyVGrid垂直网格和LazyHGrid水平网格的使用
1792 0
SwiftUI极简教程34:LazyVGrid垂直网格和LazyHGrid水平网格的使用
|
4月前
|
前端开发 容器
前端基础(十五)_多栏布局(两列自适应布局、圣杯布局---三列布局、双飞翼布局--三列布局、等高布局)
本文介绍了前端开发中的多种自适应布局技术,包括两列自适应布局、圣杯布局(三列布局)、双飞翼布局(三列布局)和等高布局。文章通过代码示例展示了如何使用HTML和CSS实现这些布局,以及如何通过flex布局简化实现过程。
144 2
|
编解码 前端开发 容器
ECharts力导向布局图增加滚动条
ECharts力导向布局图增加滚动条
获取 table 距离窗口上方的高度(有深度的文章)
获取 table 距离窗口上方的高度(有深度的文章)
241 0
SwiftUI—使用VStack在垂直方向排列视图
SwiftUI—使用VStack在垂直方向排列视图
170 0
SwiftUI—使用VStack在垂直方向排列视图
SwiftUI—使用ZStack在深度方向排列视图
SwiftUI—使用ZStack在深度方向排列视图
213 0
SwiftUI—使用ZStack在深度方向排列视图
SwiftUI—创建一个水平方向上的滚动视图
SwiftUI—创建一个水平方向上的滚动视图
207 0
SwiftUI—创建一个水平方向上的滚动视图
SwiftUI—使用List列表在垂直方向显示一系列的内容
SwiftUI—使用List列表在垂直方向显示一系列的内容
439 0
SwiftUI—使用List列表在垂直方向显示一系列的内容
|
数据可视化 Android开发 容器
【约束布局】ConstraintLayout 引导线 Guideline 约束 ( 简介 | 可视化操作 | 属性 | 水平引导线 | 垂直引导线 | 开始结束尺寸 | 百分比位置 | 约束组件 )(一)
【约束布局】ConstraintLayout 引导线 Guideline 约束 ( 简介 | 可视化操作 | 属性 | 水平引导线 | 垂直引导线 | 开始结束尺寸 | 百分比位置 | 约束组件 )(一)
797 0
【约束布局】ConstraintLayout 引导线 Guideline 约束 ( 简介 | 可视化操作 | 属性 | 水平引导线 | 垂直引导线 | 开始结束尺寸 | 百分比位置 | 约束组件 )(一)
|
数据可视化
【约束布局】ConstraintLayout 引导线 Guideline 约束 ( 简介 | 可视化操作 | 属性 | 水平引导线 | 垂直引导线 | 开始结束尺寸 | 百分比位置 | 约束组件 )(二)
【约束布局】ConstraintLayout 引导线 Guideline 约束 ( 简介 | 可视化操作 | 属性 | 水平引导线 | 垂直引导线 | 开始结束尺寸 | 百分比位置 | 约束组件 )(二)
606 0
【约束布局】ConstraintLayout 引导线 Guideline 约束 ( 简介 | 可视化操作 | 属性 | 水平引导线 | 垂直引导线 | 开始结束尺寸 | 百分比位置 | 约束组件 )(二)