Jak podać wartość początkową w polu tekstowym?

163

Chciałbym podać wartość początkową w polu tekstowym i ponownie narysować ją pustą wartością, aby wyczyścić tekst. Jakie jest najlepsze podejście do tego z interfejsami API Fluttera?

Seth Ladd
źródło

Odpowiedzi:

117

(Z listy mailingowej. Nie znalazłem tej odpowiedzi).

class _FooState extends State<Foo> {
  TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = new TextEditingController(text: 'Initial value');
  }

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new TextField(
          // The TextField is first built, the controller has some initial text,
          // which the TextField shows. As the user edits, the text property of
          // the controller is updated.
          controller: _controller,
        ),
        new RaisedButton(
          onPressed: () {
            // You can also use the controller to manipuate what is shown in the
            // text field. For example, the clear() method removes all the text
            // from the text field.
            _controller.clear();
          },
          child: new Text('CLEAR'),
        ),
      ],
    );
  }
}
Seth Ladd
źródło
Myślę, że serwery podpowiedzi mają ten sam cel.
dhuma1981
3
Zastanawiam się tylko, do której listy mailingowej odnosiłeś się w odpowiedzi?
stt106
2
I w jaki sposób dodamy / zastąpimy wartość pola tekstowego do wartości początkowej?
stuckedoverflow
2
Pamiętaj również, aby usunąć _controller w dyspozycji widżetu. Jest zalecane przez Google. Zapewnia zwolnienie zasobów, gdy nie są potrzebne.
Amrit Pal Singh
111

Możesz użyć TextFormFieldzamiast TextFieldi użyć initialValuewłaściwości. na przykład

TextFormField(initialValue: "I am smart")
Sami Kanafani
źródło
2
Z jakiegoś powodu nie mogłem tego użyć z dynamicznym obiektem. Skończyło się na tym, że potrzebowałem kontrolera.
S1r-Lanzelot
7
Jest to poprawne tylko wtedy, gdy kontroler nie jest określony za pomocą TextFormField. docs.flutter.io/flutter/material/TextFormField/…
Alex Fallenstedt
1
@AlexFallenstedt ta właściwość nie jest potrzebna, gdy kontroler jest dostępny
Sami Kanafani
Myślę, że jest to ryzykowne, ponieważ podczas przebudowywania drzewa widżetów tekst można zastąpić wartością początkową.
Gökberk Yağcı
64

Nie musisz definiować osobnej zmiennej w zakresie widżetu, po prostu zrób to w tekście:

TextField(
  controller: TextEditingController()..text = 'Your initial value',
  onChanged: (text) => {},
)
vovaost
źródło
1
Co oznaczają podwójne kropki w „TextEditingController () .. tekst”?
Ray Li
4
@RayLi Nazywa się to operatorem kaskadowym. Aby uzyskać informacje i przykłady, sprawdź tutaj stackoverflow.com/questions/53136945/…
vovaost
1
Dzięki!. To idealne rozwiązanie do dynamicznego tworzenia widżetów z list obiektów :)
davaus
1
To jest to, czego szukałem !! Wielkie dzięki!
TaeJung Shim
4
@vovaost niestety brakuje części do utylizacji.
Chris Rutkowski
33

Jeśli używasz TextEditingController, ustaw na niego tekst, jak poniżej

TextEditingController _controller = new TextEditingController();


_controller.text = 'your initial text';

final your_text_name = TextFormField(
      autofocus: false,
      controller: _controller,
      decoration: InputDecoration(
        hintText: 'Hint Value',
      ),
    );

a jeśli nie używasz żadnego TextEditingController , możesz bezpośrednio użyć initialValue, jak poniżej

final last_name = TextFormField(
      autofocus: false,
      initialValue: 'your initial text',
      decoration: InputDecoration(
        hintText: 'Last Name',
      ),
    );

Aby uzyskać więcej informacji, TextEditingController

Nirav Bhavsar
źródło
Nie jestem pewien, czy dobrym pomysłem jest ustawienie wartości początkowej textwłaściwości zgodnie z dokumentami TextEditingController.textwłaściwości: ustawienie tego spowoduje powiadomienie wszystkich słuchaczy tego TextEditingController, że muszą zaktualizować (wywołuje notifyListeners). Z tego powodu ta wartość powinna być ustawiana tylko między klatkami, np. W odpowiedzi na działania użytkownika, a nie w fazie budowania, układu lub malowania. ( api.flutter.dev/flutter/widgets/TextEditingController/text.html )
Kirill Karmazin,
24

Widziałem tutaj wiele sposobów na zrobienie tego. Myślę jednak, że jest to trochę bardziej wydajne lub przynajmniej zwięzłe niż inne odpowiedzi.

TextField(
   controller: TextEditingController(text: "Initial Text here"),
)
Kent
źródło
najprostsza odpowiedź
Adham
13

Można to osiągnąć za pomocą TextEditingController.

Aby mieć wartość początkową, możesz dodać

TextEditingController _controller = TextEditingController(text: 'initial value');

lub

Jeśli używasz TextFormField, masz tam initialValuenieruchomość. Który zasadniczo zapewnia to initialValuedo kontrolera automatycznie.

TextEditingController _controller = TextEditingController();
TextFormField(
  controller: _controller,
  initialValue: 'initial value'
)

Aby usunąć tekst, możesz użyć _controller.clear()metody.

Debasmita Sarkar
źródło
7

Jeśli chcesz obsłużyć wiele TextInputs zgodnie z pytaniem @MRT w komentarzu do zaakceptowanej odpowiedzi, możesz utworzyć funkcję, która przyjmuje wartość początkową i zwraca TextEditingControllertaką:

initialValue(val) {
  return TextEditingController(text: val);
}

Następnie ustaw tę funkcję jako kontroler dla TextInputi podaj tam jej wartość początkową w następujący sposób:

controller: initialValue('Some initial value here....')

Możesz to powtórzyć dla pozostałych TextInput.

Muaad
źródło
5
TextEdittingController _controller = new TextEdittingController(text: "your Text");

lub

@override
  void initState() {
    super.initState();
    _Controller.text = "Your Text";
    }
seyed ali Aghamali
źródło
3

w klasie,

  final usernameController = TextEditingController(text: 'bhanuka');

Pole tekstowe,

   child: new TextField(
        controller: usernameController,
    ...
)
Strata krwi
źródło
-13

Jeśli nie znalazłeś odpowiedzi na to i dla tych, którzy przyjeżdżają tutaj w poszukiwaniu odpowiedzi: InputDecorationSprawdź podpowiedź do pola Tekst:

new TextField(
  decoration: new InputDecoration(
    hintText:"My Text String."
  ),
...
user693336
źródło
Tekst podpowiedzi nie jest wartością początkową. Gdy użytkownik coś wpisze, to zniknie. Początkowy tekst jest jak wstępne napisanie czegoś dla użytkownika.
Arman Ordookhani
To jest tekst wskazówek, nie inicjator wartości
MRT
3
To prawda, ale jest to dobre dla tych, którzy przyjeżdżają tutaj, szukając tekstu podpowiedzi, ale nie wiedzą, jak to nazwać.
ThinkDigital