SwiftUI—使用Spacer空格视图撑满布局空间

简介: SwiftUI—使用Spacer空格视图撑满布局空间

Spacer是一个灵活的空间视图,它可以沿着包含堆栈布局的主轴进行扩展,如果不包含在堆栈中,则在两个x或y轴上进行扩展。空格视图的作用是自动调整自身的高度和宽度,以在HStack里撑满水平空间,或在VStack里撑满垂直空间。


示例代码:


var body: some View {
        VStack{
            HStack {
                Image(systemName: "clock")
                Spacer() //在图像视图右侧,添加一个空格视图。空格视图自动调整自身的宽度,以填满在水平方向上的,图像视图右侧的所有空间。
           }
           .padding()
           HStack {
                Image(systemName: "clock")
                Spacer()
                Text("\(Date())")
           }
           .padding()
            HStack {
                 Image(systemName: "clock")
                 Spacer(minLength: 50)
                 Text("\(Date())")
            }
            .padding()
        }
    }


2466108-48a7d05aae3527e3.webp.jpg


目录
相关文章
|
4天前
|
小程序 前端开发 Android开发
微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)
微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)
8 1
|
1月前
QML (控件位置布局)之(Anchors)锚布局
QML (控件位置布局)之(Anchors)锚布局
37 2
|
4月前
|
XML Java Android开发
Android Studio中视图基础之设置视图的宽高、间距、对齐方式的讲解与实战(附源码 超详细必看)
Android Studio中视图基础之设置视图的宽高、间距、对齐方式的讲解与实战(附源码 超详细必看)
74 0
|
6月前
|
XML JavaScript 前端开发
SAP UI5 响应式表格 sap.m.Table 根据不同宽度的屏幕动态决定显示或隐藏 Column 的实现源代码讲解试读版
SAP UI5 响应式表格 sap.m.Table 根据不同宽度的屏幕动态决定显示或隐藏 Column 的实现源代码讲解试读版
32 0
关于 Qt图形视图框架自绘图元放到左边和上边之外,部分在内进行拉伸后,拉伸多余的区域无法碰撞 的解决方法
关于 Qt图形视图框架自绘图元放到左边和上边之外,部分在内进行拉伸后,拉伸多余的区域无法碰撞 的解决方法
关于 Qt图形视图框架自绘图元放到左边和上边之外,部分在内进行拉伸后,拉伸多余的区域无法碰撞 的解决方法
SwiftUI—使用Divider分隔线对视图进行分隔
SwiftUI—使用Divider分隔线对视图进行分隔
1011 0
SwiftUI—使用Divider分隔线对视图进行分隔
SwiftUI—使用Text视图显示指定的文字
SwiftUI—使用Text视图显示指定的文字
372 0
SwiftUI—使用Text视图显示指定的文字
SwiftUI—使用ScrollView在限定的区域显示超长的内容
SwiftUI—使用ScrollView在限定的区域显示超长的内容
342 0
SwiftUI—使用ScrollView在限定的区域显示超长的内容
SwiftUI—Text视图的填充属性
SwiftUI—Text视图的填充属性
285 0
SwiftUI—Text视图的填充属性
SwiftUI—如何以动画的方式显示或隐藏指定的位图
SwiftUI—如何以动画的方式显示或隐藏指定的位图
277 0
SwiftUI—如何以动画的方式显示或隐藏指定的位图