SwiftUI 列表中的可编辑 TextField [英] Editable TextField in SwiftUI List

问题描述

更新:14 个月后，AppKit 发行说明中有这个有趣的说明:

<块引用>

您在选定列表行内编辑的 TextField 现在具有正确的文本前景色.(68545878)

现在，当将 TextField 放入 List 时，TextField 在第一次被选中时会聚焦在单击上，但随后的编辑尝试失败:List 行被选中但 TextField 没有获得焦点.

O/P:

在 beta6 SwiftUI macOS(非 iOS)应用程序中，我需要一个带有可编辑文本字段的 List，但是 列表中的 >TextField 不可编辑.如果我将 List 换成 Form(或只是 VStack)，它工作正常，但我需要它与 List.有什么技巧可以告诉列表使字段可编辑吗?

import SwiftUI结构内容视图:查看{@State var stringField: String = "";var主体:一些视图{List {//如果这是 VStack 或 Form 有效Section(header: Text("Form Header"), footer: Text("Form Footer")) {TextField(第 1 行"，文本:$stringField).environment(\.isEnabled, true)文本字段(第 2 行"，文本:$stringField)文本字段(第 3 行"，文本:$stringField)TextField(第 4 行"，文本:$stringField)文本字段(第 5 行"，文本:$stringField)}}}}

解决方案

Bug Report

我更新了项目以针对 MacOS 应用程序并发现您报告的错误.我已经根据此反馈更新了 Apple，因为它确实似乎是一个错误(欢迎使用测试版).

<块引用>

FB7174245 - 列表中嵌入的 SwiftUI 文本字段不可编辑当目标是 macOS 时

更新

那么下面所有关于状态和绑定的重点是什么?一个变量应该绑定到一个控件.这是一个工作示例.我将保留旧的答案，因为它通过完整的应用程序保存和检索 CoreData 的数据来推进示例.

导入 SwiftUI结构内容视图:查看{@State var field1: String = "";@State var field2: String = "";@State var field3: String = "";@State var field4: String = "";@State var field5: String = "";var主体:一些视图{List {//如果这是 VStack 或 Form 有效Section(header: Text("Form Header"), footer: Text("Form Footer")) {TextField(第 1 行"，文本:$field1).environment(\.isEnabled, true)文本字段(第 2 行"，文本:$field2)TextField(第 3 行"，文本:$field3)TextField(第 4 行"，文本:$field4)TextField(第 5 行"，文本:$field5)}}}}struct ContentView_Previews: PreviewProvider {静态 var 预览:一些视图 {内容视图()}}

<块引用>

顺便说一句 - 这适用于带有 MacOS Catalina 的 Xcode Beta (11M392r) - 10.15测试版 (19A546d).

示例项目

查看这个 示例，其中包含一个可编辑的文本字段，可写入 CoreData，我就是在 Github 上构建.

<块引用>

看看@State 和@Binding 之间的区别，这样你可以从内容视图之外操作数据.(60 秒视频)

struct ContentView:查看{//1.@State var name: String = "";var主体:一些视图{虚拟堆栈{//2.TextField("输入一些文本", text: $name).border(颜色.黑色)文本(输入的文本:")//3.文本(\(名称)")}.填充().font(.title)}}

来源

<块引用>

查看以下答案以了解@State 的适当用例(SO 答案)

UPDATE: 14 months later, there is this intriguing note in the AppKit release notes:

A TextField that you are editing inside a selected List row now has correct text foreground colors. (68545878)

Now when placing a TextField in a List, the TextField becomes focused on click the very first time it is selected, but subsequent editing attempts fail: the List row is selected but the TextField does not gain focus.

O/P:

In a beta6 SwiftUI macOS (not iOS) app, I need to have a List with editable text fields, but the TextFields in the list are not editable. It works fine if I swap out List for Form (or just VStack), but I need it working with a List. Is there some trick to tell the list to make the fields editable?

import SwiftUI

struct ContentView: View {
    @State var stringField: String = ""

    var body: some View {
        List { // works if this is VStack or Form
            Section(header: Text("Form Header"), footer: Text("Form Footer")) {
                TextField("Line 1", text: $stringField).environment(\.isEnabled, true)
                TextField("Line 2", text: $stringField)
                TextField("Line 3", text: $stringField)
                TextField("Line 4", text: $stringField)
                TextField("Line 5", text: $stringField)
            }
        }
    }
}

解决方案

Bug Report

I updated the project to target a MacOS app and found the bug you are reporting. I've updated Apple with this feedback because it indeed does seem to be a bug (Welcome to Beta).

FB7174245 - SwiftUI Textfields embedded in a List are not editable when target is macOS

Update

So what's the point of all the focus on state and binding below? One variable should be bound to a single control. Here is a working example. I'll leave up the older answer as it carries the example forward with a full app saving and retrieving data to/from CoreData.

import SwiftUI

struct ContentView: View {
    @State var field1: String = ""
    @State var field2: String = ""
    @State var field3: String = ""
    @State var field4: String = ""
    @State var field5: String = ""

    var body: some View {
        List { // works if this is VStack or Form
            Section(header: Text("Form Header"), footer: Text("Form Footer")) {
                TextField("Line 1", text: $field1).environment(\.isEnabled, true)
                TextField("Line 2", text: $field2)
                TextField("Line 3", text: $field3)
                TextField("Line 4", text: $field4)
                TextField("Line 5", text: $field5)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

BTW - This works on Xcode Beta (11M392r) with MacOS Catalina - 10.15 Beta (19A546d).

Sample Project

Check out this sample that includes an editable Textfield that writes to CoreData, which I am building on Github.

Take a look at the difference between @State and @Binding so that you can manipulate data from outside of the content view. (60-sec video)

struct ContentView: View {
    // 1.
    @State var name: String = ""
    var body: some View {
        VStack {
            // 2.
            TextField(" Enter some text", text: $name)
                .border(Color.black)
            Text("Text entered:")
            // 3.
            Text("\(name)")
        }
        .padding()
        .font(.title)
    }
}

source

Check out the following answer for the appropriate use-case of @State (SO Answer)

这篇关于SwiftUI 列表中的可编辑 TextField的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！