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水平网格的使用
1774 0
SwiftUI极简教程34:LazyVGrid垂直网格和LazyHGrid水平网格的使用
|
21天前
在使用 Flexbox 布局实现自适应宽度的品字布局时,子元素的排列顺序是否可以调整?
【10月更文挑战第27天】使用Flexbox布局实现自适应宽度的品字布局时,可以通过调整HTML结构中的顺序或使用 `order` 属性来灵活地调整子元素的排列顺序,以满足不同的设计和布局需求。
|
2月前
|
前端开发 容器
前端基础(十五)_多栏布局(两列自适应布局、圣杯布局---三列布局、双飞翼布局--三列布局、等高布局)
本文介绍了前端开发中的多种自适应布局技术,包括两列自适应布局、圣杯布局(三列布局)、双飞翼布局(三列布局)和等高布局。文章通过代码示例展示了如何使用HTML和CSS实现这些布局,以及如何通过flex布局简化实现过程。
89 2
|
3月前
|
前端开发 JavaScript 开发者
告别居中难题!揭秘未知宽高元素如何轻松实现水平和垂直居中的神奇技巧!
【8月更文挑战第23天】本文介绍了在Web前端开发中实现未知宽度和高度元素的水平垂直居中的四种方法:使用Flexbox布局、Grid布局、绝对定位结合transform属性以及利用负margin。每种方法均提供了示例代码,帮助开发者根据不同场景和兼容性需求选择最合适的解决方案,从而轻松应对各种居中布局需求。
36 1
|
6月前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
59 1
|
iOS开发
iOS开发 - 渐变导航条升级版(判断滚动的方向和改变方向时的位置)
iOS开发 - 渐变导航条升级版(判断滚动的方向和改变方向时的位置)
136 0
iOS开发 - 渐变导航条升级版(判断滚动的方向和改变方向时的位置)
SwiftUI—使用VStack在垂直方向排列视图
SwiftUI—使用VStack在垂直方向排列视图
162 0
SwiftUI—使用VStack在垂直方向排列视图
SwiftUI—创建一个水平方向上的滚动视图
SwiftUI—创建一个水平方向上的滚动视图
205 0
SwiftUI—创建一个水平方向上的滚动视图
SwiftUI—使用ZStack在深度方向排列视图
SwiftUI—使用ZStack在深度方向排列视图
201 0
SwiftUI—使用ZStack在深度方向排列视图