SwiftUI教程（三）常用View和Modifiers详细讲解和使用

2024-04-09 17:00:19 阅读数 7227

SwiftUI教程系列文章汇总

本文主要讲述常见的View和Modifiers的认识和使用

主要内容：

常用View

常用Modifiers

1. 介绍

SwiftUI通过View视图搭建界面，使用Modifiers修饰器来修饰视图。系统提供了大量的视图和修饰器，并且还可以让我们自定义修饰器。
既可以手动写，也可以直接拖出到代码区或者预览区。这三种方式的结果都是一样的。

示意图：

view和modifiers

2、Text

显示一行或多行的只读文本视图，可以类似于OC中的label

//1、Text
Text("我是一个Text，**Markdown语法加粗了**").foregroundColor(.red)

可以使用modifiers进行修饰视图。
也可以使用Markdown语法进行修饰

3、Label

Label用户界面项的标准标签，包括图片和标题

//2、Label
VStack {
    //用户界面项的标准标签，由带有标题的图标组成。
    //labelStyle设置label样式
    Label("Lightning", systemImage: "bolt.fill")
    Label("Lightning", systemImage: "bolt.fill")
        .labelStyle(.iconOnly)
    Label("Lightning", systemImage: "bolt.fill")
        .labelStyle(.titleOnly)
    //自定义label样式
    Label("Lightning", systemImage: "bolt.fill")
//                        .labelStyle(.makeBody(RedBorderedLabelStyle))
    
    //多label统一样式
     VStack {
         Label("Rain", systemImage: "cloud.rain")
         Label("Snow", systemImage: "snow")
         Label("Sun", systemImage: "sun.max")
     }
     .labelStyle(.iconOnly)
    
    //组合标签
    Label {
        Text("wenyi")
            .font(.body)
            .foregroundColor(.primary)
        Text("ya")
            .font(.subheadline)
            .foregroundColor(.secondary)
    } icon: {
        Circle()
            .fill(.orange)
            .frame(width: 44, height: 44, alignment: .center)
            .overlay(Text("圆")).foregroundColor(.white)
    }
}

说明：

正常情况包含了图标和标题
也可以设置labelStyle，设置为只显示图标或标题
labelStyle也可以直接设置到外部视图上，可以作用到内部所有的label上
我们还可以给一个label自由组合文本和图标。
上文中自定义一个Label，包含两个文本和一个图标
还可以自定义labelStyle

4、Button

//Button，文字和响应
Button {
    print("button点击响应")
} label: {
    Text("我是按钮")
}

说明：

按钮可以添加action进行响应，进行打印。
还有设置label，label上设置图标和Text。
这里仅设置了Text。

5、Link

通过提供目标URL和标题来创建链接

//Link
Link(destination: URL(string:"https://www.baidu.com/")!) {
    Text("Link")
}
    
Link("View Our Terms of Service",
      destination: URL(string: "https://www.example.com/TOS.html")!)
      
//设置OpenURLAction
Link("Visit Our Site", destination: URL(string: "https://www.example.com")!)
    .environment(\.openURL, OpenURLAction { url in
        print("Open \(url)")
        return .handled
                    })

说明：

destination参数用来设置URL
还需要设置标题用来描述URL
通过设置OpenURLAction覆盖默认的URL打开的方式

6、Image

//直接拿Assets中图片
Image("wy")
    .resizable()
    .aspectRatio(contentMode: .fit)
//                UIImage.init(named: "wy.png")
            
            //加载网络图片
//            AsyncImage.

说明：

直接使用Image就可以拿到图片了，这里只能使用Assets中的图片
如果想要使用文件路径下的图片，需要使用UIImage
网络图片使用AsyncImage，注意要设置占位图片或占位文字，网络图片有可能会失败

7、TimelineView

根据时间表更新的视图

//定义
struct TimelineView<Schedule, Content> where Schedule : TimelineSchedule

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

说明：

