SwiftUI-基础入门

开发OS X 图形应用界面时有三种实现方式：XIB、Storyboard、SwiftUI。Storyboard基于XIB做了优化，但XIB基本被放弃了，而SwiftUI是苹果公司后来开发的一套编程语言，用来平替Objective-C。虽然现在Swift 6 还是有些不完善的地方，但可以看到此为未来的主流。

  • 本系列课主要讲下SwiftUI方面的知识，不会过多涉及Swift基础语言，Swift可以查看笔者的另一个专题。本节做为第一节内容，主要课下应用构建的基础知识。
  • 笔者的开发环境为： Xcode Version 16.1 (16B40)、Swift 5，需要注意不同版本的Xcode其界面会有稍许差异，不同版本的Swift语言的API也会有一定的差异。

创建工程

所有的示例笔者会统一使用MacOS APP做为工程类型（因为IOS模拟器太占资源了），无论是OS还是IOS这对学习SwiftUI没有任何影响。

创建工程

在这里插入图片描述
一路Next，最后工程结构如下：
在这里插入图片描述

  • Preview Content：用于存放预览内容，开发者可以利用这些预览内容来快速查看和验证他们的界面设计在不同设备和屏幕尺寸上的表现，从而提高开发效率和界面质量；
  • .entitlements：相当于原来的info.plist文件，用于配置工程的一些设置；
  • Assets.xcassets：资源文件，主要用于存放图标；
  • XxApp.swift：工程启动入口函数，相当于main()；
  • ContentView.swift：SwiftUI 界面设计源码，在正式程序中可能会有多个这样的UI界面源码文件，工程默认创建的这个文件会被XxApp.swift调用。

工程源码

  • 启动文件
import SwiftUI@main  // 注意此标的使用
struct _1_base1App: App { //实现App协议var body: some Scene { //图控制器或应用入口点WindowGroup {ContentView() //调用UI实现类}}
}
  • Swift UI 视图
import SwiftUIstruct ContentView: View {var body: some View {VStack { //布局Image(systemName: "globe").imageScale(.large).foregroundStyle(.tint)Text("Hello, world!")}.padding()}
}//这行可有可无，主要是用于开发时实时预览用的
#Preview {ContentView()
}

工程运行

在运行前最基本的有几个设置需要确认一下：

  • targets：同一工程可设置多个运行目标，可在项目设置的General面板中设置；
  • swift版本：可在building settings面板中设置；
    在这里插入图片描述

新建界面

如果要创建新的UI，可选择File- New- File from template，选择SwiftUI。
在这里插入图片描述
默认代码如下：

import SwiftUIstruct SwiftUIView: View {var body: some View {Text("Hello, World!")}
}#Preview {SwiftUIView()
}

Doc文档

  • 中文文档： https://gitee.com/guangjie2021/SwiftUICn
  • 苹果官方：https://developer.apple.com/documentation

基础组件

这里只介绍几个，详细的可以参考上述文档中的内容。

Text 文字

基础代码如下，下面代码中有一些是.gray的写法，其是为了简便编程，把位于SwiftUICore中对象的一些名称在调用时省略了。

import SwiftUIstruct SwiftUIText: View {var body: some View {VStack{Text("这是一个swiftui实现的文本label，可以设置一些属性").font(.custom("slideyouran-Regular", size: 23)).foregroundColor(.gray).lineLimit(2).multilineTextAlignment(.center).padding()Text("以下是一些详情信息").font(.system(size: 23))}.padding()}}#Preview {SwiftUIText()
}
  • 自定义字体，在上述代码中有一行.font(.custom("slideyouran-Regular", size: 23))代码，这种是一种自定义字体的写法：
  1. 拷贝.ttf字体文件到工程中；
  2. 配置工程info信息；
  3. 编码；

工程info配置方法如下图所示，其中item 0 后面的值为字体的名称，这个名称可能会和文件名不一样，需要在系统中安装一下再确定：
在这里插入图片描述

Image 图片

图片有三种实现方式：

加载资源库图标

就是Assets库中的图片，在这个视图中可以添加文件夹等信息，但在使用时不需要关注其路径问题，但也意味着名称要唯一。

Image("DemoImg").resizable().scaledToFit().frame(width: 64).cornerRadius(12)

加载系统图标

苹果官方开发一个名为SF Symbols图标库的软件，这个软件主要用于查找系统图标名称，同时还能自动生成一些代码，供开发时何用。
在这里插入图片描述
这些图标相当于文字图标，可以使用内置函数设置颜色，线条等样式。

Image(systemName: "square.and.arrow.up.circle").font(.system(size: 52)).symbolEffect(.bounce).padding(12)

