如何在编辑其他字段时自动折叠表单中的 DatePicker? [英] How to automatically collapse DatePicker in a form when other field is being edited?

问题描述

我有一个简单的 SwiftUI 视图:

I got a simple SwiftUI view:

import SwiftUI

struct AddItemView: View {
    @State private var title = ""
    @State private var date = Date()

    var body: some View {
        Form {
            Section {
                TextField("Title", text: $title)
                DatePicker(
                    selection: $date,
                    in: Date()...,
                    displayedComponents: .date,
                    label: { Text("Date") }
                )
            }
        }
    }
}

struct AddItemView_Previews: PreviewProvider {
    static var previews: some View {
        AddItemView()
    }
}

我正在努力实现以下目标:
如果 DatePicker 展开(用户点击日期选择器，选择器显示轮子以选择日期)然后开始在 TextField 中输入文本，DatePicker 应自动切换到初始、最小化模式(仅显示标签和选定日期).请看截图.这是股票 Calendar.app 中的一种行为，例如，在创建事件时.

I am trying to achieve the following:
If DatePicker is expanded (user tapped date picker, picker showing wheel to select date) and then starts typing text in TextField, DatePicker should automatically switch to initial, minimized mode (just showing label and selected date). Please take a look at screenshot. This is a behaviour in a stock Calendar.app, for example, when creating events.

感谢任何帮助，谢谢.

推荐答案

这是可能的方法.这个想法是为编辑中的每个事件重置 DatePicker 组件.

Here is possible approach. The idea is to reset DatePicker component for each of events result in editing.

使用 Xcode 11.4/iOS 13.4 测试

Tested with Xcode 11.4 / iOS 13.4

struct AddItemView: View {
    @State private var title = ""
    @State private var date = Date()
    @State private var pickerReset = UUID()

    var body: some View {
        Form {
            Section {
                TitleTextField()

                DatePicker(
                    selection: $date,
                    in: Date()...,
                    displayedComponents: .date,
                    label: { Text("Date") }
                ).id(self.pickerReset)
            }
        }
    }

    private func TitleTextField() -> some View {
        let boundText = Binding<String>(
            get: { self.title },
            set: { self.title = $0; self.pickerReset = UUID() }
        )
        return TextField("Title", text: boundText, onEditingChanged: { editing in
            if editing {
                self.pickerReset = UUID()
            }
        })
    }
}

这篇关于如何在编辑其他字段时自动折叠表单中的 DatePicker?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！