在按按钮上更新TextFormField

Question

我有一个初学者问题。 我不明白为什么在此示例中未更新TextFormfield时，请按floatingActionButton。 _ Counter字段在SetState内部增加。文本小部件已按预期更新。
我看到此区别：文本无状态和TextFormfield Statefull小部件。
我该怎么做才能在TextFormfield中显示正确的值？

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Your number:',
            ),
            TextFormField(
              keyboardType: const TextInputType.numberWithOptions(
                signed: false,
                decimal: false,
              ),
              initialValue: (_counter.toString()),
              onChanged: (val) {
                setState(() {
                  _counter = int.parse(val);
                });
              },
            ),
            Text(
              '$_counter',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

谢谢你
QJETA

Answer 1

欢迎使用 Flutter

当 widget 构建时，initialValue 设置值，您需要使用其他东西来更新文本字段。这是按您想要的方式工作的完整代码。

您必须使用 TextEditingController 并删除初始值

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
   MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  TextEditingController myController = TextEditingController();


  @override
  void initState() {
    super.initState();
    myController.text=_counter.toString();
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
      myController.text=_counter.toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Your number:',
            ),
            TextFormField(
              controller: myController..text,
              keyboardType: const TextInputType.numberWithOptions(
                signed: false,
                decimal: false,
              ),
              // initialValue: (_counter.toString()),
              onChanged: (val) {
                setState(() {
                  _counter = int.parse(val);
                });
              },
            ),
            Text(
              '$_counter',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Answer 2

问题：
无法更改“初始值”参数的值

^^

使用texteditingController

 class HomePage extends StatefulWidget {
 const HomePage({Key? key}) : super(key: key);

  @override
 State<HomePage> createState() => _HomePageState();
  }

 class _HomePageState extends State<HomePage> {
   int _counter = 0;

     TextEditingController _textEditingController =new 
   TextEditingController();
  void _incrementCounter() {
     setState(() {
  _counter++;
   });
_textEditingController.text = _counter.toString();
  }

  @override
  Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text("test"),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        const Text(
          'Your number:',
        ),
        TextFormField(
          keyboardType: const TextInputType.numberWithOptions(
            signed: false,
            decimal: false,
          ),
          controller: _textEditingController,
        ),
        Text(
          '$_counter',
        ),
      ],
    ),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: const Icon(Icons.add),
  ),
);
 }
  }