加载网络图片

就是从互联网上下载图片，但除了打开client设置外，还需要注意URL只能是https开头的。

            // 这是一种闭包写法：// image in：这是闭包的开始，image 是闭包的参数，代表加载的图像AsyncImage(url: URL(string: imageUrl)) { image inimage  // 这个闭包在图像加载完成后被调用.resizable().scaledToFit().frame(width: 280).cornerRadius(16)} placeholder: {
//                        Text("图片加载中")
//                            .font(.system(size: 24))
//                            .foregroundColor(.gray)
//                            .padding()
//                            .frame(width: 280,height: 160)
//                            .cornerRadius(16)ProgressView()}

在这里插入图片描述

自定义组件

SwiftUI的自定义组件比较简单，可以先了解下如何实现，后面章节再详细讲解。

自定义组件

比如如下代码，定义了一个自定义的TextDemo组件。同时也应该注意到，这里可以封装成比较复杂的套件。

import SwiftUI// MARK: - 文字组件
struct TextDemo: View { //组件参数var text: Stringvar textSize: CGFloatvar textColor: Color//组件样式var body: some View {Text(text).font(.system(size: textSize)).foregroundColor(textColor)}
}

自定义组件调用

自定义组件调用

import SwiftUIstruct SloganTextView: View {var body: some View {VStack(spacing: 10) {TextDemo(text: "你好，世界。", textSize: 23, textColor: .black)TextDemo(text: "愿日子如熹光，愿你能幸福～", textSize: 17, textColor: .gray)}}
}

预览效果如下：
在这里插入图片描述

布局组件

SwiftUI中内置了三种纯布局组件：VStack、HStack、ZStack，基本代码写法如下，可做为一个容器使用。

struct ContentView: View {var body: some View {VStack {Image(systemName: "globe").imageScale(.large).foregroundStyle(.tint)Text("我是启动页")}.padding()}
}

主界面设计

实现一个底图+图标这样的简单设计。
在这里插入图片描述

