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布局的更多相关文章

  1. IOS Widget(3):SwiftUI开发小组件布局入门

    引言   经过上一篇文章,我们已经可以在桌面上展示出一个小组件出来了,你肯定想小试牛刀,动手改一改,那我们就从改小组件的布局做起吧.本文不会讲解Swift语法,如果是熟悉Flutter,Kotlin这 ...

  2. SwiftUI 简明教程之文本与图片

    本文为 Eul 样章,如果您喜欢,请移步 AppStore/Eul 查看更多内容. Eul 是一款 SwiftUI & Combine 教程类 App(iOS.macOS),以文章(文字.图片 ...

  3. SwiftUI or Flutter ?

    看到这篇好文,忍不住想分享一下 本文转自https://juejin.im/post/5d05b45bf265da1bcc193ff4 版权归原文所有 ------------------------ ...

  4. SwiftUI - 一起来仿写微信APP之一首页列表视图

    简介 最近在学习 SwiftUI ,我一般都是先去学习界面布局,所以就想着仿写一下经常使用的软件的界面,所以先拿微信开刀.因为不想一次性发太多的内容,所以只好将主题分解,一部分一部分地去讲,接下来我们 ...

  5. SwiftUI - Grid View 的实现方法,逐步剖析助你实现

    简介 在当前正式 SwiftUI 版本而言,很多控件都是缺少的.比如在 UIKit 框架里有 UICollectionView 组件,可以很方便地做 Gird 格子类型的视图.但是在 SwiftUI ...

  6. SwiftUI图片处理(缩放、拼图)

    采用SwiftUI Core Graphics技术,与C#的GDI+绘图类似,具体概念不多说,毕竟我也是新手,本文主要展示效果图及代码,本文示例代码需要请拉到文末自取. 1.图片缩放 完全填充,变形压 ...

  7. 【SwiftUI】学习笔记1-创建第一个iOS应用

    本系列将会开发大量实际的项目. 系列为本人学习笔记,资料:<SwiftUI自学成长笔记>-刘铭 资源源代码下载资源:可以在gitee上下载,搜索刘铭即可. 第一章:创建项目 也可以在菜单栏 ...

  8. iOS桌面小插件 Widget Extension

    iOS桌面小插件 Widget Extension 这个插件时iOS14以后才出现的,基于SwiftUI 旧项目新建时可能一堆错误,其中一个时要把插件target 开发sdk版本设置为14.0以上 新 ...

  9. matlab numpy equivalents

    THIS IS AN EVOLVING WIKI DOCUMENT. If you find an error, or can fill in an empty box, please fix it! ...

  10. Python数据分析numpy库

    1.简介 Numpy库是进行数据分析的基础库,panda库就是基于Numpy库的,在计算多维数组与大型数组方面使用最广,还提供多个函数操作起来效率也高 2.Numpy库的安装 linux(Ubuntu ...

随机推荐

  1. Lite Actor:方舟Actor并发模型的轻量级优化

    原文:https://mp.weixin.qq.com/s/8biIBddpy6GKgakazg1vcg,点击链接查看更多技术内容. 并发模型是用来实现不同应用场景中并发任务的编程模型,通过合理地使用 ...

  2. 重新点亮linux 命令树————用户和用户组管理[六]

    前言 简单整理一下用户和用户组管理. 正文 主要是介绍下面的命令: useradd 新建用户 userdel 删除用户 passwd 修改用户面 usermod 修改用户属性 chage 修改用户属性 ...

  3. spring boot properties 编码问题[四]

    情景 application.properties 中: server.port=8081 person.last-name=张三 person.age=18 person.birth=2017/12 ...

  4. c# MCV 实现跨域

    前言 core跨域严格来说是要分为两步的,因为分为简单跨域和复杂跨域,第一种为直接允许跨域,第二种因为存在某些框架本身不允许put,delete这两个,那么这就是一个问题了.对的,那么mvc这种重量级 ...

  5. 一些奇奇怪怪的js知识

    0.关于前端为什么typeof null 得到的结果是 object 对于 null 来说,很多人会认为他是个对象类型,其实这是错误的. 虽然 `typeof null` 会输出 `object`,但 ...

  6. 阿里云视觉智能开放平台正式上线,阿里集团核心视觉AI能力对外开放

    1月底,阿里云正式推出以计算机视觉AI能力为核心的视觉智能开放平台(vision.aliyun.com),平台目前已上线8大类目,超过50多种视觉AI能力,面向人脸识别,文字识别,商品理解,内容安全, ...

  7. OpenYurt 深度解读:如何构建 Kubernetes 原生云边高效协同网络?

    作者 | 郑超 导读:OpenYurt 是阿里巴巴开源的云边协同一体化架构,与同类开源方案相比,OpenYurt 拥有可实现边缘计算全场景覆盖的能力.在之前的一篇文章中,我们介绍了 OpenYurt ...

  8. Oracle数据到MaxCompute乱码问题详解

    ​简介:集成Oracle数据到MaxCompute,乱码问题分析: 为什么,在oracle数据不乱码,集成到MaxCompute就乱码了? 问题在哪里? 1.1 乱码现象 DataWorks的数据离线 ...

  9. [FAQ] swagger-php @OA\JsonContent 与 @MediaType @OA\Schema 的用法

    @OA\JsonContent 是对 @MediaType @OA\Schema 两者的封装,类似于 laravel 中 JsonResponse 对 Response 的封装. @OA\JsonCo ...

  10. [Py] Jupyter 写入和执行 python 文件

    以 %%writefile request.py 开头. 下面写 python 代码,然后 shift + enter 键,可以把 python 代码写入开头指定的文件中,没有则自动创建. 以 %ru ...