两个参数，一个是计划表，一个是执行的内容
在这里时间表是从当前时间，每1秒开始执行一次
执行的内容就是打印当前时间
因此知道个视图可以做定时器使用
可以传入三种参数
1. .everyMinute 每分钟
2. .periodic(from: , by: )从开始时间开始，多久开始更新
3. .explicit(更新次数)

8、Canvas

绘制图形

//Canvas
Canvas { context, size in
    context.stroke(Path(ellipseIn: CGRect(origin: .zero, size: size)),with: .color(.blue), lineWidth: 3)
}.frame(width: 100, height: 50, alignment: .center).border(.red,width: 2)

说明：

Canvas就是一个画布。我们可以对画布进行绘制丰富和动态的2D图形
Canvas将GraphicsContext传递给用于执行即时模式绘图操作的闭包
通过闭包进行绘制，传入两个参数，一个是绘制的内容，一个是绘制的大小
Canvas还传递一个CGSize值，您可以使用它来定制您绘制的内容

使用画布在SwiftUI视图中绘制丰富和动态的2D图形。画布将GraphicsContext传递给用于执行即时模式绘图操作的闭包。画布还传递一个CGSize值，您可以使用它来定制您绘制的内容。例如，你可以使用上下文的stroke(_:with:lineWidth:)命令来绘制一个Path实例:

9、TextEditor

显示可编辑文本界面的控件。相当于UITextView

//TextEditor
TextEditor(text: 
    .constant("Placeholder"))
    .frame(width: 100, height: 30, alignment: .center)

说明：

constant可以设置默认值
frame可以设置TextEditor的宽高，以及对齐方式。

10、TextField

文本输入框

//TextField，预览无法操作
TextField("首字母默认大写", text: $str).frame(width: 100, height: 56, alignment: .center)
    .textInputAutocapitalization(.never)
    //自动纠错
    .disableAutocorrection(true)
//                    .border(.red, width: 1)
//                    .cornerRadius(20)
    .overlay{
        RoundedRectangle(cornerRadius: 20)
            .stroke(.red, lineWidth: 10)
            .padding(-10)
    }
    .onSubmit {
        print("我点击了！")
    }
    
...
.contentShape(Rectangle())//追加热区设置
        .onTapGesture {
                print("tap")
                //热区
                UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
        }

说明：

可以添加.onSubmit来捕获提交事件
点击空白区域收起键盘
设置自动大小写的场景，比如首字母大写，全部大写，全不大写等等
自动纠错默认为false就是会自动纠错
直接设置.border设置圆角，只会设置外部的，不会设置内部的，因此需要手动绘制一个图像进行覆盖
注意“热区”，只要有内容的区域都属于热区(即使这里是空白的)，热区在这里不属于空白区域
因此需要追加热区设置.contentShape(Rectangle())

11、ColorPicker

颜色选择器(UIKit没有)

@State var textColor = Color.red
//ColorPicker
//supportsOpacity是否设置透明度
ColorPicker("picker", selection: $textColor, supportsOpacity: false).font(.largeTitle).foregroundColor(textColor)

说明：

设置Picker的标题，还有设置一个选取器selection
这里拿到的$textColor就是不断刷新的颜色
supportsOpacity是设置是否设置透明度，其实还可以设置Pciker的很多东西

12、Picker

选择器

@State var selectedCity = city.xian

//Picker
Picker(selection: $selectedCity, label: Text("Picker").frame(width: 50, height: 10, alignment: .center)) {
    Text("taiyuan").tag(city.taiyuan)
    Text("xian").tag(city.xian)
    Text("datong").tag(city.datong)
}.border(.orange)
Text("this city is : \(selectedCity.rawValue)")

说明：

$selectedCity就是获取的值
设置多种选择项

13、toolbar

//设置工具栏
NavigationView {
    Text("Hello World!").navigationTitle("navigation")
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Button("Edit") {}
            }
            ToolbarItem(placement: .navigationBarTrailing) {
                Button("back") {}
            }
        }
}

说明：

设置TollbarItem项是每个按钮
有很多样式可以选择
不仅可以用于导航栏，可以用在任意的工具栏中

14、ProgressView

进度条视图