import SwiftUIstruct StartUpUI: View {var body: some View {ZStack(alignment: .bottom) {// 背景图片Image("starup").resizable()//.aspectRatio(contentMode: .fill).edgesIgnoringSafeArea(.all)VStack {Spacer() // 占位空间// 应用图标和应用名称HStack(alignment: .center, spacing: 20) {// 应用图标Image("DemoImg").resizable().aspectRatio(contentMode: .fit).frame(width: 60).cornerRadius(16)// 应用名称Text("世纪佳人").font(.system(size: 32)).foregroundColor(.white).bold()}}}}
}#Preview {StartUpUI()
}

常用方法

组件设置

以下是一种设计，很多的操作都需要以resizable()为前提。

  • resizable()：设置组件是否可以改变尺寸；
  • aspectRatio()：在resizable()打开的，指定调整尺寸时的横纵比和固定比；
  • edgesIgnoringSafeArea()：屏幕安全区设置；
  • frame(width: 60)：设置组件大小；
  • cornerRadius(32)：设置圆角

位置设置

  • Spacer()：占位符，它会把他后面的元素计算完大小后，然后占据其它空间
`VStack {Text("这是顶部的文本")Spacer() // 占据剩余空间，将下面的文本推到底部Text("这是底部的文本")
}`
  • .frame()：设置VStack的框架大小，下面这种infinity是一种自适应参数方式，非固定大小，建议用这种方式设置。
VStack {......
}
.frame(maxWidth: .infinity, maxHeight: .infinity) // 设置VStack的框架大小
  • padding() 修饰符可以接受不同的参数来指定内边距的大小，默认为5px
Text("Hello, SwiftUI!").padding(10.0) // 在文本视图周围添加10点的内边距Text("Hello, SwiftUI!").padding(.init(top: 10, leading: 20, bottom: 15, trailing: 25)) // 设置上、左（leading）、下、右（trailing）内边距Text("Hello, SwiftUI!").padding(.medium) // 使用中等大小的内边距

按钮与交互

SwiftUI的按钮实现有点特殊，它由两部分组成：事件+样式。其事件只有点击，但样式可以根据面要自定义，格式如下：

Button(action: {print("Tap") //事件
}) {Text("I'm a Button") //样式
}

按钮点击

在这里插入图片描述

struct TextButton: View {var body: some View {Button(action: { //事件print("aaa")}) {Text("立即使用")  //样式.font(.system(size: 17)).foregroundColor(.white).padding().frame(width: 180).background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .leading, endPoint: .trailing)).cornerRadius(16)}}
}

上述的样式部分也可以换成图标，如下面代码

struct ImageBtnView: View {var body: some View {Button(action: {// 点击后的操作}) {Image("WoodenFish").resizable().scaledToFit().frame(width: 160)}}
}

onTapGesture()手势

在这里插入图片描述
下面代码中用到了@State，其为状态缓存，用于MVVM交互使用的。

struct SwiftUIButton: View {@State var finNumber: Int = 1var body: some View {// 布局容器VStack(spacing: 32) {// 文字内容Text("功德+" + String(finNumber)).font(.system(size: 20)).foregroundColor(.black)// 图片按钮Image("WoodenFish").resizable().scaledToFit().frame(width: 160)// 点击操作.onTapGesture {finNumber += 1}}}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/60434.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

string------1

string------1

文章目录 一. STL1.概念2.版本 二. string类2.1 为什么学习string类2. 标准库中的string类2.2.1 构造（7个）2.2.2 对string类对象进行“访问和修改”（1）operator[]（2）迭代器1.迭代器的使用2.迭代器的价值&am…
阅读更多...
css-50 Projects in 50 Days(3)

css-50 Projects in 50 Days(3)

html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>旋转页面</title><link rel"sty…
阅读更多...
【线性代数\矩阵论】矩阵逆引理证明、应用

【线性代数\矩阵论】矩阵逆引理证明、应用

矩阵逆引理证明、应用 矩阵求逆引理要解决的问题是&#xff1a;减少矩阵求逆的计算量。已知一个矩阵 A A A及其逆矩阵 A − 1 A^{-1} A−1&#xff0c;当矩阵产生了变化时&#xff0c;例如增加一个扰动 P P P&#xff0c;能不能根据已知的逆矩阵 A − 1 A^{-1} A−1&#xff0c…
阅读更多...
1111111111待修改--大流量分析（三）-BUUCTF

1111111111待修改--大流量分析（三）-BUUCTF

总结摘要 题目来来源URL https://buuoj.cn/challenges#%E5%A4%A7%E6%B5%81%E9%87%8F%E5%88%86%E6%9E%90%EF%BC%88%E4%B8%89%EF%BC%89 答题过程 这道题是看大佬写着说查找phpinfo&#xff0c;我现在也不知道为什么能够一下子就定位到这里了 这里先按照phpinfo进行&#xff…
阅读更多...
OCRSpace申请free api流程

OCRSpace申请free api流程

0.OCRSpace概述 OCR.Space是一款功能强大的在线光学字符识别&#xff08;OCR&#xff09;工具。 格式与语言支持广泛&#xff1a;支持多种图片格式&#xff0c;如 JPG、PNG、GIF、PDF 等作为输入。在语言方面&#xff0c;它支持英语、中文、法语、德语等20多种语言的文字识别…
阅读更多...
UVC 输出视频格式修改和windows下数据分析

UVC 输出视频格式修改和windows下数据分析

文章目录 前言一、UVC MJPEG视频帧描述符1.MJPG视频帧格式示例 二、UVC YUV2、NV12、M420、I420无压缩视频帧描述符GUID1.如YUV2数据参数初始为: 三、UVC Windows下UVC摄像头数据分析总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 项目需要&#…
阅读更多...
C语言 | Leetcode C语言题解之第552题学生出勤记录II

C语言 | Leetcode C语言题解之第552题学生出勤记录II

题目&#xff1a; 题解&#xff1a; const int MOD 1000000007;struct Matrix {long mat[6][6];int row, col; };struct Matrix multiply(struct Matrix a, struct Matrix b) {int rows a.row, columns b.col, temp b.row;struct Matrix c;memset(c.mat, 0, sizeof(c.mat)…
阅读更多...
本地编译ChatNio的问题解决

本地编译ChatNio的问题解决

编译安装 部署成功后, 默认端口为 8094, 访问地址为 http://localhost:8094 Config 配置项 (~/config/config.yaml) 可以使用环境变量进行覆盖, 如 MYSQL_HOST 环境变量可覆盖 mysql.host 配置项 git clone https://github.com/Deeptrain-Community/chatnio.git cd chatniocd a…
阅读更多...
【Linux系统编程】第四十六弹---线程同步与生产消费模型深度解析

【Linux系统编程】第四十六弹---线程同步与生产消费模型深度解析

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、Linux线程同步 1.1、同步概念与竞态条件 1.2、条件变量 1.2.1、认识条件变量接口 1.2.2、举例子认识条件变量 1.2.3、…
阅读更多...
智能算法在金融分析中的应用：民锋科技的前沿探索

智能算法在金融分析中的应用：民锋科技的前沿探索

随着数据技术的发展&#xff0c;智能算法在金融市场中的应用逐渐增多&#xff0c;从模式识别到投资策略优化&#xff0c;智能算法正帮助金融从业者更高效地处理数据和做出决策。民锋科技积极探索智能算法的应用&#xff0c;通过技术创新为客户提供更精准的市场洞察和交易策略支…
阅读更多...
IC 脚本之VIM 记录

IC 脚本之VIM 记录

1. 对于代码中空格与tab相互转换的可通过如下实现&#xff1a; set tabstop 4 set expandtab %retab ! 以上三行命令即可实现将代码中每四个空格用一个tab来缩进。set tabstop 4 set noexpandtab %retab ! 以上三行命令即可实现将代码中的每个tab用四个空格来实现t…
阅读更多...
ML 系列：第 21 节 — 离散概率分布（二项分布）

ML 系列：第 21 节 — 离散概率分布（二项分布）

一、说明 二项分布描述了在固定数量的独立伯努利试验中一定数量的成功的概率&#xff0c;其中每个试验只有两种可能的结果&#xff08;通常标记为成功和失败&#xff09;。 二、探讨伯努利模型 例如&#xff0c;假设您正在抛一枚公平的硬币 &#xff08;其中正面成功&#xff…
阅读更多...
JS如何获取MQTT的主题

JS如何获取MQTT的主题

在JavaScript中&#xff0c;要获取MQTT发布的主题&#xff0c;你通常需要使用一个MQTT客户端库来连接到MQTT代理&#xff08;broker&#xff09;&#xff0c;并订阅你感兴趣的主题。当消息到达时&#xff0c;客户端会触发一个回调函数&#xff0c;该函数将包含消息的主题和消息…
阅读更多...
godot--自定义边框/选中时样式 StyleBoxTexture

godot--自定义边框/选中时样式 StyleBoxTexture

前提知识&#xff1a; stylebox就像一个贴图&#xff0c;把图案贴到控件是。多个stylebox同时生效的话&#xff0c;那当然也有层级之分&#xff0c;上层覆盖下层&#xff08;可以设置透明度来显示下层&#xff09; 关于主题的概念&#xff1a; godot——主题、Theme、StyleB…
阅读更多...
PCB+SMT线上报价系统+PCB生产ERP系统自动化拼板模块升级

PCB+SMT线上报价系统+PCB生产ERP系统自动化拼板模块升级

PCB生产ERP系统的智能拼版技术&#xff0c;是基于PCB前端报价系统获取到的用户或市场人员已录入系统的板子尺寸及set参数等&#xff0c;按照最优原则或利用率最大化原则自动进行计算并输出拼版样式图和板材利用率&#xff0c;提高工程人员效率&#xff0c;减少板材的浪费。覆铜…
阅读更多...
去中心化联邦学习与TinyML联合调查：群学习简介

去中心化联邦学习与TinyML联合调查：群学习简介

中英文论文标题&#xff1a; 英文标题&#xff1a;A Joint Survey in Decentralized Federated Learning and TinyML: A Brief Introduction to Swarm Learning中文标题&#xff1a;去中心化联邦学习与TinyML联合调查&#xff1a;群学习简介 作者信息&#xff1a; Evangelia…
阅读更多...
使用Python实现定期从API获取数据并存储到数据库的完整指南

使用Python实现定期从API获取数据并存储到数据库的完整指南

使用Python实现定期从API获取数据并存储到数据库的完整指南 引言 在现代数据驱动的应用程序中，定期从外部API获取数据并存储到本地数据库是一项常见的需求。本文将详细介绍如何使用Python编写一个程序，定期从API获取数据并将其存储到SQLite数据库中。通过这一流程，您将掌握…
阅读更多...
亚马逊正准备推出其最新的人工智能芯片

亚马逊正准备推出其最新的人工智能芯片

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
【学习笔记】数据结构（七）

【学习笔记】数据结构（七）

图 文章目录 图7.1 图的定义和术语7.2 图的存储结构7.2.1 数组表示法 - 邻接矩阵&#xff08;Adjacency Matrix)7.2.2 邻接表 -&#xff08;链式&#xff09;表示法(Adjacency List&#xff09;7.2.3 十字链表(Orthogonal List)7.2.4 邻接多重表(Adjacent MultiList) 7.3 图的遍…
阅读更多...
[编译报错]ImportError: No module named _sqlite3解决办法

[编译报错]ImportError: No module named _sqlite3解决办法

1. 问题描述&#xff1a; 在使用python进行代码编译时&#xff0c;提示下面报错&#xff1a; "/home/bspuser/BaseTools/Source/Python/Workspace/WorkspaceDatabase.py", line 18, in <module>import sqlite3File "/usr/local/lib/python2.7/sqlite3/_…
阅读更多...
最新文章

Copyright @ 2022~2023