SwiftUI(一)- VStack、HStack、ZStack布局
SwiftUI是什么
懒得写,直接找了一篇博客: 初识 SwiftUI
三种布局
SwiftUI包括三种布局:
- VStack: 纵向布局,默认居中对齐
- HStack: 横向布局,默认居中对齐
- ZStack: 覆盖布局,默认居中对齐
示例
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
//HStack:纵向布局,默认居中对齐
VStack(alignment: .trailing, spacing: 10) {
Text("纵向布局").padding(10)
Text("纵向布局2333").padding(10)
}.border(Color.blue, width: 1)
//HStack:横向布局,默认居中对齐
HStack(alignment: .center, spacing: 20) {
Text("横向布局1").padding(10)
Text("横向布局2").padding(10)
}.border(Color.yellow, width: 1)
.padding(10)
//ZStack:覆盖布局,默认居中对齐
ZStack(alignment: .topLeading, content: {
Image("bg_blue")
Text("覆盖布局").padding(20)
})
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

SwiftUI(一)- VStack、HStack、ZStack布局的更多相关文章
- IOS Widget(3):SwiftUI开发小组件布局入门
引言 经过上一篇文章,我们已经可以在桌面上展示出一个小组件出来了,你肯定想小试牛刀,动手改一改,那我们就从改小组件的布局做起吧.本文不会讲解Swift语法,如果是熟悉Flutter,Kotlin这 ...
- SwiftUI 简明教程之文本与图片
本文为 Eul 样章,如果您喜欢,请移步 AppStore/Eul 查看更多内容. Eul 是一款 SwiftUI & Combine 教程类 App(iOS.macOS),以文章(文字.图片 ...
- SwiftUI or Flutter ?
看到这篇好文,忍不住想分享一下 本文转自https://juejin.im/post/5d05b45bf265da1bcc193ff4 版权归原文所有 ------------------------ ...
- SwiftUI - 一起来仿写微信APP之一首页列表视图
简介 最近在学习 SwiftUI ,我一般都是先去学习界面布局,所以就想着仿写一下经常使用的软件的界面,所以先拿微信开刀.因为不想一次性发太多的内容,所以只好将主题分解,一部分一部分地去讲,接下来我们 ...
- SwiftUI - Grid View 的实现方法,逐步剖析助你实现
简介 在当前正式 SwiftUI 版本而言,很多控件都是缺少的.比如在 UIKit 框架里有 UICollectionView 组件,可以很方便地做 Gird 格子类型的视图.但是在 SwiftUI ...
- SwiftUI图片处理(缩放、拼图)
采用SwiftUI Core Graphics技术,与C#的GDI+绘图类似,具体概念不多说,毕竟我也是新手,本文主要展示效果图及代码,本文示例代码需要请拉到文末自取. 1.图片缩放 完全填充,变形压 ...
- 【SwiftUI】学习笔记1-创建第一个iOS应用
本系列将会开发大量实际的项目. 系列为本人学习笔记,资料:<SwiftUI自学成长笔记>-刘铭 资源源代码下载资源:可以在gitee上下载,搜索刘铭即可. 第一章:创建项目 也可以在菜单栏 ...
- iOS桌面小插件 Widget Extension
iOS桌面小插件 Widget Extension 这个插件时iOS14以后才出现的,基于SwiftUI 旧项目新建时可能一堆错误,其中一个时要把插件target 开发sdk版本设置为14.0以上 新 ...
- matlab numpy equivalents
THIS IS AN EVOLVING WIKI DOCUMENT. If you find an error, or can fill in an empty box, please fix it! ...
- Python数据分析numpy库
1.简介 Numpy库是进行数据分析的基础库,panda库就是基于Numpy库的,在计算多维数组与大型数组方面使用最广,还提供多个函数操作起来效率也高 2.Numpy库的安装 linux(Ubuntu ...
随机推荐
- Linux之网络排错
Linux 网卡收包流程如下 网卡收到数据包 将数据包从网卡硬件缓存移动到服务器内存中(DMA方式,不经过CPU) 通过硬中断通知CPU处理 CPU通过软中断通知内核处理 经过TCP/IP协议栈处理 ...
- 升级gradle:Could not find method jackOptions() for arguments
前言 这是我在升级gradle发生的错误. 解决 原因是被废弃了: 删除: jackOptions { enabled true } 解释一下什么是jack: Jack 是 Java Android ...
- c# 优化代码的一些规则——判断null值得不同写法[六]
前言 先来看一个例子: 假设updated 是一个委托: if(updated!=null) { updated(); } 请问上面写法在多线程中安全吗?如果不安全会抛出什么异常呢? 正文 上面的答案 ...
- vue-manage-system 版本更新,让开发更加简单
vue-manage-system 近期进行了一次版本升级,主要是支持了更多功能.升级依赖版本和优化样式,并且上线了官方文档网站,大部分功能都有文档或者使用示例,更加适合新手上手开发,只需要根据实际业 ...
- 牛客网-SQL专项训练3
①这里有一张user表包含如下信息: 现在要把name列的所有值都转换为大写,并将字段重命名为names,像下面这样: SQL语句为:SELECT UCASE(name) AS names FROM ...
- 时序数据库永远的难关 — 时间线膨胀(高基数 Cardinality)问题的解决方案
简介: 本文主要讨论 influxdb 在遇到写入的数据出现高基数 Cardinality 问题时,一些可行的解决方案. 作者 | 徐建伟 (竹影) 前序 随着移动端发展走向饱和,现在整个 IT 行 ...
- [GPT] 如何让 vue-router 打开新窗口
在Vue Router中打开新窗口可以通过使用 <router-link> 组件的 target 属性来实现.将 target 属性设置为`"_blank"`将会在 ...
- [FAQ] gormV2 Too many connections
gormV2 中不再有v1的 db.Close() 方法. 取而代之的 close 方式是如下: sqlDB, err := DB.DB() sqlDB.Close() https://github. ...
- [Contract] Solidity 合约使用 truffle 部署到测试网和主网
使用 truffle 发布到非本地的以太坊主网或者测试网时,需要提供钱包的助记词或私钥. 首先安装 truffle 组件:npm install @truffle/hdwallet-provider ...
- dotnet 根据基线包版本实现库版本兼容
本文来告诉大家如何根据 基线包版本 的功能来实现自动在构建过程中,告诉开发者,当前版本是否存在不兼容旧版本的变更.其不兼容变更包括二进制中断变更和 API 不兼容变更和源代码中断变更.可以让库开发者花 ...