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 ...
随机推荐
- WPF随笔收录-实时绘制心率曲线
一.前言 在自己的项目中,涉及到实时心率曲线的绘制,项目上的曲线绘制,一般很难找到能直接用的第三方库,而且有些还是定制化的功能,所以还是自己绘制比较方便.很多人一听到自己画就害怕,感觉很难,今天就分享 ...
- Web前端 - Vue
<!-- id标识vue作用的范围 --> <div id="app"> <!-- {{}} 插值表达式,绑定vue中的data数据 --> { ...
- 使用 Docker 部署 Draw.io 在线流程图系统
1)介绍 Draw.io GitHub:https://github.com/jgraph/drawio Draw.io 是一款开源的绘制流程图的工具,拥有大量免费素材和模板.程序本身支持中文在内的多 ...
- Ubuntu22.04版本安装对应版本ROS教程 (小白2024年)
参考资料:(我是开了加速器,毕竟中间使用了github访问网址,国内免费加速器Steam++,开个github网站加速即可,不开我不知道行不行可以自己一试) ubuntu22.04安装ROS2 详细教 ...
- 物联网浏览器(IoTBrowser)-使用深度学习开发防浸水远程报警
一.起因 新房子买在2楼,反水概率较大,加上无良开发商的劣质材料,就我所在楼栋已经发生几起反水事件,而且是高层反水,有几户重复出现反水,原因是管道中间有一个钢筋 :( 二.解决方案 1.水浸传感器+W ...
- 飞桨PaddlePaddle的安装
飞桨PaddlePaddle的安装 MacOS 下的 PIP 安装 一.环境准备 1.1 如何查看您的环境 可以使用以下命令查看本机的操作系统和位数信息: uname -m && ca ...
- CF1832B Maximum Sum 题解
[题目描述] 给定一个长度为 \(n\) 的数列,其中每个元素互不相同,进行 \(k\) 次操作,每次可以选择删除序列中最小的两个数或最大的一个数.求操作后剩余数的和的最大值. [思路] 我们构造一组 ...
- 代理网关设计与实现(基于NETTY)
简介:本文重点在代理网关本身的设计与实现,而非代理资源的管理与维护. 作者 | 新然 来源 | 阿里技术公众号 一 问题背景 平台端购置一批裸代理,来做广告异地展现审核.从外部购置的代理,使用方 ...
- [FAQ] 对于 Puppeteer 和 Chromium 在 Linux 上的安装,需要安装哪些依赖库
比如 puppeteer/chrome/linux-114.0.5735.133/chrome-linux64/chrome 到底要装哪些依赖. 一般根据报错提示,安装缺少的即可,以下是一般需要的 ...
- Fixing Missing Windows App Runtime Environment Prompt for Unpackaged WinUI 3 Applications
This article will tell you how to fix the prompt for a missing Windows App Runtime environment when ...