美文网首页
SwiftUI Picker DatePicker

SwiftUI Picker DatePicker

作者: yytmzys | 来源:发表于2023-06-13 22:48 被阅读0次

    用于从一组互斥值中进行选择的控件。

    选择器样式根据其祖先进行更改,在 Form 或 List 下,它显示为单个列表行,您可以点击它以进入一个显示所有可能选项的新屏幕。

    @State private var selection: Int = 2
    
    NavigationView {
              Form {
                  Section {
                    Picker(selection: $selection, label: Text("Picker Name") , content: {
                      Text("Value 1").tag(0)
                      Text("Value 2").tag(1)
                      Text("Value 3").tag(2)
                      Text("Value 4").tag(3)
                    })
    //                .pickerStyle(.inline)
                  }
              }
          }
    
    截屏2023-06-14 22.17.56.png

    不同风格 .pickerStyle(.inline), 打开注释是展开样式 截屏2023-06-14 22.22.05.png

    截屏2023-06-14 22.25.52.png

    DatePicker, 用于选择日期的控件。

    日期选择器样式也会根据其祖先而改变。 在 Form 下或List,它显示为单个列表行,您可以点击以展开日期选择器(就像日历应用程序一样)。

    @State var selectedDate = Date()
    
    var dateClosedRange: ClosedRange<Date> {
        let min = Calendar.current.date(byAdding: .day, value: -1, to: Date())!
        let max = Calendar.current.date(byAdding: .day, value: 1, to: Date())!
        return min...max
    }
    
    NavigationView {
        Form {
            Section {
                DatePicker(
                    selection: $selectedDate,
                    in: dateClosedRange,
                    displayedComponents: .date,
                    label: { Text("Due Date") }
                )
            }
        }
    }
    
    截屏2023-06-14 22.28.43.png

    在Form和List之外,它显示为普通的滑动选择器

    @State var selectedDate = Date()
    
    var dateClosedRange: ClosedRange<Date> {
        let min = Calendar.current.date(byAdding: .day, value: -1, to: Date())!
        let max = Calendar.current.date(byAdding: .day, value: 1, to: Date())!
        return min...max
    }
    
    DatePicker(
        selection: $selectedDate,
        in: dateClosedRange,
        displayedComponents: [.hourAndMinute, .date],
        label: { Text("Due Date") }
    )
    
    截屏2023-06-14 22.30.55.png

    如果你的 DatePicker 的标签只是纯 Text 你可以使用这个更简单的声明进行初始化。

    DatePicker("Due Date",
                selection: $selectedDate,
                in: dateClosedRange,
                displayedComponents: [.hourAndMinute, .date])
    

    如上图

    minimumDatemaximumDate 可以使用 ClosedRange, PartialRangeThrough,和 PartialRangeFrom.

    DatePicker("Minimum Date",
        selection: $selectedDate,
        in: Date()...,
        displayedComponents: [.date])
    DatePicker("Maximum Date",
        selection: $selectedDate,
        in: ...Date(),
        displayedComponents: [.date])
    
    截屏2023-06-14 22.35.29.png

    相关文章

      网友评论

          本文标题:SwiftUI Picker DatePicker

          本文链接:https://www.haomeiwen.com/subject/mnqhydtx.html