//ProgressView
//                ProgressView(value: /*@START_MENU_TOKEN@*/0.5/*@END_MENU_TOKEN@*/)
ProgressView(value: progress, total: 10, label: {
    Text("WY")
}, currentValueLabel: {
    Text("start")
})
.progressViewStyle(.circular)
Button("加1") {
    progress += 1
}
ProgressView().progressViewStyle(.linear)

}

说明：

进度条颜色的设置.tint(.red)
view的颜色的设置.background(.green)
进度条值的设置，默认是0-1，我们可以也可以设置总数
空进度条的样式，可以直接设置成ProgressView()，此时是加载图，如果需要设置空进度条，就.progressViewStyle(.linear)
.progressViewStyle()就可以设置进度条的样式

15、Slider

滑动块

@State private var isEditing = false
Slider(
        value: $speed,
        in: 0...100,
        step: 5
    ) {
        Text("Speed")
    } minimumValueLabel: {
        Text("0")
    } maximumValueLabel: {
        Text("100")
    } onEditingChanged: { editing in
        isEditing = editing
    }
Text("\(speed)")
        .foregroundColor(isEditing ? .red : .blue)

说明：

滑动时动态获取到的值是value
in是设置滑动范围
step是可以设置整个范围多少等分（可以设置自己的精确度）
onEidtingChanged是滑动时的响应操作
还可以设置最大范围和最小范围显示

16、Togle

切换按钮，相当于UISwitch

Toggle(isOn: $vibrateOnRing) {
    Text("Vibrate on Ring")
}
Toggle("Vibrate on Ring", isOn: $vibrateOnRing)

Toggle就是切换按钮
这两种写法都可以，很简单，最后拿到vibrateOnRing就可以

17、Stepper

当您希望用户在增加或减少值时进行粒度控制时，请使用Stepper控件

//Stepper
Stepper {
    //左侧文本
        Text("Value: \(value) Color: \(colors[value].description)")
    } onIncrement: {//加操作
        incrementStep()
    } onDecrement: {//减操作
        decrementStep()
    }
    .padding(5)
    .background(colors[value])//设置颜色
//设置范围，且默认加减
Stepper(value: $value,
                in: range,
                step: step) {
            Text("Current: \(value) in \(range.description) " +
                 "stepping by \(step)")
        }
            .padding(10)

可以给Stepper设置点击的效果：
默认效果就是进行数值的加减计算，此时需要设置数值的总数和步长
如果自定义效果，就需要设置onIncrement和onDecrement来自定义响应

18、Gradient

图形渐变

代码：

