SwiftUI-日期显示总结

YungFan

发布于 2024-04-28 07:53:47

1470

发布于 2024-04-28 07:53:47

文章被收录于专栏：学海无涯学海无涯

当 SwiftUI 需要显示日期时，可以有多种选择，下面总结一些常见的使用方式。

选择显示

比较常见的方式是通过日期选择器选择某个日期后显示。代码如下：

import SwiftUI

struct ContentView: View {
    @State private var birthDay = Date()
    
    var body: some View {
        DatePicker(selection: $birthDay, displayedComponents: [.hourAndMinute，.date]) {
            Text("出生日期")
        }
        .environment(\.locale, Locale(identifier: "zh_Hans_CN"))
        .padding()
    }
}

效果如下：

日期选择器.png

选择显示到Text

借助于DateFormatter，首先格式化成需要的日期格式，然后显示。代码如下：

import SwiftUI

struct ContentView: View {
    @State private var selectedDate = Date()
    var formatter: DateFormatter {
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "yyyy-MM-dd hh:mm:ss"
        return dateFormatter
    }

    var body: some View {
        VStack {
            DatePicker(
                selection: $selectedDate,
                displayedComponents: [.hourAndMinute, .date],
                label: { Text("选择日期") }
            )
            .padding()

            Text(formatter.string(from: selectedDate))
        }
    }
}

效果如下：

DateFormatter方式.png

不选择显示到Text

SwiftUI 1.0

SwiftUI 1.0 时 Text 就可以显示日期字符串，而且可以同时使用DateFormatter。代码如下：

import SwiftUI

struct ContentView: View {
    let date = Date()

    var formatter: DateFormatter {
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "yyyy-MM-dd hh:mm:ss"
        return dateFormatter
    }

    var body: some View {
        VStack {
            Text("\(date)")

            Text(formatter.string(from: date))
        }
    }
}

效果如下：

SwiftUI 1.0

SwiftUI 2.0

SwiftUI 2.0 之后，Text 可以直接显示日期，而且支持多种不同的形式。代码如下：

import SwiftUI

struct ContentView: View {
    var date = Date()

    var body: some View {
        VStack {
            Text(date, style: .date)

            Text(date, style: .time)

            Text(date, style: .relative)

            Text(date, style: .offset)

            Text(date.addingTimeInterval(600), style: .timer)

            Text(date.getCurrentTime(), style: .timer)
        }
    }
}

extension Date {
    func getCurrentTime() -> Date {
        let calendar: Calendar = Calendar.current
        let year = calendar.component(.year, from: self)
        let month = calendar.component(.month, from: self)
        let day = calendar.component(.day, from: self)
        let components = DateComponents(year: year, month: month, day: day, hour: 0, minute: 0, second: 0)
        return Calendar.current.date(from: components)!
    }
}

效果如下：

SwiftUI 2.0.gif

SwiftUI 3.0

WWDC21 推出了获取当前日期与格式化日期的新方法，因此 SwiftUI 3.0 之后显示日期更加方便。代码如下：

import SwiftUI

struct ContentView: View {
    var date = Date.now

    var body: some View {
        VStack {
            Text(date.formatted(.dateTime.locale(Locale(identifier: "zh_Hans_CN"))))

            Text(date.formatted(.dateTime.day().locale(Locale(identifier: "zh_Hans_CN"))))

            Text(date.formatted(.dateTime.week().locale(Locale(identifier: "zh_Hans_CN"))))

            Text(date.formatted(.dateTime.weekday().locale(Locale(identifier: "zh_Hans_CN"))))

            Text(date.formatted(.dateTime.weekday(.wide).locale(Locale(identifier: "zh_Hans_CN"))))

            Text(date.formatted(.dateTime.month().locale(Locale(identifier: "zh_Hans_CN"))))

            Text(date.formatted(.dateTime.month(.wide).locale(Locale(identifier: "zh_Hans_CN"))))

            Text(date.formatted(.dateTime.year().locale(Locale(identifier: "zh_Hans_CN"))))

            Text(date.formatted(.dateTime.day().weekday().locale(Locale(identifier: "zh_Hans_CN"))))

            Text(date.formatted(.dateTime.day().weekday().month().locale(Locale(identifier: "zh_Hans_CN"))))

            Text(date.formatted(.dateTime.day().month().year().locale(Locale(identifier: "zh_Hans_CN"))))
        }
    }
}

效果如下：