SwiftUI -日期处理

也许你可以帮我解决以下问题:

我正在编程一个UI与两个日期选择器(startDatePicker和endDatePicker)。

当startEndPicker的日期小于endDatePicker的日期时，startDatePicker应该在UI中将自己更新为endDatePicker的日期。

你知道我是怎么做到的吗?

content.swift

import SwiftUI
struct ContentView: View {

@State var startDate = Date()
@State var endDate = Date()

@ObservedObject var dateModel = Period.shared

var body: some View {
VStack{
startDatePicker
endDatePicker
}
.onAppear {
//            print("VStack")
//            dateModel.startDate = startDate
//            dateModel.endDate = endDate

}
}

var startDatePicker: some View{

DatePicker("Start", selection: $startDate, displayedComponents: [.date])
.datePickerStyle(CompactDatePickerStyle())
.frame(width: 250, height: 50, alignment: .center)
.onAppear(perform: {
print("StartDate.onAppear")
dateModel.startDate = dateModel.toLocalTime(date: startDate, type: true)
print(dateModel.startDate)
})
.onChange(of: startDate, perform: { startDate in
print("StartDate.onChange")
dateModel.startDate = dateModel.toLocalTime(date: startDate, type: true)
print(dateModel.startDate)
})

}

var endDatePicker: some View{
DatePicker("End", selection: $endDate, displayedComponents: [.date])
.datePickerStyle(CompactDatePickerStyle())
.frame(width: 250, height: 50, alignment: .center)
.onAppear(perform: {
print("EndDate.onAppear")
dateModel.endDate = dateModel.toLocalTime(date: endDate, type: false)
print(dateModel.endDate)
})
.onChange(of: endDate, perform: { endDate in
print("EndDate.onChange")
dateModel.endDate = dateModel.toLocalTime(date: endDate, type: false)
if dateModel.endDate < dateModel.startDate{
print("Error")
dateModel.startDate = dateModel.endDate
}
print(dateModel.endDate)
})
}
}

Datahandler.swift

class Period  : ObservableObject{

static let shared = Period()

@Published var startDate: Date = Date()
@Published var endDate: Date = Date()

func toLocalTime(date : Date, type: Bool) -> Date {

var startDate : Date?
var endDate : Date?
var dateLocalTimezone : Date?

//Auswahl der aktuellen Kalender
let calendar = Calendar.current

//Auswahl der Zeitzone
let timezone = TimeZone.current

//Bestimmen Anzahl Sekunden zwischen Zeitzone und GMT
let seconds = TimeInterval(timezone.secondsFromGMT(for: date))

//Anpassen des eingelesenen Werts
if type == true {

startDate = calendar.date(bySettingHour: 00, minute: 00, second: 00, of: date)
dateLocalTimezone = Date(timeInterval: seconds, since: startDate!)

}else{
endDate = calendar.date(bySettingHour: 23, minute: 59, second: 00, of: date)
dateLocalTimezone = Date(timeInterval: seconds, since: endDate!)
}

return dateLocalTimezone!
}

}

是否有更好的方法来处理代码?我们的想法是将日期部分从UI中分离出来。

你就快成功了。您可以将逻辑从onAppeat移动到init()，从.onChange移动到didSet，如下所示:

struct ContentView: View {
@ObservedObject var dateModel = Period.shared

var body: some View {
VStack{
startDatePicker
endDatePicker
}
}

var startDatePicker: some View{
DatePicker("Start", selection: $dateModel.startDate, displayedComponents: [.date])
.datePickerStyle(CompactDatePickerStyle())
.frame(width: 250, height: 50, alignment: .center)

}

var endDatePicker: some View{
DatePicker("End", selection: $dateModel.endDate, displayedComponents: [.date])
.datePickerStyle(CompactDatePickerStyle())
.frame(width: 250, height: 50, alignment: .center)
}
}
class Period  : ObservableObject{

static let shared = Period()

@Published var startDate: Date {
didSet {
let localTime = Self.toLocalTime(date: startDate, type: true)
if startDate != localTime {
startDate = localTime
}
}
}
@Published var endDate: Date {
didSet {
let localTime = Self.toLocalTime(date: endDate, type: false)
if endDate != localTime {
endDate = localTime
}
if endDate < startDate{
print("Error")
startDate = endDate
}

print(endDate)
}
}

init() {
startDate = Self.toLocalTime(date: Date(), type: true)
endDate = Self.toLocalTime(date: Date(), type: false)
}

static private func toLocalTime(date : Date, type: Bool) -> Date {

var startDate : Date?
var endDate : Date?
var dateLocalTimezone : Date?

//Auswahl der aktuellen Kalender
let calendar = Calendar.current

//Auswahl der Zeitzone
let timezone = TimeZone.current

//Bestimmen Anzahl Sekunden zwischen Zeitzone und GMT
let seconds = TimeInterval(timezone.secondsFromGMT(for: date))

//Anpassen des eingelesenen Werts
if type == true {

startDate = calendar.date(bySettingHour: 00, minute: 00, second: 00, of: date)
dateLocalTimezone = Date(timeInterval: seconds, since: startDate!)

}else{
endDate = calendar.date(bySettingHour: 23, minute: 59, second: 00, of: date)
dateLocalTimezone = Date(timeInterval: seconds, since: endDate!)
}

return dateLocalTimezone!
}

}

