企业官网建设流程全解析

一、天气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