web-dev-qa-db-ja.com

Swiftuiリストで編集可能なTextField.

[〜＃〜]更新[〜＃〜]：14ヶ月後、AppKitリリースノートでこの興味深いメモがあります。

選択したリスト行の内部に編集しているテキストフィールドには、正しいテキストの前景色があります。 （68545878）

ここでテキストフィールドをリストに配置すると、テキストフィールドが選択されている初めてクリックすると焦点が当てられますが、後続の編集試行は失敗します。リスト行は選択されますが、TextFieldはフォーカスを取得しません。

O/P：

Beta6 SwiftUI macos（ではなくios）アプリは、編集可能なテキストフィールドを持つListを持つ必要があります。しかし、リスト内のTextFieldは編集できません。 ListのForm（またはVStack）をスワップアウトするとうまく機能しますが、Listで作業する必要があります。フィールドを編集可能にするためにリストに言うことをいくつか教えていますか？

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)
            }
        }
    }
}
 _
swiftuiappkit
17
marcprux

次のコードは、Swiftuiのリストの文字を理解し、代替案を表示するための実験だけです。さまざまな組み合わせからの出力の観察から理解しているのは、リストビューのスタイルは、基礎となるビューのデフォルトの動作を選択できるようにする方法で構成されています。つまり、TextFieldは絶対に異なることを意味します。 TextFieldは、入力できる集束可能な要素です。このフォーカシング変数は、リストビューを一緒に協力するために配線されていません。したがって、デフォルトをフォーカスにします。したがって、TextViewでリストを作成することはできません。しかし、必要な場合は、次の最良のオプションがリストの代わりにScrollViewに表示され、明示的にスタイリングを行います。次のコードと両方の方法を確認してください。

import SwiftUI

struct ContentView: View {
    @State private var arr = ["1","2","3"]
    var body: some View {
        HStack {
            VStack {
                List {
                    ForEach(self.arr.indices, id:\.self) {
                        TextField("", text: self.$arr[$0])
                    }
                }
            }
            .frame(minWidth: 150, maxWidth: .infinity, minHeight: 300, maxHeight: .infinity)
            VStack {
                ScrollView {
                    ForEach(self.arr.indices, id:\.self) {
                        TextField("", text: self.$arr[$0])
                        .textFieldStyle(PlainTextFieldStyle())
                        .padding(2)
                    }
                }
                .padding(.leading, 5)
                .padding(3)
            }
            .background(Color(NSColor.alternatingContentBackgroundColors[0]))
            .frame(minWidth: 150, maxWidth: .infinity, minHeight: 300, maxHeight: .infinity)
        }
    }
}

extension NSTextField {
    open override var focusRingType: NSFocusRingType {
        get { .none }
        set { }
    }
}
 _
2
Nikz Jon

バグレポート

プロジェクトを更新してMacOSアプリをターゲットに更新し、報告しているバグを見つけました。私はこのフィードバックでAppleを更新しました（Buta To Betaへようこそ）。

FB7174245 - リストに埋め込まれたSwiftui TextFieldsは、ターゲットがMacOSの場合は編集不可です。

アップデート

それで、状態のすべての焦点と下の拘束力の先の点は何ですか？ 1つの変数は単一のコントロールにバインドする必要があります。これが 動作例 です。私はそれが完全なアプリの保存とコルサタへのデータを保存して取得することで、より古い答えを残します。

_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 - これはMacOS Catalina - 10.15ベータ（19A546D）でXcode Beta（11M392R）で動作します。

サンプルプロジェクト

これをチェックしてください sample githubで構築しているCoreDataに書く編集可能なテキストフィールドを含めます。

コンテンツビューの外部からデータを操作できるように、@stateと@bindingの違いを見てください。 （ 60秒ビデオ ）

_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

@stateの適切なユースケースについて次の答えをチェックしてください（ so答え ）

2
Tommie C.

Swiftui 2.0

編集可能なテキストフィールドを取得するには、リスト内のTextFieldの代わりにTextEditorを使用できます。

_TextEditor(text: $strings)
    .font(.body)
    .cornerRadius(5)
    .shadow(color: Color.black.opacity(0.18), radius: 0.8, y: 1)
    .frame(height: 20)
_

このようにして、TextEditorとTextFieldの間に同様の側面が得られます。

0
AlbertUI