swiftui学习笔记(1)

import SwiftUI
class WordDto {
    var selectedWord:String?
    
}
struct ContentView: View {
    let words = ["morning","noon","evevning"]
    @State private var selectedWord:String?
    let someWord = WordDto()
    
    //使用let报错
    var body: some View {
        //外部设置间隔 .leading
        VStack(alignment: .center,
               spacing: 30) {
            Image("morning")
                .resizable()
                .aspectRatio(contentMode: .fit)
//内部设置间隔
//            Text("学习什么?").font(.largeTitle.italic()).bold()
//                .padding()
//
//            Text(selectedWord ?? "无").font(.largeTitle.italic())
//                .padding()
//
//            Button("请说") {
//                selectedWord = words.shuffled().filter{ $0 != selectedWord }.first
//            }.font(.title).padding()
            //内部设置间隔end
            
            Text("学习什么?").font(.title.italic())
//            //默认显示文字
//            Text(selectedWord ?? "无").font(.largeTitle)
//                .bold().foregroundColor(.green)
//            //默认空文字:只是占位
//            Text(selectedWord ?? "").font(.largeTitle)
//                .bold().foregroundColor(.green)
            
            //通过判断语句决定是否显示控件
            if selectedWord != .none { //if else的作用是构造不同的画面 要注意
                Text(selectedWord ?? "").font(.largeTitle)
                    .bold().foregroundColor(.green)
                    .id(selectedWord)//id表示每个都是不同的控件,每次都是转场动画
                   // .transition(.scale.combined(with: .slide)) //不同的转场效果 类似跑马灯效果滑动效果
//                    .transition(.asymmetric(
//                        insertion: .opacity.animation(.easeInOut(duration: 0.5).delay(0.2)),
//                        removal: .opacity.animation(.easeInOut(duration: 0.4))))
                //注释掉就没有动画了
                //转入转出有不同的时间和延迟时间
                //.animation(.easeInOut, value: selectedWord)
                //动画放在这里不会响应外部的操作
            }
            
//            //增加测试的颜色块 //转场动画
//            if selectedWord != .none {
//                Color.pink
//            }else{
//                Color.blue
//            }
            //和下面语句不同,下面一定有占位符 无论如何都有值 这里是变形动画 是同 一个view
            //和数字有关的就是变形动画
           // selectedWord != .none ? Color.pink : Color.blue
            
            //有label的按钮
            //role:表示按钮的样式风格
                //.none是普通样式; .cancel :和普通样式相同 或没有role参数一样的效果
            //destructive 强调 红色背景:破坏(或毁灭)性的；引起破坏(或毁灭)的
            Button() {
                //明确的动画,也有动画
                withAnimation{
                    selectedWord = words.shuffled().filter{ $0 != selectedWord }.first
                }
                //selectedWord = words.shuffled().filter{ $0 != selectedWord }.first
            } label: {
                //Text("请说").frame(width: 200)
                //有判断条件的文本显示
                Text(selectedWord == .none ? "请说" : "下一个").frame(width: 200)
                    //.background(.yellow)//说明文本的范围,体现淡入淡出
                    //.transformEffect(.init(translationX: 50, y: 0)) //位置移动
                    .transformEffect(.identity) //效果好一些
                    .animation(.none, value: selectedWord)//关闭动画
            }
            // 已经在外层设置字体去掉自身的字体设置 .font(.title)
//                .buttonStyle(.borderedProminent)
//                .buttonBorderShape(.capsule)//按钮的形状:roundedRectangle圆角矩形 capsule胶囊型
//                .controlSize(.large) //和控制器相关的大小,large易于操作
            //.tint(.cyan)
            //背景或者文字是强调色
                .padding(.bottom,-25)//减小和底部控件的距离:底部的距离上-25,上移25
            
//            //简单的按钮
//            Button("请说") {
//                selectedWord = words.shuffled().filter{ $0 != selectedWord }.first
//            }.font(.title).buttonStyle(.borderedProminent).frame(width: 200)
//            //背景或者文字是强调色
//
//            //加重置按钮
//            Button("重置") {
//                selectedWord = .none
//            }.buttonStyle(.borderedProminent)
            
            //重置按钮也用label
            Button() {
                //明确的动画,也有动画
                withAnimation{
                    selectedWord = .none
                }
                //selectedWord = .none
            } label: {
                Text("重置").frame(width: 200)
            }.buttonStyle(.bordered)
               
            //内部设置风格 防止外部覆盖自身的属性
            // 已经在外层设置字体去掉自身的字体设置 .font(.title)
            //屏弊强调风格只有蓝色的文字 .buttonStyle(.borderedProminent)
//            .buttonBorderShape(.capsule)//按钮的形状:roundedRectangle圆角矩形 capsule胶囊型
//            .controlSize(.large) //和控制器相关的大小,large易于操作
        }    //公共的修改器外移
               .frame(maxWidth: .infinity)//infinity宽度无限大?没有效果
               .background(Color(.secondarySystemBackground))//强制设置自身的颜色,作用在本控件的区域
               .buttonStyle(.borderedProminent)
               .buttonBorderShape(.capsule)//按钮的形状:roundedRectangle圆角矩形 capsule胶囊型
               .controlSize(.large)
               .font(.title) //在外层控制包含的控件的字体 .body字体就比较小 外部的设置不会修改内部明确的字体
               .padding()//.padding().padding().padding() //多个修改器的叠加效果
              // .animation(.easeInOut(duration: 0.6), value: selectedWord) //注释掉后内部的动画仍有效 //easeInOut可以有时间可以无时间参数 duration 持续时间 加大时间说明效果
        //动画的位置重要:观察vstack的变化,在vstack加载前开始观察数据的变化,因此放在vstack后面
        
        //动画参数说明------------
        //easeInOut最常使用
        //Equatabl的说明
        / The implementation of the `==` function returns the same value whether its
        ///“==”函数的实现返回相同的值，无论其
        /// two arguments are the same instance or are two different instances with //两个参数是同一个实例，或者是两个不同的实例
        /// the same integer stored in their `value` properties. For example: //存储在其“值”属性中的相同整数。例如：
        ///
        ///     let a = IntegerRef(100)
        ///     let b = IntegerRef(100)
        ///
        ///     print(a == a, a == b, separator: ", ")
        ///     // Prints "true, true"
        ///
        /// Class instance identity, on the other hand, is compared using the //另一方面，类实例标识使用
        /// triple-equals identical-to operator (`===`). For example://三重等于运算符（==）。例如：
        ///     let c = a
        ///     print(c === a, c === b, separator: ", ")
        ///     // Prints "true, false"
        ///
        
        
        //强调色的修改:进入到Assets中选择AccentColor 设置深色和浅色模式的强调色
        //修改之后按钮的颜色随之改变
        //在预览的界面中选择深色、浅色模式看效果
        //背景和文字的颜色也自动切换不同的主题颜色
        
        ///动画:不是同一个view使用转场动画-淡入淡出上下调整位置整个布局内容都跟随移动 是同一个view使用变形动画,自己的文字
        ///
        
        //调整器基本是公用,就是说每个类型的some View都可以使用调整器
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}