在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ Slider视图的使用非常简单,用户可以在最小值和最大值的范围内,通过拖动滑块进行数值的快速设置, 所以常用于音量调整、播放进度和拍照缩放等场所。 1 import SwiftUI 2 3 struct ContentView : View 4 { 5 //首先添加一个浮点类型的属性,并设置它的初始值为0. 6 //该属性拥有@State绑定包装标记,表示该属性将和滑杆视图进行数据绑定。 7 @State var temperature: Double = 0 8 9 var body: some View 10 { 11 VStack 12 { 13 //添加第一个滑杆视图,并将滑杆视图和temperature属性进行绑定。 14 //当用户调整滑杆时,该属性的值也将同步发生变化。 15 Slider(value: $temperature) 16 //添加第二个滑杆视图,并设置它的数据范围。 17 Slider(value: $temperature, in: -20...40) 18 //添加第三个滑杆视图,并设置它的数据范围。 19 Slider(value: $temperature, in: -20...40) 20 { 21 //添加一个尾随闭包,在闭包语句里打印一条日志信息, 22 //用来显示是否开始或停止拖动滑块。 23 (item) in 24 //当滑块开始拖动时,在控制台输出true 25 //当滑块停止拖动时,在控制台输出false 26 print(item) 27 } 28 29 //创建第四个滑杆视图,并在滑杆的两侧各添加一枚图标,分别代表滑杆的最小值和最大值。 30 //添加一个水平排列视图,作为子视图的容器。 31 HStack 32 { 33 //添加一个图像视图,显示一枚空心的太阳图标。 34 Image(systemName: "sun.max") 35 //在图像视图的右侧,添加一个新的滑杆视图, 36 //除了设置它的数值区域为-20~40,还设置了它的步进值为2 37 Slider(value: $temperature, in: -20...40, step: 2) 38 { (item) in 39 print(item) 40 } 41 //设置它的滑杆颜色,并对该颜色进行反转。 42 .accentColor(.pink).colorInvert() 43 //在滑杆的右侧,也添加一枚实心的太阳图标。 44 Image(systemName: "sun.max.fill") 45 } 46 .padding() 47 48 //添加一个文本视图,用来实时显示temperature属性的值 49 Text("The temperature is \(Int(temperature)).") 50 } 51 //设置垂直排列视图的内边距,使界面元素和屏幕左右两侧保持一定的距离。 52 .padding() 53 } 54 } 55 56 #if DEBUG 57 struct ContentView_Previews : PreviewProvider { 58 59 static var previews: some View { 60 ContentView() 61 } 62 } 63 #endif
|
请发表评论