SwiftUI学习笔记2

// // ContentView.swift // WeatherForeCast // // Created by sakiko on 2026/4/22. // import SwiftUI struct ContentView: View { var body: some View { HStack {//水平排列元素 DayForeCast() DayForeCast() // VStack {//垂直排列元素 // Text(Tue) // Image(systemName: cloud.rain.fill) // .foregroundStyle(Color.blue) // Text(High: 60) // Text(Low: 40) // } // .padding() } } } struct DayForeCast: View { //这里不是Contenview所以看不到以下内容,如果把它写在ContentView里面就可以显示。 var body: some View { VStack {//垂直排列元素 Text(Mon) Image(systemName: sun.max.fill) .foregroundStyle(Color.yellow) Text(High: 70) Text(Low: 50) } .padding() } } #Preview { ContentView() }每个 Xcode 项目都包含一个视图ContentView。将使用一个结构来创建你自己的自定义视图.foregroundStyle(Color.yellow)用于改变前景色如在text下设置将会改变文本的颜色用属性来自定义视图里显示的东西添加字符串布尔值等属性来控制图片的显示。//设置自定义视图样式struct ContentView: View { var body: some View { HStack {//水平排列元素 DayForeCast(day: Mon, high: 36, isRainy: false, low: 28) DayForeCast(day: Tue, high: 34, isRainy: true, low: 29) //初始化器中参数的顺序与它们匹配属性的声明顺序相同因此不能将新参数添加到末尾。 // VStack {//垂直排列元素 // Text(Tue) // Image(systemName: cloud.rain.fill) // .foregroundStyle(Color.blue) // Text(High: 60) // Text(Low: 40) // } // .padding() } } } struct DayForeCast: View { //这里不是Contenview所以看不到以下内容,如果把它写在ContentView里面就可以显示。 let day: String //添加属性存储关于星期几的数据,要给它赋值 let high: Int let isRainy: Bool let low: Int var iconName: String {//创建一个计算属性来判别图片显示 if isRainy {//根据isRainy属性的值返回正确的图标名称 return cloud.rain.fill } else { return sun.max.fill } }修改文本样式Text(day)//day是一个String传进Text里.font(Font.headline)加粗的意思在文本下面加这个就能实现这种效果Font 的下拉列表显示了多种预设的字体样式每种样式都有特定的用途和视觉效果。下面是这些字体样式的简要说明callout: 用于引导信息或说明内容适合在文本较长的情况下使用。 caption: 小号字体通常用于描述性的文本比如图例或辅助文字。 caption2: 更小的描述性字体通常用于内容的次要信息。 default: 使用系统默认的字体样式通常遵循当前设置的系统样式。 footnote: 较小的字体常用于引用或附加说明通常比正文内容小一号。 headline: 通常较粗的字体适合作为标题或重要信息的强调。 largeTitle: 适合用于突出显示的标题比其他类型更大通常用于最上方的页面标题。 subheadline: 用于次要标题或副标题通常比标题小一些。修改字重Text(Low:\(low)℃).fontWeight(Font.Weight.medium).foregroundStyle(Color.secondary)次要系统颜色注意padding用于添加内边距都是加在最下面的。// // ContentView.swift // WeatherForeCast // // Created by sakiko on 2026/4/22. // import SwiftUI struct ContentView: View { var body: some View { HStack {//水平排列元素 DayForeCast(day: Mon, high: 36, isRainy: false, low: 28) DayForeCast(day: Tue, high: 34, isRainy: true, low: 29) //初始化器中参数的顺序与它们匹配属性的声明顺序相同因此不能将新参数添加到末尾。 // VStack {//垂直排列元素 // Text(Tue) // Image(systemName: cloud.rain.fill) // .foregroundStyle(Color.blue) // Text(High: 60) // Text(Low: 40) // } // .padding() } } } struct DayForeCast: View { //这里不是Contenview所以看不到以下内容,如果把它写在ContentView里面就可以显示。 let day: String //添加属性存储关于星期几的数据,要给它赋值 let high: Int let isRainy: Bool let low: Int var iconName: String {//创建一个计算属性来判别图片显示 if isRainy {//根据isRainy属性的值返回正确的图标名称 return cloud.rain.fill } else { return sun.max.fill } } var iconColor: Color { if isRainy { return Color.blue } else { return Color.yellow } }//计算值的代码必须使用return关键字提供值,但是这里也可以移除。 var body: some View { VStack {//垂直排列元素 Text(day)//day是一个String传进Text里 .font(Font.headline) Image(systemName: iconName) .foregroundStyle(iconColor) .font(Font.largeTitle) .padding(5) //用iconName来控制图片显示,图片内容前景色等 //SF Symbols通常与文本一起使用可以使用语义字体名称来调整大小。 //它们同时也会自动适配动态类型随着设备文本大小变化而变化 Text(High:\(high)℃)//这里需要使用插值因为是数字不是字符串 .fontWeight(Font.Weight.semibold) Text(Low:\(low)℃) .fontWeight(Font.Weight.medium)//只是改变粗细不会影响语义意义 .foregroundStyle(Color.secondary) } .padding() } } #Preview { ContentView() }最终效果练习为预报添加更多天数。如果水平空间不足将所有内容包裹在VStack中并在内部将卡片分组到多个HStack容器中——或者考虑使用ScrollView。要水平滚动您需要使用参数例如ScrollView(.horizontal)。创建一个自定义WeekForeCast视图用于显示日期范围和一周的摘要平均最低气温、平均最高气温以及晴雨天数。ScrollView(.horizontal) {//使用水平滚动的 ScrollView主体部分// // ContentView.swift // WeatherForeCast // // Created by sakiko on 2026/4/22. // import SwiftUI struct ContentView: View { var body: some View { VStack{ Text(本周最高气温的平均值为\\(aver_high())℃)//最高气温的平均值 Text(本周最低气温的平均值为\\(aver_low())℃)//最低气温的平均值 Text(晴天数为\\(4)天,雨天数为\\(3)天)}//晴雨天数 .padding() .background(RoundedRectangle(cornerRadius: 5).fill(Color.white)) //对整个卡片的操作 .shadow(radius: 3) VStack{ ScrollView(.horizontal) {//使用水平滚动的 ScrollView HStack{ //水平排列元素 DayForeCast(day: Mon, high: 36, isRainy: false, low: 28) DayForeCast(day: Tue, high: 30, isRainy: true, low: 24) DayForeCast(day: Wed, high: 33, isRainy: false, low: 27) DayForeCast(day: Thu, high: 32, isRainy: true, low: 26) DayForeCast(day: Fri, high: 34, isRainy: false, low: 23) DayForeCast(day: Sat, high: 32, isRainy: true, low: 26) DayForeCast(day: Sun, high: 32, isRainy: false, low: 24) //初始化器中参数的顺序与它们匹配属性的声明顺序相同因此不能将新参数添加到末尾 } .padding()//为 HStack 添加一些内边距 } } } } let high [ 36, 30, 33, 32, 34, 32, 32 ] let low [ 28, 24, 27, 26, 23, 26, 24 ] func aver_high() - Int { let totalhigh high.reduce(0, ) return Int(totalhigh / Int(high.count)) } func aver_low() - Int { let totallow low.reduce(0, ) return Int(totallow / Int(low.count)) } #Preview { ContentView() }DayForeCast// // DayForeCast.swift // WeatherForeCast // // Created by sakiko on 2026/4/22. // import SwiftUI struct DayForeCast: View { //这里不是Contenview所以看不到以下内容,如果把它写在ContentView里面就可以显示。 let day: String //添加属性存储关于星期几的数据,要给它赋值 let high: Int let isRainy: Bool let low: Int var iconName: String {//创建一个计算属性来判别图片显示 if isRainy {//根据isRainy属性的值返回正确的图标名称 return cloud.rain.fill } else { return sun.max.fill } } var iconColor: Color { if isRainy { return Color.blue } else { return Color.yellow } }//计算值的代码必须使用return关键字提供值,但是这里也可以移除。 var body: some View { VStack {//垂直排列元素 Text(day)//day是一个String传进Text里 .font(Font.headline) Image(systemName: iconName) .foregroundStyle(iconColor) .font(Font.largeTitle) .padding(5) //用iconName来控制图片显示,图片内容前景色等 //SF Symbols通常与文本一起使用可以使用语义字体名称来调整大小。 //它们同时也会自动适配动态类型随着设备文本大小变化而变化 Text(High:\\(high)℃)//这里需要使用插值因为是数字不是字符串 .fontWeight(Font.Weight.semibold) Text(Low:\\(low)℃) .fontWeight(Font.Weight.medium)//只是改变粗细不会影响语义意义 .foregroundStyle(Color.secondary) } .padding() .background(RoundedRectangle(cornerRadius: 10).fill(Color.white)) //对整个卡片的操作 .shadow(radius: 5) } }