SwiftUI学习笔记1

概念教程随便看看https://developer.apple.com/tutorials/swiftui-concepts/exploring-the-structure-of-a-swiftui-appimport SwiftUI struct ContentView: View { var body: some View { VStack { Image(systemName: globe)//这个systemName是一组符号图像库 //SF Symbols 7是需要下载的现在还不知道怎么用地址如下 //https://developer.apple.com/sf-symbols/ .imageScale(.large)//imageScale使图像在视图内按相对大小缩放 //有large,medium,small三种 .foregroundColor(.accentColor) Text(Hello, world!) } .padding() } }foregroundColor(.accentColor)应用语义颜色.accentColor是蓝色这个好像是系统的蓝色.primary是默认颜色.teal又是另一种颜色我觉得应该有一个颜色表.imageScale使图像在视图内按相对大小缩放struct ContentView视图定义了一个或多个出现在屏幕某处的视觉元素。视图通常由其他视图组成形成视图层次结构。第一课imageScale驼峰命名法单词之间没有空格且每个单词的首字母大写。呃大概知道双击花括号(的一边)可以选择整个括号的内容view-show Library打开库这个.什么的就是修饰符。内边距Padding内边距是指在一个视图的内容与其边界之间的空间。在 SwiftUI 中使用内边距能够提供更好的视觉效果使内容不至于与视图的边缘贴得太近从而提升阅读体验.padding()修饰符在视图边缘以添加额外的空间就是这中间的空格.background修饰符让你可以设置背景的样式并为其赋予形状(in: shape).padding在上面padding在下面预览padding 修饰符会创建一个新的、带填充的视图其周围空余空间并且会受到它之后任何修饰符的影响。如果希望填充区域有背景颜色你必须修改那个填充视图。最左边是实时模式添加阴影(.shadow)改变元素之间的默认间距使用VStack(spacing: 25)struct ContentView: View {//本质上是计算属性 var body: some View {//实现 body 是在 SwiftUI 代码中常见的一种模式 VStack(spacing: 25) {//VStack视图是垂直排列视图 //如果东西少就直接用东西多就考虑用LazyVStack Text(很不高兴为您服务!) .padding() .background(Color.yellow, in: RoundedRectangle(cornerRadius: 8)) .shadow(radius: 3) Text(不欢迎您来) .padding() Text(噔噔噔) } .padding() }RoundedRectangle(cornerRadius: 3))这个应该是圆角的意思后面是圆角度数练习题:展示自己。创建一个名为MyselfInSixWords的项目。使用 Text 视图来显示描述你的六个词语。给每个词语一些内边距和不同的背景颜色。尝试通过将VStack 替换为 HStack 来水平显示这些词语。然后为了额外的挑战混合HStack 和VStack 视图来为你的应用创建不同的布局。你能将一个HStack视图嵌入到 VStack 视图内部或者反过来吗如果你这样做会怎样写好了效果图如下概念教程随便看看https://developer.apple.com/tutorials/swiftui-concepts/exploring-the-structure-of-a-swiftui-appimport SwiftUI struct ContentView: View { var body: some View { VStack { Image(systemName: globe)//这个systemName是一组符号图像库 //SF Symbols 7是需要下载的现在还不知道怎么用地址如下 //https://developer.apple.com/sf-symbols/ .imageScale(.large)//imageScale使图像在视图内按相对大小缩放 //有large,medium,small三种 .foregroundColor(.accentColor) Text(Hello, world!) } .padding() } }foregroundColor(.accentColor)应用语义颜色.accentColor是蓝色这个好像是系统的蓝色.primary是默认颜色.teal又是另一种颜色我觉得应该有一个颜色表.imageScale使图像在视图内按相对大小缩放struct ContentView视图定义了一个或多个出现在屏幕某处的视觉元素。视图通常由其他视图组成形成视图层次结构。第一课imageScale驼峰命名法单词之间没有空格且每个单词的首字母大写。呃大概知道双击花括号(的一边)可以选择整个括号的内容view-show Library打开库这个.什么的就是修饰符。内边距Padding内边距是指在一个视图的内容与其边界之间的空间。在 SwiftUI 中使用内边距能够提供更好的视觉效果使内容不至于与视图的边缘贴得太近从而提升阅读体验.padding()修饰符在视图边缘以添加额外的空间就是这中间的空格.background修饰符让你可以设置背景的样式并为其赋予形状(in: shape).padding在上面padding在下面预览padding 修饰符会创建一个新的、带填充的视图其周围空余空间并且会受到它之后任何修饰符的影响。如果希望填充区域有背景颜色你必须修改那个填充视图。最左边是实时模式添加阴影(.shadow)改变元素之间的默认间距使用VStack(spacing: 25)struct ContentView: View {//本质上是计算属性 var body: some View {//实现 body 是在 SwiftUI 代码中常见的一种模式 VStack(spacing: 25) {//VStack视图是垂直排列视图 //如果东西少就直接用东西多就考虑用LazyVStack Text(很不高兴为您服务!) .padding() .background(Color.yellow, in: RoundedRectangle(cornerRadius: 8)) .shadow(radius: 3) Text(不欢迎您来) .padding() Text(噔噔噔) } .padding() }RoundedRectangle(cornerRadius: 3))这个应该是圆角的意思后面是圆角度数练习题:展示自己。创建一个名为MyselfInSixWords的项目。使用 Text 视图来显示描述你的六个词语。给每个词语一些内边距和不同的背景颜色。尝试通过将VStack 替换为 HStack 来水平显示这些词语。然后为了额外的挑战混合HStack 和VStack 视图来为你的应用创建不同的布局。你能将一个HStack视图嵌入到 VStack 视图内部或者反过来吗如果你这样做会怎样写好了效果图如下import SwiftUI struct ContentView: View { var body: some View { VStack { Image(systemName: globe) .imageScale(.large) .foregroundStyle(.tint) .padding() .background(Color.white) .padding() Text(Hello, world!) .background(Color.mint, in: RoundedRectangle(cornerRadius: 5)) } HStack { Text(SilverWolf) .background(Color.blue) .padding() Text(FeiYing) .background(Color.pink) .padding() } HStack { Text(Sparxie) .background(Color.red) .padding() Text(YaoGuang) .background(Color.accentColor) .padding() Text(HuanYu) .background(Color.purple) .padding() } } } #Preview { ContentView() }import SwiftUI struct ContentView: View { var body: some View { VStack { Image(systemName: globe) .imageScale(.large) .foregroundStyle(.tint) .padding() .background(Color.white) .padding() Text(Hello, world!) .background(Color.mint, in: RoundedRectangle(cornerRadius: 5)) } HStack { Text(SilverWolf) .background(Color.blue) .padding() Text(FeiYing) .background(Color.pink) .padding() } HStack { Text(Sparxie) .background(Color.red) .padding() Text(YaoGuang) .background(Color.accentColor) .padding() Text(HuanYu) .background(Color.purple) .padding() } } } #Preview { ContentView() }