SwiftUI入门+天气的静态网页

SwiftUI入门+天气的静态网页

• 一.SwiftUI知识点
• • 1. 自定义文本视图创建表单
  • 2. 添加导航栏
  • 3. 修改程序状态
  • 4. 状态绑定UI控件
  • 5. 循环创建视图
• 二.天气网页

一.SwiftUI知识点

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

通过 TextField 、 Text 、 Form 组合创建表单， Form 自动优化布局，用 Section 拆分内容，实现结构化展示。

importSwiftUIstructFormDemo:View{@StateprivatevarinputText=""varbody:someView{Form{TextField("请输入内容",text:$inputText)Text("已输入：\(inputText)")}}}#Preview{FormDemo()}

2. 添加导航栏

用 NavigationStack （iOS16+）/ NavigationView 加导航栏，通过 navigationTitle 设标题，适配页面导航需求。

importSwiftUIstructContentView:View{varbody:someView{NavigationStack{Text("表单页面").navigationTitle("我的表单").navigationBarTitleDisplayMode(.inline)}}}

3. 修改程序状态

@State 管理视图临时状态，变量值变化时视图自动刷新，适用于单个视图内的状态存储（如输入内容、开关状态）。

importSwiftUIstructStateDemo:View{@Stateprivatevarcount=0varbody:someView{VStack{Text("计数：\(count)").font(.title)Button("加1"){count+=1}}.padding()}}#Preview{StateDemo()}

4. 状态绑定UI控件

用 $ 符号绑定 @State 变量与UI控件，实现数据实时同步，例： TextField 输入直接更新绑定的变量。

水煮鱼:12-1222:06:06importSwiftUIstructContentView:View{@StateprivatevarinputText=""varbody:someView{TextField("请输入内容",text:$inputText).padding().border(Color.gray)Text("你输入的内容：\(inputText)")}}

5. 循环创建视图

ForEach 遍历数据集合动态生成视图，需指定 id 标识数据，适合重复视图（如列表）的快速创建。

importSwiftUIstructForEachDemo:View{letdata=["内容1","内容2","内容3"]varbody:someView{VStack{ForEach(data,id:\.self){textinText(text)}}}}#Preview{ForEachDemo()}

二.天气网页

importSwiftUIstructContentView:View{varbody:someView{LinearGradient(gradient:Gradient(colors:[Color(#colorLiteral(red:0.2392156869,green:0.6745098233,blue:0.9686274529,alpha:1)),Color(#colorLiteral(red:0.1764705926,green:0.4980392158,blue:0.7568627596,alpha:1))]),startPoint:.top,endPoint:.bottom).edgesIgnoringSafeArea(.all).overlay(VStack(spacing:20){// 顶部：城市+日期VStack{Text("武汉市").font(.system(size:32,weight:.bold)).foregroundColor(.white)Text("2025年12月12日 星期五").font(.system(size:16)).foregroundColor(.white.opacity(0.8))}.padding(.top,50)// 中间：天气图标+温度+天气状态VStack(spacing:15){Image(systemName:"sun.max.fill").resizable().aspectRatio(contentMode:.fit).frame(width:120,height:120).foregroundColor(.yellow)Text("28°").font(.system(size:80,weight:.light)).foregroundColor(.white)Text("晴").font(.system(size:24)).foregroundColor(.white)}.padding(.vertical,30)// 底部：湿度/风速/气压卡片HStack(spacing:25){// 湿度卡片VStack(spacing:8){Text("湿度").font(.system(size:14)).foregroundColor(.white.opacity(0.8))Text("65%").font(.system(size:22,weight:.semibold)).foregroundColor(.white)}.frame(width:80,height:80).background(Color.white.opacity(0.2)).cornerRadius(12)// 风速卡片VStack(spacing:8){Text("风速").font(.system(size:14)).foregroundColor(.white.opacity(0.8))Text("3m/s").font(.system(size:22,weight:.semibold)).foregroundColor(.white)}.frame(width:80,height:80).background(Color.white.opacity(0.2)).cornerRadius(12)// 气压卡片VStack(spacing:8){Text("气压").font(.system(size:14)).foregroundColor(.white.opacity(0.8))Text("1012hPa").font(.system(size:22,weight:.semibold)).foregroundColor(.white)}.frame(width:80,height:80).background(Color.white.opacity(0.2)).cornerRadius(12)}Spacer()})}}structContentView_Previews:PreviewProvider{staticvarpreviews:someView{ContentView().previewDevice(PreviewDevice(rawValue:"iPhone 15 Pro")).previewLayout(.fixed(width:393,height:852))}}