SwiftUI - 基础到实战

SwiftUI - 常用Views / Modifies（一）

2023-02-21  本文已影响0人  Lcr111

前言

从本篇文章开始，我们来学习SwiftUI中常用的Views和Modifies。首先我们需要使用起来，以后有机会再看看比较深层次的知识点。

一、与OC文件的比较

在学习之前，我们来比较一下SwiftUI文件和OC文件所对应的控件添加区块的不同，新建项目，默认Interface选择SwiftUI,Language选择Swift，并且新增一个OC文件，查看之间不一样的地方：

SwiftUI视图添加
OC视图添加
可见，在SwiftUI里面，多了Views（普通视图）和Modifies（修饰视图），左侧列表中包括我们常用的所有视图及容器控件，单击左边列表，右边展示的是介绍及用法，所以一开始不知道怎么使用的话，可以参照右边官方示例学习，或者更简便的是可以直接拖拽进代码里面，会自动生成代码，不妨动手试下吧。
二、启动图设置

SwiftUI里面我们可以直接在TARGETS -- {主项目} -- info文件中直接设置启动图的一些属性样式，其中包括图片，背景颜色等等，我们可以试着设置下启动图片：

启动图设置
或者可以设置一个颜色值，就可以设置启动时候的背景颜色，删除上面添加的启动图，设置Background color：
启动背景颜色1
启动背景颜色2
重启工程，发现启动背景颜色就改成了当前的AccentColor。（拓展：在Assets里面也可以自定义颜色值，当前的AccentColor也可用于项目代码中，类似AccentColor一样自定义一个颜色值，也可用于项目中）

三、常用Views / Modifies

1、Text & Label

Text 更像是OC中的UILabel,而Label更倾向于一个<标签>:

VStack{
       Text("Hello, world!").padding().foregroundColor(Color("nowColor"))
       Label("Label1111", systemImage: "42.circle")
 }

其中nowColor为上方在Assets中自定义的颜色值，显示效果如下：

Text & Label
Text里的字符串可以使用markdown语法，你也可以试试，更多使用： 
//Text
Text("ContentView_Previews").italic()
.frame(width: 180,height: 100,alignment: .center)
.background(Color.red)
//Label
Label {
               //此处可以添加按钮等视图一样可以实现
                Text("我是Label")
            } icon: {
                Circle().stroke(lineWidth: 5).foregroundColor(.red).frame(width: 34,height: 34,alignment: .center).overlay(Text("5"))
            }
2、Button / Link

按钮及按钮点击事件，用法如下：

Button {
                print("tapbTN1")
            } label: {
                Text("button1").foregroundColor(.blue)
            }
            Button(action: {
                print("tapBtn2")
            }) {
                Text("Button2")
            }
            //简单实用
            Button("button3") {
                print("buton3")
            }.foregroundColor(.green).font(.largeTitle)

Link是链接外链的视图：

 Link(destination: URL(string: "https://www.baidu.com")!) {
                Text("Link1")
            }
 Link("Link2", destination: URL(string: "https://www.baidu.com")!)
3、Image / AsyncImage

将Image视图拖进代码，如下：

Image("Image Name") 
//Image("33")

当我们将上文中33写入时，发现图片并不展示，此处有个坑，即此种写法它会去找Assets里面有没有33，上文中图片33是直接拉进来的，所以不展示，那么我们可以用下面方式显示33：

Image(uiImage: .init(named: "33")!)

但官方推荐使用在Assets里面添加图片的方式，写法简单点。
另外注意图片的填充方式：

//撑开屏幕，占满父视图（Vstack）剩余位置，不遵循宽高比(会压缩)
Image(uiImage: .init(named: "33")!).resizable()
//会根据宽高比展示，宽 > 高 以屏幕宽为最大，高 > 宽 以父视图剩余空间撑开，VStack上下撑开
Image(uiImage: .init(named: "66")!).resizable().scaledToFit()
//会根据宽高比展示，宽 > 高 以父视图剩余空间撑开，VStack上下撑开，只展示图片部分内容（会裁剪）， 高 > 宽 以屏幕最大宽度，按宽高比展示图片部分内容（会裁剪）
Image(uiImage: .init(named: "88")!).resizable().scaledToFill()

WWDC21 新出的AsyncImage类似我们OC中的三方库SD_WebImage,

AsyncImage(url: URL.init(string: "https://img1.baidu.com/it/u=333716107,1538170532&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=488")) { img in
                img.resizable()
            } placeholder: {
                ProgressView()
            }.frame(width: 120,height: 200)

其中img.resizable()不可省略，不写的话，不能展示，即不写的话就是没有对加载结果图片做显示操作。

4、TimelineView / Canvas

TimelineView：按计划地去更新View。比如多久刷新一次View,也可以设定开始日期然后以怎样的时间间隔去刷新等。

TimelineView(.everyMinute) { context in
                
 }

TimelineView(.periodic(from: Date.now, by: 1.0)) { context in
       Text(context.date.description).font(.largeTitle)
 }

类似我们经常使用的NSTimer定时器，这种用法使用的比较多。

