在 setState 之后 TextField 的 Flutter Cursor 移动到位置 0

标签 flutter dart setstate

每当 TextFields 文本更改时,我都想在文本中显示某些内容:

class _MyPageState extends State<MyPage> {

String name;

@override
  Widget build(BuildContext context) {
      TextEditingController c = new TextEditingController(text: name);
      c.addListener(() {
         setState(() { name = c.text;});
      });
      return Scaffold(
         body: Center(
            child: Column(children: [ 
               Text('Hello, ' + name + '!'),
               TextField(controller: c)
      ])));
  }
}
文本按预期更新,但问题是每次输入字符时,文本字段的光标都会移动到位置 0。

最佳答案

问题是您正在创建一个新的 TextEditingController每次重建小部件时。正在根据输入的每个字符重建小部件。
您只需要移动 TextEditingController在小部件构建功能之外。并且还移动了 c.addListener到小部件的 initState功能。这样TextEditingController只创建一次,监听器只添加一次。
PS:处置小部件时处置您的 Controller 也很好

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  String name = '';
  TextEditingController c = new TextEditingController();

  @override
  void initState() {
    c.addListener(() {
      setState(() {
        name = c.text;
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    c.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Column(children: [
      Text('Hello, ' + name + '!'),
      TextField(controller: c)
    ])));
  }
}

关于在 setState 之后 TextField 的 Flutter Cursor 移动到位置 0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65903355/

相关文章:

dart - Flutter 搜索栏布局问题 BoxConstraints 强制无限宽度

dart - 带有堆栈的Flutter自定义Clipper无法正常工作

canvas - Chop flutter Canvas /渲染框

javascript - 在不改变状态的情况下 react 过滤器方法

javascript - react : set State or set Prop without a Rerender

database - Firebase消息未按命令草稿保存

Flutter 广告导致延迟

flutter + Bloc 6.0.6。 BlocBuilder 的 "builder"回调未提供与 "buildWhen"回调相同的状态

javascript - 无法在 react 中设置状态

flutter - future 结束时移动到新屏幕的最佳方式