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. 国庆的一些blog 书写

    前言 国庆估计出不去了,所以吧,把文档准备下. 正文 1.docker 微服务,整理微软开源shop框架. 2.rpa 这个东西,我第一次接触是因为android测试的时候,每次修改代码,都需要全部测 ...

  2. 什么是ip协议二

    前言 续前面一章. 正文 看下ip选项: 看一张图: 这个ip选项一般我们不用看,即使你去搞硬件,那么做c++或者c的人会告诉你填啥,按照他们设置即可. 那么ip是如何传输的呢? 先看这张图,这张图的 ...

  3. Elasticsearch与kibana的单机安装

    前言 本文为纯实操记录,以供需要时查阅. 对应版本为7.3,jdk版本1.8 Elasticsearch安装 Elasticsearch官网:https://www.elastic.co/cn/pro ...

  4. 微软自带的Hyper-V虚拟机使用、VMware16安装Win10虚拟机介绍

    一.首先介绍VMware虚拟机. 安装WIN10统虚拟机推荐用VMware16. 1.镜像网址: MSD网址传送门1:https://msdn.itellyou.cn MSD新网址传送门2:https ...

  5. drf——基于apiview写过滤、排序和分页

    基于APIView带过滤和排序 from rest_framework.views import APIView from .models import Book from .serializer i ...

  6. Memory Error

    不久前,为了满足工作中日常的各种实验测试需求,终于按需求组装一台塔式的server T440.但是没有多久就出现些问题,以下大概是问题和现象简单描述: (1). 最开始时,没几天就出现自动重启的问题, ...

  7. 【Oracle】 管道函数pipelined function简单的使用

    Oracle 管道函数pipelined function简单的使用 如果在函数(function)中加关键字 pipelined,就表明这是一个oracle管道函数,其返回值类型必为 集合,体现出来 ...

  8. HarmonyOS NEXT应用开发—在Native侧实现进度通知功能

    介绍 本示例通过模拟下载场景介绍如何将Native的进度信息实时同步到ArkTS侧. 效果图预览 使用说明 点击"Start Download"按钮后,Native侧启动子线程模拟 ...

  9. KubeVela 1.5:灵活框选 CNCF 原子能力打造独特的企业应用发布平台

    简介: KubeVela 1.5 于近日正式发布.在该版本中为社区带来了更多的开箱即用的应用交付能力,包括新增系统可观测:新增 Cloud Shell 终端,将 Vela CLI 搬到了浏览器:增强的 ...

  10. 从 2018 年 Nacos 开源说起

    2018 年夏天 国内微服务开源 领域,迎来了一位新成员.此后,在构建微服务注册中心和配置中心的过程中,国内开发者多了一个可信赖的选项. Nacos 是阿里巴巴开源的一个更易于构建云原生应用的动态服务 ...