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 ...
随机推荐
- Lite Actor:方舟Actor并发模型的轻量级优化
原文:https://mp.weixin.qq.com/s/8biIBddpy6GKgakazg1vcg,点击链接查看更多技术内容. 并发模型是用来实现不同应用场景中并发任务的编程模型,通过合理地使用 ...
- 重新点亮linux 命令树————用户和用户组管理[六]
前言 简单整理一下用户和用户组管理. 正文 主要是介绍下面的命令: useradd 新建用户 userdel 删除用户 passwd 修改用户面 usermod 修改用户属性 chage 修改用户属性 ...
- spring boot properties 编码问题[四]
情景 application.properties 中: server.port=8081 person.last-name=张三 person.age=18 person.birth=2017/12 ...
- c# MCV 实现跨域
前言 core跨域严格来说是要分为两步的,因为分为简单跨域和复杂跨域,第一种为直接允许跨域,第二种因为存在某些框架本身不允许put,delete这两个,那么这就是一个问题了.对的,那么mvc这种重量级 ...
- 一些奇奇怪怪的js知识
0.关于前端为什么typeof null 得到的结果是 object 对于 null 来说,很多人会认为他是个对象类型,其实这是错误的. 虽然 `typeof null` 会输出 `object`,但 ...
- 阿里云视觉智能开放平台正式上线,阿里集团核心视觉AI能力对外开放
1月底,阿里云正式推出以计算机视觉AI能力为核心的视觉智能开放平台(vision.aliyun.com),平台目前已上线8大类目,超过50多种视觉AI能力,面向人脸识别,文字识别,商品理解,内容安全, ...
- OpenYurt 深度解读:如何构建 Kubernetes 原生云边高效协同网络?
作者 | 郑超 导读:OpenYurt 是阿里巴巴开源的云边协同一体化架构,与同类开源方案相比,OpenYurt 拥有可实现边缘计算全场景覆盖的能力.在之前的一篇文章中,我们介绍了 OpenYurt ...
- Oracle数据到MaxCompute乱码问题详解
简介:集成Oracle数据到MaxCompute,乱码问题分析: 为什么,在oracle数据不乱码,集成到MaxCompute就乱码了? 问题在哪里? 1.1 乱码现象 DataWorks的数据离线 ...
- [FAQ] swagger-php @OA\JsonContent 与 @MediaType @OA\Schema 的用法
@OA\JsonContent 是对 @MediaType @OA\Schema 两者的封装,类似于 laravel 中 JsonResponse 对 Response 的封装. @OA\JsonCo ...
- [Py] Jupyter 写入和执行 python 文件
以 %%writefile request.py 开头. 下面写 python 代码,然后 shift + enter 键,可以把 python 代码写入开头指定的文件中,没有则自动创建. 以 %ru ...