TimelineView(.explicit(...

Canvas:绘制画布，提供一块区域供我们画想画的东西。

Canvas { context, size in
                context.stroke(Path(ellipseIn: CGRect(origin: .zero, size: size)), with: .color(.orange),lineWidth: 5)
            }.frame(width: 100,height: 50).border(.blue,width: 3)
Canvas画布
5、TextEditor / TextField

使用TextEditor时需要指定frame,因为它的布局默认是填充满父视图剩余空间，功能上类似于TextView：

TextEditor(text: .constant("hsjshjhajhjsh")).frame(width: 200,height: 200)

运行在模拟器上，发现键盘输入后，TextEditor上的文字不变，这里需要定义数据@State var string = "okokokok"，用string来装载输入的东西，@State我们此处不去做解释。

TextEditor(text: $string).frame(width: 200,height: 200)

这样才能达到实时显示输入内容。
TextField就是之前一样的输入框，使用如下：

TextField("PlaceHolder", text: $string).textFieldStyle(.roundedBorder).font(.largeTitle).frame(width: 200, height: 50)
                //.focused()光标是否在上面
                //捕捉点击Return 按钮事件
                .onSubmit {
                    print("点击了Return")
                }

.textInputAutocapitalization()设置输入框的英文文字是否大小写：

.border(.red,width: 1)
.cornerRadius(20)
正常思维

此时我们可以使用下面这种方式来给TextField添加边框：

.overlay {
                    RoundedRectangle(cornerRadius: 20).stroke(.red,lineWidth: 10)
                }
添加边框

输入框使用中，我们需要关注键盘的隐藏，需要给界面一个点击事件，例如输入框在一个Vstack中，那需要给这个Vstack 添加点击事件：

.onTapGesture {
            print("tap")
            //热区
            UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
        }

点击Return能隐藏键盘，点击上方区域时，发现点击文字或别的视图显示区域可以隐藏键盘，但是Vstack区域内视图显示区域之外的空白区域不能将键盘隐藏，所以我们还需要给Vstack添加一个热区：

.contentShape(Rectangle())

热区意思就是在这个Vstack区域内的点击都能响应.onTapGesture事件。

6、Picker

一个弹窗选择器（Selecter）控件，代码如下：

enum Person: String{
        case Tom
        case Jim
        case Lily
        case Lucy
    }
    @State var selectedPerson = Person.Lily
    var body: some View {
        VStack {
            Picker(selection: $selectedPerson, label: Text("Picker")) {
                Text("Tom").tag(Person.Tom)
                Text("Jim").tag(Person.Jim)
                Text("Lily").tag(Person.Lily)
                Text("Lucy").tag(Person.Lucy)
            }
            Text("slected Person: \(selectedPerson.rawValue)")
        }
        .padding()
    }
Picker示例
.pickerStyle(.inline)当给Picker改变样式时候，展示的样式截然不同，此处使用.inline就类似.wheel的样式，也可切换着看看.segmented，此种样式就是UIKit里的UISegmentedControll。默认是.menu样式。
（可以试着将Picker单独放在NavigationView中查看.pickerStyle不一样的地方）

拓展 1：SwiftUI中的文本长按选择会出现Copy/Share...弹框，默认是关闭的：

//disabled 关闭 enabled 开启
Text("slected Person").textSelection(.enabled)
Text长按功能
7、ProgressView

进度条ProgressView，

ProgressView(value: 0.5,total: 10,label: {
                //上面文字
                Text("Lcr")
            },currentValueLabel: {
                //下面文字
                Text("Lcr111")
            }).background(.green)

当加上背景颜色之后，感觉视觉效果不是很好（背景色会覆盖进度条上下文字背景），所以个人觉得还是去掉上下文字，保留一条进度条就好，然后另外写上下Text去展示需要展示的数据。
.tint(.red) 设置前面进度条的颜色。
ProgressView()，这种写法默认（.circular）就是小菊花样式，.linear 进度条样式。
上面的进度条改变样式后也可以变成小菊花样式。

ProgressView().progressViewStyle(.circular)
ProgressView().progressViewStyle(.linear)
8、Slider

滑块控件Slider

@State var speed = 0 //当前值
//value当前值,in值的范围0-100,step每次滑动变化值,onEditingChanged监听滑动事件 
//.tint 滑块左侧进度条颜色
Slider(value:$speed,in: 0...100,step: 25,onEditingChanged: { editing in
                print(editing)
            }).tint(.red)

如果需要展示前后的数值文字：

Slider(value: $speed, in: 0...100,step: 25) {
                
            } minimumValueLabel: {
                Text("0")
            } maximumValueLabel: {
                //Text("100")
                Text("\(speed)")
            }

拓展:一个容器（如VStack）里面的字视图最多不能超过10个View

9、Toggle / Stepper

类似OC中的UISwitch,开关控件

@State var toggleStatus = false

Toggle(isOn: $toggleStatus) {
                Text("Toggle")
            }.tint(.clear).colorMultiply(.orange)

Stepper类似购物车加减按钮：

@State var value = 0

Stepper(value: $value, in: 0...9, step: 3) {
                Text("\(value)").font(.largeTitle)
            }

每次增加减少都是以3来计算。

@State var value = 0
    
    let colors:[Color] = [.orange, .red, .gray, .blue, .green, .purple, .pink]
    
    func stepperAction(isIncrement: Bool) {
        value = value + (isIncrement ? 1 : -1)
        if value >= colors.count {value = 0}
        if value < 0 {value = colors.count - 1}
    }

Stepper {
                Text("Value: \(value) Color: \(colors[value].description)").foregroundColor(colors[value]).font(Font.system(.title2).bold())
            } onIncrement: {
                stepperAction(isIncrement: true)
            } onDecrement: {
                stepperAction(isIncrement: false)
            }
Stepper示例

本文学习了一些基本的视图控件的使用，有时间拿起键盘敲起来，动动手加深印象，gogogo!!!

上一篇 下一篇

猜你喜欢

热点阅读