news 2026/7/2 10:54:58

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/7/1 18:15:49

AC6966B蓝牙音箱电路设计完整指南:从原理图到产品生产

AC6966B蓝牙音箱电路设计完整指南:从原理图到产品生产 【免费下载链接】AC6966B蓝牙音箱标准原理图下载分享 AC6966B蓝牙音箱标准原理图下载 项目地址: https://gitcode.com/Open-source-documentation-tutorial/d58d7 AC6966B是杰理公司推出的一款高性能蓝牙…

作者头像 李华
网站建设 2026/7/1 20:49:58

Cesium中实现流光线

概要 Cesium中实现流光线,本质上是在特定的时间改变颜色等属性即可。可以通过MaterialProperty实现,但是它是用在Entity上的,如果要用Primitvie上就得通过自定义的Material实现。要想Material实现会动的效果,需要借助Cesium的一些…

作者头像 李华
网站建设 2026/7/2 4:41:25

Docker部署边缘Agent常见问题解析(避坑指南+性能调优)

第一章:边缘 Agent 的 Docker 轻量级部署概述在物联网与边缘计算快速发展的背景下,边缘 Agent 作为连接终端设备与云端服务的核心组件,其部署效率与资源占用成为关键考量因素。Docker 容器化技术凭借轻量、可移植和隔离性强的优势&#xff0c…

作者头像 李华
网站建设 2026/7/1 0:10:13

轻量文件加密软件推荐:2025 年 5 款不占内存软件实测

在数据安全愈发重要的当下,轻量不占内存的文件加密工具成为刚需。2025 年实测 5 款优质软件,它们兼顾加密强度与运行效率,无需复杂配置即可快速上手,适配个人办公与小型团队协作场景,帮你轻松守护文件隐私,…

作者头像 李华
网站建设 2026/6/30 18:40:55

VSCode中实现量子电路仿真的完整路径(量子开发者的隐藏武器)

第一章:VSCode中实现量子电路仿真的完整路径(量子开发者的隐藏武器)在现代量子计算开发中,VSCode 已成为开发者不可或缺的集成环境。结合强大的扩展生态与开源量子框架,它为构建、仿真和调试量子电路提供了前所未有的便…

作者头像 李华
网站建设 2026/7/1 2:53:58

阿里一面灵魂一问:RPC或者HTTP什么时候需要序列化和反序列化?

有位读者问了,我这么一个问题: 不管是 RPC 或者 HTTP,只要传输的内容是「对象」,要想在接收方还原出一摸一样的「对象」,那就需要序列化和反序列化。 那什么是序列化和反序列化呢? RPC 能帮助我们的应用透明…

作者头像 李华