当前位置: 首页 > news >正文

SwiftUI 常用组件和属性(SwiftUI初学笔记)

本文为初学SwiftUI笔记。记录SwiftUI常用的组件和属性。

组件

共有属性(View的属性)

             Image("toRight").resizable().background(.red) // 背景色.shadow(color: .black, radius: 2, x: 9, y: 15) //阴影.frame(width: 30, height: 30) // 宽高 可以只设置宽或者高.offset(x: 10,y: 10) //显示位置偏移(原来的位置可能还继续占位).position(CGPoint(x: 175, y: 100)) //绝对位置 这个配置的是中心点的位置
//            //相对于其他组件的间距.padding(EdgeInsets(top: 10, leading: 50, bottom: 50, trailing: 50)).scenePadding(.trailing) // 填充此视图所沿的一组边。.border(.blue, width: 12) // 边框颜色和宽度.cornerRadius(15) // 圆角.clipShape(Circle()) //裁减成圆形.mask(Circle()) //遮罩.onTapGesture { // 点击事件print("你好啊")}

Text

Text展示文案

            Image("toRight").resizable().background(.red) // 背景色.shadow(color: .black, radius: 2, x: 9, y: 15) //阴影.frame(width: 30, height: 30) // 宽高 可以只设置宽或者高.offset(x: 10,y: 10) //显示位置偏移(原来的位置可能还继续占位)
//            //相对于其他组件的间距.padding(EdgeInsets(top: 10, leading: 50, bottom: 50, trailing: 50)).scenePadding(.trailing) // 填充此视图所沿的一组边。.border(.blue, width: 12) // 边框颜色和宽度.cornerRadius(15) // 圆角.overlay(Color.blue.clipShape(Circle()))//覆盖一个图形.rotation3DEffect(.degrees(60), axis: (x: 1, y: 0, z: 0))//3D旋转.rotationEffect(.degrees(20), anchor:UnitPoint(x: 0, y: 0)) //2D旋转.onTapGesture { // 点击事件print("你好啊")}

Image

Image展示图片

            Image("toRight") //如果不设置大小会自动读取图片大小//允许重新设置大小,调用了这个才能设置大小 ,capInsets为间距 resizingMode为渲染模式.resizable(capInsets: EdgeInsets(), resizingMode: .tile).interpolation(.high)//插值,大图片用高插值,优化展示.antialiased(true) //抗锯齿

ProgressView

ProgressView是进度条

