news 2026/6/12 23:02:47

swiftui—4

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
swiftui—4

一、天气app编写静态页面

以下是源代码:

// // ContentView.swift // weather // // Created by 十八 on 2025/12/11. // import SwiftUI struct ContentView: View { @State var degree:Int = 18 @State var isDark = false var body: some View { ZStack { LinearGradient(colors:isDark ? [Color.black,Color.blue]:[Color.blue,Color.white], startPoint: .topLeading,endPoint: .bottomTrailing) .ignoresSafeArea() VStack{ VStack{ Text("武汉") .font(.system(size: 50)) .foregroundStyle(Color.white) .onTapGesture { isDark.toggle() } Image(systemName: "cloud.sun.fill") .renderingMode(Image.TemplateRenderingMode.original) .resizable() .scaledToFit() .frame(width:120,height:120) Text("18°C") .font(.system(size: 40)) .foregroundStyle(Color.white) .onTapGesture { degree -= 1 } } .padding() Spacer().frame(height:72) HStack(spacing:30){ VStack{ Text("周四") Image(systemName: "cloud.fill") .renderingMode(Image.TemplateRenderingMode.original) .resizable() .scaledToFit() .frame(width:30,height:30) Text("15°C") .font(Font.system(size: 15)) .foregroundStyle(Color.white) } VStack{ Text("周五") Image(systemName: "sun.max.fill") .renderingMode(Image.TemplateRenderingMode.original) .resizable() .scaledToFit() .frame(width:30,height:30) Text("22°C") .font(Font.system(size: 15)) .foregroundStyle(Color.white) } VStack{ Text("周六") Image(systemName: "cloud.rain.fill") .renderingMode(Image.TemplateRenderingMode.original) .resizable() .scaledToFit() .frame(width:30,height:30) Text("14°C") .font(Font.system(size: 15)) .foregroundStyle(Color.white) } VStack{ Text("周日") Image(systemName: "cloud.fill") .renderingMode(Image.TemplateRenderingMode.original) .resizable() .scaledToFit() .frame(width:30,height:30) Text("16°C") .font(Font.system(size: 15)) .foregroundStyle(Color.white) } VStack{ Text("周一") Image(systemName: "cloud.sun.fill") .renderingMode(Image.TemplateRenderingMode.original) .resizable() .scaledToFit() .frame(width:30,height:30) Text("18°C") .font(Font.system(size: 15)) .foregroundStyle(Color.white) } } Spacer() HStack(spacing:25){} Button{ }label:{ Text("查看未来7天天气") .bold() .frame(width:200,height:50) .background(.white) .cornerRadius(10) } } } } } #Preview { ContentView() }

以下是效果截图:

左侧为light模式,右侧为dark模式,点击“武汉”即可改变页面

二、其他SwiftUI学习

1.自定义文本试图创建表单

在 SwiftUI 中,可以使用 TextField 或自定义视图来创建表单输入。表单常用 Form 容器包裹。

(1)@State 声明的变量用于存储表单数据,并自动更新 UI。

(2)Form 自动生成分组样式和滚动行为。

(3)TextField 的第二个参数是绑定状态变量 $name,确保数据同步。

import SwiftUI struct CustomFormView: View { @State private var name: String = "" @State private var age: String = "" var body: some View { Form { Section(header: Text("个人信息")) { TextField("请输入姓名", text: $name) TextField("请输入年龄", text: $age) .keyboardType(.numberPad) } } } }

2.添加导航栏

(1)NavigationView 是导航容器,可管理页面堆栈。

(2).navigationTitle("标题") 设置页面标题。

struct CustomFormView: View { @State private var name: String = "" var body: some View { NavigationView { Form { TextField("请输入姓名", text: $name) } .navigationTitle("用户信息") } } }

3.修改程序状态

(1)Toggle 控件绑定 @State 变量,实现开关状态更新。

(2)状态改变时,UI 自动刷新。

struct StatusDemoView: View { @State private var isOn: Bool = false var body: some View { Toggle("开关状态", isOn: $isOn) Text(isOn ? "开" : "关") .foregroundColor(isOn ? .green : .red) } }

4.在循环中创建视图

struct LoopView: View { let fruits = ["苹果", "香蕉", "橘子"] var body: some View { Form { Section(header: Text("水果列表")) { ForEach(fruits, id: \.self) { fruit in Text(fruit) } } } } }

结尾疑问:有没有大佬知道xcode里面模拟器机型怎么修改啊,我试过从device里面找到simulators,在其中添加iPhone14,但是在主页中找不到iPhone14的选项,依旧只能用今年的17系列,但是我的macair会变卡卡的,有没有大佬解惑,55555555

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/10 15:45:08

深度定制:在富文本编辑器中封装实用的 AI 写作助手功能

最近在开发一个多模态AI项目,里面有一个AI写作功能,就是将AI写作辅助功能集成到富文本编辑器中,该功能的交互方式方式灵活多变,需要思考清楚不同的使用场景和提升用户体验,这是实现该功能的难点。本文将深入探讨如何基…

作者头像 李华
网站建设 2026/6/10 5:00:46

React Fiber 架构详解:为什么它能解决页面卡顿问题?

React Fiber 架构详解:为什么它能解决页面卡顿问题?本文从问题与目标、核心数据结构、调度与中断、渲染阶段与提交阶段、优先级与 lanes、并发特性到常见误区与优化建议,全景式拆解 React Fiber,为何它能够显著降低交互卡顿并提升…

作者头像 李华
网站建设 2026/6/12 20:44:26

跨境电商直播带货APP开发要点:多语言、多币种与物流链路设计

过去三年,跨境电商直播的增长速度有目共睹。无论是东南亚市场的爆发、还是中东与拉美市场的迅速扩张,“跨境直播本地履约”的模式正在成为卖家走出去的标配。而要支撑这一套增长逻辑,一个稳定、低延迟、可快速迭代的跨境电商直播带货APP&…

作者头像 李华
网站建设 2026/6/12 9:25:34

mysql与redis缓存一致性问题

先更新数据库,再删除redis 没有试探机制,如果redis删除失败,永久不一致并发问题:删除redis之前,其他线程读取到旧数据 先删除缓存,再更新数据库 没有试探机制,如果数据库更新失败,永…

作者头像 李华
网站建设 2026/6/12 23:57:07

vLLM源码编译与定制化构建:从入门到精通的技术实践指南

vLLM源码编译与定制化构建:从入门到精通的技术实践指南 【免费下载链接】vllm A high-throughput and memory-efficient inference and serving engine for LLMs 项目地址: https://gitcode.com/GitHub_Trending/vl/vllm 在大语言模型推理加速领域&#xff0…

作者头像 李华