//图形渐变
//角渐变
AngularGradient(gradient: Gradient(colors: [Color.red, Color.blue,.purple,.red]), center: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
    
//椭圆
EllipticalGradient(colors:/*@START_MENU_TOKEN@*/[Color.blue, Color.green]/*@END_MENU_TOKEN@*/, center: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/, startRadiusFraction: /*@START_MENU_TOKEN@*/0.0/*@END_MENU_TOKEN@*/, endRadiusFraction: /*@START_MENU_TOKEN@*/0.5/*@END_MENU_TOKEN@*/)

//线性
LinearGradient(gradient: /*@START_MENU_TOKEN@*/Gradient(colors: [Color.red, Color.blue])/*@END_MENU_TOKEN@*/, startPoint: /*@START_MENU_TOKEN@*/.leading/*@END_MENU_TOKEN@*/, endPoint: /*@START_MENU_TOKEN@*/.trailing/*@END_MENU_TOKEN@*/)
    
//辐射渐变
RadialGradient(gradient: /*@START_MENU_TOKEN@*/Gradient(colors: [Color.red, Color.blue])/*@END_MENU_TOKEN@*/, center: .bottomLeading, startRadius: 100, endRadius: 120)

图形渐变

19、searchable


//创建一个model项
struct ItemModel: Identifiable {
    var id = UUID()
    var name: String
    var detailView: DetailView
}

//创建一个详情View
struct DetailView: View, Identifiable {
    var id = UUID()
    var detail: String
    @State var text = ""
    var body: some View {
        VStack (alignment: .leading){
            Text(detail).font(.largeTitle).foregroundColor(.gray).bold()
                .searchable(text: $text){
                    Text("大同").searchCompletion("大同")
                    Text("太原").searchCompletion("太原")
                    Text("太原").searchCompletion("太原")
                    Text("太原").searchCompletion("太原")
                    Text("太原").searchCompletion("太原")
                }
            Spacer()
        }
       
    }
}

//定义一个数组
let datas: [ItemModel] = [
    ItemModel(name: "太原", detailView: DetailView(detail: "山西省会")),
    ItemModel(name: "西安", detailView: DetailView(detail: "陕西省会")),
    ItemModel(name: "银川", detailView: DetailView(detail: "宁夏省会")),
    ItemModel(name: "西宁", detailView: DetailView(detail: "青海省会")),
    ItemModel(name: "呼和浩特", detailView: DetailView(detail: "内蒙省会")),
    ItemModel(name: "郑州", detailView: DetailView(detail: "河南省会"))
]

//创建一个viewModel，提供了数组项
//并且还有一个filtedItems用来过滤每一项
class ViewModel: ObservableObject {
    
    @Published var allItems: [ItemModel] = datas
    @Published var searchedItem: String = ""
    
    var filtedItems: [ItemModel] {
        searchedItem.isEmpty ? allItems : allItems.filter({ str in
            str.name.lowercased().contains(searchedItem.lowercased())
        })
    }
}

struct ContentView: View {
    @ObservedObject var vm = ViewModel()
    var body: some View {
        NavigationView {
            List {
                ForEach(vm.filtedItems) {item in
                    NavigationLink(item.name, destination:  item.detailView)
                }
            }
            .navigationTitle(Text("搜索页面"))
            .searchable(text: $vm.searchedItem, prompt: "输入您想要搜索的省会名称")
        }
    }
}

说明：

如果给List添加.searchable，必须配合NavigationView
给Text添加搜索框，可以给搜索框添加可选值，还可以给这些值设置响应

20、List

列表，就是OC中的TableView，是对UITableView的包装

List{
    ForEach(todos, id:\.name){ (todo) in
        Text("wenyi")
    }
}

说明：

List里面设置每一项cell
通过ForEach进行循环设置。
每个cell显示一个文本"wenyi".

21、TabView

Tab的View,就是之前的tabbar

//TabView
TabView() {
    Text("Tab Content 1").tabItem {
        Image(systemName: "person")
        Text("Tab Label 1")
    }.tag(1).badge(Text("news"))
    
    Text("Tab Content 2").tabItem {
        Text("Tab Label 2")
    }.tag(2)
}

说明：

这里设置了两项，每项包括自己的文本内容，以及item自身的内容
tabItem可以设置图片和文字。
还可以设置标记.badge

TabView

设置动画效果：

TabView() {
    Text("Tab Content 1").tabItem {
        Image(systemName: "person")
        Text("Tab Label 1")
    }.tag(1).badge(Text("news"))
    
    Text("Tab Content 2").tabItem {
        Text("Tab Label 2")
    }.tag(2)
}.tabViewStyle(.page).background(.orange)

说明：

item只有两个点
此时也可以取消白点(indexDispalyMode: .never)
这里的点如果想要设置图片，也是可以的

22、OnOpenURL

用来跳转页面，通过其他APP进行跳转到当前页面

//OnOpenURL
struct ContentView: View {
    @State var show = true
    @State var tabSelection = 1
    var body: some View {
        TabView(selection: $tabSelection) {
            Text("Tab Content 1").tabItem {
                Image(systemName: "person")
                Text("Tab Label 1")
            }.tag(1).badge(Text("news"))
            
            Text("Tab Content 2").tabItem {
                Image(systemName: "person")
                Text("Tab Label 2")
            }.tag(2)
        }.onOpenURL { url in
            switch url.host {
            case "tab1":
                tabSelection = 1
            case "tab2":
                tabSelection = 2
            default:
                show.toggle()
            }
        }
        .sheet(isPresented: $show) {
            Text("URL参数错误")
        }
    }
}

设置scheme

设置scheme

结果：

结果

说明：

给TabView增加一个跳转连接，可以从外部应用跳转到当前页面
需要在info中设置一下scheme
如果想要删除URL type中的项，可以在Info.plist中删除，而且重新打开XCode
.sheet用来弹出文本视图的弹框进行参数错误提醒

23、interactiveDismissDisab

禁止手势滑动关闭界面,必须加在按钮的后面

Button("Open Sheet") {
    show.toggle()
}
.sheet(isPresented: $show) {
    Button("Close") {
        show.toggle()
    }
    .interactiveDismissDisabled()
}

说明：

给按钮设置禁止手势滑动关闭界面。此时就只能通过返回按钮返回。不能左滑返回了。

24、contextMenu

文本菜单

struct ContentView: View {
    @State var backgroundColor = Color.red
    @State var isShow = true
    var body: some View {
        Text("Hello world~").bold().font(.largeTitle).foregroundColor(.white).background(backgroundColor)
            .contextMenu (isShow ? ContextMenu{
                Button("Red") {
                    backgroundColor = .red
                }
                Button("Green") {
                    backgroundColor = .green
                }
                Button("Blue") {
                    backgroundColor = .blue
                }
                Button {
                    backgroundColor = .yellow
                } label: {
                    Label("yellow", systemImage: "scribble")
                }
            } : nil )
    }
}

说明：

给一个view增加菜单选项
也可以设置是否显示菜单
案例中菜单选项有多个按钮，点击按钮后可以改变背景颜色。
背景颜色设置到文本视图中，所以通过点击菜单选项就可以改变文本视图的背景颜色。

25、Menu

菜单视图，可以嵌套

Menu("Menu") {
    Text("Item1")
    Text("Item2")
    Text("Item3")
    Button("Red") {
        backgroundColor = .red
    }
    Button("Green") {
        backgroundColor = .green
    }
    Button("Blue"){
        backgroundColor = .blue
    }
    Button("Yellow"){
        backgroundColor = .yellow
    }
    Menu("Menu") {
        Text("Item1")
        Text("Item2")
        Text("Item3")
        Button("Red") {
            backgroundColor = .red
        }
        Menu("Menu") {
            Text("Item1")
            Text("Item2")
            Text("Item3")
            Button("Red") {
                backgroundColor = .red
            }
        }
    }
}

说明：

Menu来实现菜单视图，可以设置标题
菜单中可以放文本视图和按钮视图
并还可以再嵌套菜单视图，实现多层级菜单的选择。

26、Form

表单视图

Form和List在使用和现象是没有区别的,底层也是一样的，都是对UItableView的封装，可以看做是分组的List
用于分组数据输入的控件的容器，如在设置或检查器中。

Form {
    Text("item1")
    Text("item2")
    Text("item3")
}

说明：

案例中显示三个视图文本

27、ScrollView

ScrollViewReader { proxy in
    Button("gotoBottom"){
        proxy.scrollTo(90)
    }
    ScrollView(.vertical, showsIndicators: false) {
        VStack(alignment: .center, spacing: 10) {
            ForEach(0..<100) {
                Text("cell \($0)").font(.title)
            }
            .frame(maxWidth:.infinity)
        }
    }
}

说明:

设置方向，可以选择垂直还是水平方向滑动
设置是否显示Indicators
通过代理增加按钮跳转某个cell，此时需要使用ScrollViewReader来实现。
比如这里点击按钮后，可以直接跳转到底90个cell。

28、Alert

//Alert
Button("show Alert") {
    show.toggle()
}
.alert(isPresented: $show) {
    Alert.init(title: Text("title"), message: Text("message"), dismissButton: .cancel())
}
    
Button("show Dialog") {
    show.toggle()
}.confirmationDialog("dialog", isPresented: $show) {
    Button("btn1") {}
    Button("btn2") {}
    Button("btn3") {}
}
}

说明：

这里可以设置多种按钮类型
可以设置点击事件的响应
还可以设置按钮列表，进行选择点击