时间戳

首页 > 解决方案 > 如何从 TextField 小部件的内容创建字符计数器

flutter - 如何从 TextField 小部件的内容创建字符计数器

问题描述

您好，我是新来的，我正在尝试在 textField 小部件下方创建一个字符计数器。这是我当前的代码

TextField(
  maxLines: 3,
  controller: _cancellationReasonCtrl,
  decoration: InputDecoration(
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color:primaryColor
      )
    ),
    labelText: "type minimum 30 characters"
  ),
)

这就是我显示数字的方式

Text((30 - _cancellationReasonCtrl.text.length).toString()+" character left")

但是当我更改文本字段的内容时它不会更新数字

标签： flutterstate

解决方案

只有当您更改变量并调用 setState 时，Flutter 才会更新 UI。

因此，您应该执行以下操作：

setState( () {
   Text((30 - _cancellationReasonCtrl.text.length).toString()+" character left")
}):

阅读更多关于状态的信息：https ://api.flutter.dev/flutter/widgets/State/State.html

推荐阅读