您的toLocalTime返回结束日期的错误值，就像我通过2021-08-18 23:59:00 +0000，结果是2021-08-19 23:59:00 +0000，这是第二天。接下来是didSet的递归，但我将把这个逻辑留给您的

来修复。

SO不适合要求"更好的方法"，因为每个解决方案都有其优点和缺点，因此有很多意见。但我想后者是相当巩固的(这本身就是非常固执己见的;))

我想添加一些重构建议:

你可以让DatePickerView成为一个可重用的组件:

struct DatePickerView: View {
let title: String
let date: Date
let setDateAction: (Date) -> Void
var body: some View {
let binding: Binding<Date> = .init {
return self.date
} set: { newValue in
self.setDateAction(newValue)
}
DatePicker(title, selection: binding, displayedComponents: [.date])
.datePickerStyle(CompactDatePickerStyle())
}
}

然后，它可以在ContentView中使用如下:

struct ContentView: View {
let state: TwoDatePickers.ViewModel.ViewState
let setStartDate: (Date) -> ()
let setEndDate: (Date) -> ()
var body: some View {
VStack{
Text("Start: (state.startDate)")
.padding()
Text("End: (state.endDate)")
.padding()
DatePickerView(
title: "Start",
date: state.startDate,
setDateAction: self.setStartDate)
.padding()
DatePickerView(
title: "End",
date: state.endDate,
setDateAction: self.setEndDate)
.padding()
}
}
}

你可能会注意到ContentView没有耦合到任何特定类型的视图模型或模型，也没有任何逻辑。这也是为了使其可重用，并让逻辑在其他地方完成。

现在，您也可以将视图模型和逻辑作为分离的组件来实现。我在这里有点作弊，因为它在内部使用了一个可重用的"store";组件;)

extension TwoDatePickers {
static let store = Oak.Store(state: .init(),
update: update,
scheduler: DispatchQueue.main)

final class ViewModel: ObservableObject {
typealias ViewState = TwoDatePickers.State
init() {
cancellableState = store.sink { state in
self.viewState = self.view(state)
}
}
@Published
private(set) var viewState: ViewState = .init()
private var cancellableState: AnyCancellable!
private func view(_ state: State) -> ViewState { state }
func setStartDate(_ date: Date) {
store.input.send(.setStartDate(date))
}
func setEndDate(_ date: Date) {
store.input.send(.setEndDate(date))
}
}
}

请注意，ViewModel只是一个薄包装器，它连接了存储并提供了一个view函数，该函数从存储状态返回ViewState。ViewState完全且明确地定义了视图应该呈现的内容，而store的State则用于执行逻辑并可能包含其他数据。即ViewState是State的一个函数。

"store"的实现与Redux或Elm非常相似，可以在几行代码中完成。

如前所述，这也是一个可重用组件。它是事件驱动的，单向的，并在内部使用有限状态机来改变状态并生成输出。所以，你必须实现一个update函数，这基本上是你的逻辑的核心:

extension TwoDatePickers {
struct State {
var startDate: Date = Date()
var endDate: Date = Date()
}
enum Event {
case setStartDate(Date)
case setEndDate(Date)
}
typealias Command = Void
static func update(state: State, setter: (State) -> Void, event: Event) -> Void {
switch (state, event) {
case (_, .setStartDate(let date)):
let adjustedEndDate = Date(
timeIntervalSinceReferenceDate: max(
date.timeIntervalSinceReferenceDate,
state.endDate.timeIntervalSinceReferenceDate))
setter(State(startDate: date, endDate: adjustedEndDate))
case (_, .setEndDate(let date)):
let adjustedStartDate = Date(
timeIntervalSinceReferenceDate: min(
date.timeIntervalSinceReferenceDate,
state.startDate.timeIntervalSinceReferenceDate))
setter(State(startDate: adjustedStartDate, endDate: date))
default:
print("not handled: (state), (event)")
break
}
}
}

为了把所有的东西连接在一起，我们可以使用"根视图"。在这里，您可以看到视图模型最终是如何连接到视图的:

struct TwoDatePickersSceneView: View {
@StateObject var viewModel = TwoDatePickers.ViewModel()
var body: some View {
TwoDatePickers.ContentView(
state: viewModel.viewState,
setStartDate: viewModel.setStartDate,
setEndDate: viewModel.setEndDate
)
}
}

剩下的是存储的可重用实现。我把它贴在这里作为奖励:https://gist.github.com/couchdeveloper/4100f1ec8470980c5c49adc119240de1

最终注意:

这是一个例子，我们如何分解一个典型的SwiftUI特性，并把它分成几个可重用的组件。当功能很小且整洁时，您不需要做这些额外的工作。然而，这种解决方案，特别是使用有限状态机来解决UI问题，对于更复杂的问题来说，可伸缩性要好得多。

相关内容

最新更新

热门标签：