import SwiftUIstruct ProgressTest: View {@State var timer = Timer.TimerPublisher(interval: 0.03, runLoop: .main, mode: .common).autoconnect()@State var value:Double = 0.0var body: some View {List{//菊花 无法定义颜色 ProgressView()//线性进度条 无法隐藏 Label ProgressView("完成量", value: value, total: 100).accentColor(.red)//自定义 StyleProgressView("工程进度",value: value, total: 100).progressViewStyle(MyProgressViewStyle())}.onAppear {timer = Timer.TimerPublisher(interval: 0.03, runLoop: .main, mode: .common).autoconnect()}.onReceive(timer) { _ inif value < 100 {value += 2}}}
}//定义方法都大同小异。
struct MyProgressViewStyle:ProgressViewStyle{let foregroundColor:Colorlet backgroundColor:Colorinit(foregroundColor:Color = .blue,backgroundColor:Color = .orange){self.foregroundColor = foregroundColorself.backgroundColor = backgroundColor}func makeBody(configuration: Configuration) -> some View {GeometryReader{ proxy inZStack(alignment:.topLeading){backgroundColorRectangle().fill(foregroundColor).frame(width:proxy.size.width * CGFloat(configuration.fractionCompleted ?? 0.0))}.clipShape(RoundedRectangle(cornerRadius: 10)).overlay(configuration.label.foregroundColor(.white))}}
}

Button

按钮

Button(action: { //点击事件}, label: { //这个里面放的东西相当于水平布局Image(systemName: "clock")Text("Click Me")Text("Subtitle")
})

如果只有文字可以直接这样

Button("Click Me") {// 点击事件
}

布局组件

VStack

垂直布局
alignment是对齐方式 包括leading、trailing、center
spacing 是内部组件间距

VStack(alignment:.leading, spacing: 20){
}

HStack

水平布局
alignment是对齐方式 包括 包括bottom、top、firstTextBaseline、lastTextBaseline、center
spacing 是内部组件间距

    HStack(alignment:.bottom, spacing: 20){}

ZStack

堆叠布局,后面的组件叠在前面的组件之上
alignment 包括leading、trailing、bottom、top、bottomLeading、topLeading、bottomtrailing、toptrailing、center

//ZStack(alignment: .bottomTrailing){}

Group

把多个组件组合到一起,解决布局最多只能有10个内部组件问题,他里面的组件遵循外面的布局的布局方式。另外还有个组件GroupBox,是带一个文案的Group。

LazyStack

懒加载的Stack,需要跟scrollView配合使用,只会加载当前页面显示的item,必须有循环创建,否则无法出现懒加载效果

颜色

使用系统提供色

Text().background(.yellow)

自定义颜色

Text().background(Color(UIColor(displayP3Red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0))

使用Asset中定义的颜色,下面的8FD3F4是命名为此的asset中的颜色

Color("8FD3F4")

渐变色

LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .leading, endPoint: .trailing)

形状

在这里插入图片描述

如上形状的代码:

        VStack {Spacer()Group{Text("矩形 Rectangle")Rectangle().fill(Color.orange).frame(width: 100, height: 100)}Group{Text("圆角矩形 RoundedRectangle")RoundedRectangle(cornerRadius: 25, style: .continuous).fill(Color.red).frame(width: 100, height: 100)}Group{Text("胶囊 Capsule")Capsule().fill(Color.green).frame(width: 100, height: 50)Text("椭圆形 Ellipse")Ellipse().fill(Color.blue).frame(width: 100, height: 50)}Group{Text("圆形 Circle")Circle().fill(Color.purple).frame(width: 100, height: 50)}Spacer()}

其他

在 UIKit 中使用 SwiftUI

let vc = UIHostingController(rootView: Text("Hello World")) // 包装出来一个 UIViewController
let view = vc.view // 可以获取 view

相关文章:

SwiftUI 常用组件和属性(SwiftUI初学笔记)

本文为初学SwiftUI笔记。记录SwiftUI常用的组件和属性。 组件 共有属性(View的属性) Image("toRight").resizable().background(.red) // 背景色.shadow(color: .black, radius: 2, x: 9, y: 15) //阴影.frame(width: 30, height: 30) // 宽高 可以只设置宽或者高.…...

Centos 中设置代理的两种方法

Centos 中设置代理的两种方法 在使用局域网时&#xff0c;有时在局域网内只有一台电脑可以进行上网&#xff0c;其他电脑只能通过配置代理的方式来上网&#xff0c;在Windows系统中设置代理上网相对简单&#xff0c;如果只需上网的话&#xff0c;只需在浏览器中找到网络连接&am…...

高速PCB设计指南系列(一)

第一篇 PCB布线 在PCB设计中&#xff0c;布线是完成产品设计的重要步骤&#xff0c;可以说前面的准备工作都是为它而做的&#xff0c; 在整个PCB中&#xff0c;以布线的设计过程限定最高&#xff0c;技巧最细、工作量最大。PCB布线有单面布线、 双面布线及多层布线。布线的方…...

云端IDE:TitanIDE v2.6.0 正式发布

原文作者&#xff1a;行云创新技术总监 邓冰寒 引言 云原生集成开发环境 TitanIDE v2.6.0 正式发布了&#xff0c;一起来看看都有那些全新的体验吧&#xff01; TitanIDE 是一款云IDE, 也称 CloudIDE&#xff0c;作为数字化时代研发体系不可或缺的一环&#xff0c;和企业建设…...

【Python】tqdm 模块

import mathfrom tqdm import tqdm, trange# 计算阶乘 results_1 []for i in range(6666):results_1.append(math.factorial(i))这是一个循环计算阶乘的程序&#xff0c;我们不知道程序运行的具体情况&#xff0c;如果能加上一个程序运行过程的进度条&#xff0c;那可就太有趣…...

论文阅读:Adversarial Cross-Modal Retrieval对抗式跨模式检索

Adversarial Cross-Modal Retrieval 对抗式跨模式检索 跨模态检索研究的核心是学习一个共同的子空间&#xff0c;不同模态的数据可以直接相互比较。本文提出了一种新的对抗性跨模态检索&#xff08;ACMR&#xff09;方法&#xff0c;它在对抗性学习的基础上寻求有效的共同子空间…...

计算机网络复习

什么是DHCP和DNS DNS(Domain Name System&#xff0c;域名系统)&#xff0c;因特网上作为域名和IP地址相互映射的一个分布式数据库&#xff0c;能够使用户更方便的访问互联网&#xff0c;而不用去记住能够被机器直接读取的IP数串。通过主机名&#xff0c;最终得到该主机名对应的…...

unity动画--动画绑定,转换,用脚本触发

文章目录如何制作和添加动画大概过程示例图将多组图片转化为动画放在对象身上实现动画之间的切换使用脚本触发Parameters(Trigger)如何制作和添加动画 大概过程示例图 将多组图片转化为动画放在对象身上 首先&#xff0c;我们要为我们要对象添加animator 然后我们要设置对应的…...

车载汽车充气泵PCBA方案

汽车为什么会需要充气泵呢&#xff1f;其实是由于乘用车中没有供气源&#xff0c;所以就必需充气泵来给避震器供气。充气泵是为了保障汽车车胎对汽车的行驶安全所配备的&#xff0c;防止遇上紧急问题时没有解决方案&#xff0c;同时也可以检测轮胎胎压。现阶段的充气泵方案&…...

Android 连接 MySQL 数据库教程

在 Android 应用程序中连接 MySQL 数据库可以帮助开发人员实现更丰富的数据管理功能。本教程将介绍如何在 Android 应用程序中使用低版本的 MySQL Connector/J 驱动程序来连接 MySQL 数据库。 步骤一&#xff1a;下载 MySQL Connector/J 驱动程序 首先&#xff0c;我们需要下…...

tmall.item.update.schema.get( 天猫编辑商品规则获取 )

&#xffe5;开放平台免费API必须用户授权 Schema方式编辑天猫商品时&#xff0c;编辑商品规则获取 公共参数 请求地址: HTTP地址 http://gw.api.taobao.com/router/rest 公共请求参数: 公共响应参数: 点击获取key和secret 请求示例 TaobaoClient client new DefaultTaobao…...

Leetcode 2379. 得到 K 个黑块的最少涂色次数

目录 一、题目内容和对应链接 1.题目对应链接 2.题目内容 二、我的想法 三、其他人的题解 一、题目内容和对应链接 1.题目对应链接 Leetcode 2379. 得到 K 个黑块的最少涂色次数 2.题目内容 给你一个长度为 n 下标从 0 开始的字符串 blocks &#xff0c;blocks[i] 要…...

[深入理解SSD系列 闪存实战2.1.3] 固态硬盘闪存的物理学原理_NAND Flash 的读、写、擦工作原理

2.1.3.1 Flash 的物理学原理与发明历程 经典物理学认为 物体越过势垒,有一阈值能量;粒子能量小于此能量则不能越过,大于此能 量则可以越过。例如骑自行车过小坡,先用力骑,如果坡很低,不蹬自行车也能 靠惯性过去。如果坡很高,不蹬自行车,车到一半就停住,然后退回去。 …...

总结:Linux内核相关

一、介绍看eBPF和Cilium相关内容时&#xff0c;碰到Cilium是运行在第 3/4 层&#xff0c;不明白怎么做到的&#xff0c;思考原理的时候就想到了内容&#xff0c;本文记录下内核相关知识。https://www.oschina.net/p/cilium?hmsraladdin1e1二、Linux内核主要由哪几个部分组成Li…...

flutter工程创建过程中遇到一些问题。

安装环境版本&#xff1a;JDK7.-JDK 8 Andriod SDK 10 flutter 版本 3.0 1.当创建完后flutter工程后会遇到 run gradle task assemlble Debug 的问题&#xff0c;需要设置远程仓库&#xff0c;共需要修改三个地方build.gradle两处以及flutter 下面的D:\FVM\versions\3.0.0\pac…...

记录实现操作系统互斥锁的一次思考

今天实现操作系统互斥锁的时候遇到一个有趣的问题。 场景 有两个进程分别名为 taskA&#xff0c;taskB&#xff0c;采取时间片轮转的方式交替运行——也即维护了一个 ready_queue&#xff0c;根据时钟中断来 FIFO 地调度任务。它们的任务是无限循环调用 sys_print() 来打印自…...

计算机SCI期刊的分值是什么意思? - 易智编译EaseEditing

影响因子&#xff08;Impact Factor,IF)是美国ISI&#xff08;科学信息研究所)的JCR(期刊引证报告)中的一项数据。 即某期刊前两年发表的论文在统计当年的被引用总次数除以该期刊在前两年内发表的论文总数。这是一个国际上通行的期刊评价指标。 例如&#xff0c;某期刊2005年影…...

5MW风电永磁直驱发电机-1200V直流并网MATLAB仿真模型

MATLAB2016b运行。主体模型&#xff1a;风机传动模块、PMSG模块、蓄电池模块、超级电容模块、无穷大电源。蓄电池控制、风机控制、逆变器控制。风机输出功率&#xff1a;直流母线电压&#xff1a;逆变器输出电压&#xff1a;逆变器输出电流&#xff1a;混合储能荷电状态&#x…...

10 个常见的 JavaScript 面试问题以及如何回答它们

你在准备 JavaScript 面试吗&#xff1f;别再看了&#xff01;本文将介绍10 个常见的 JavaScript 面试问题以及如何在代码示例和解释的帮助下回答这些问题。1. JavaScript 中的提升是什么&#xff1f;提升是 JavaScript 中的一种行为&#xff0c;其中变量和函数声明被移动到其作…...

字节跳动-今日头条后端开发一面面经

飞书50min 1、实习经历&#xff1f; 2、参加竞赛经历&#xff1f; 3、TCP和UDP的区别&#xff1f; 4、cookie和session的区别&#xff1f; 5、session如何做分布式&#xff1f; 6、概率题目&#xff0c;A和B轮流抛硬币&#xff0c;谁先抛到正面就获胜&#xff0c;A先抛硬币&…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

02.运算符

目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&&#xff1a;逻辑与 ||&#xff1a;逻辑或 &#xff01;&#xff1a;逻辑非 短路求值 位运算符 按位与&&#xff1a; 按位或 | 按位取反~ …...