setState 不会改变 TextField 的装饰答案

【问题标题】：setState doesn't change decoration of TextFieldsetState 不会改变 TextField 的装饰
【发布时间】：2020-05-25 04:18:51
【问题描述】：

我想在调用onSubmitted方法时改变TextField的装饰，在setState中当我调用我的函数返回InputDecoration时，它不会改变TextField的装饰。

实际上我想检查用户是否正确填写了 TextField，如果没有通过更改 TextField 的装饰来警告他们。

class CustomTextField extends StatefulWidget {
  final TextEditingController controller;
  final IconData icon;
  final String textLabel;
  final TextInputType textInputType;
  CustomTextField(
      this.controller, this.icon, this.textLabel, this.textInputType);
  @override
  _CustomTextFieldState createState() => _CustomTextFieldState();

}

class _CustomTextFieldState extends State<CustomTextField> {
  InputDecoration inputDecoration;
  double a = 0;
  bool b = true;
  @override
  Widget build(BuildContext context) {
    inputDecoration = noramlInputDecoration(context, widget.textLabel, Icon(widget.icon));
    return Container(
      margin: EdgeInsets.only(top: responsiveHeight(context, 0.8)),
      child: TextField(
        onSubmitted: (mahdi) {
          print('adfaf');
          setState(() {
            inputDecoration = noramlInputDecoration(
                context, widget.textLabel, Icon(widget.icon));
          });
          a++;
          print(a);
        },
        decoration: inputDecoration,
        onTap: () {},
        toolbarOptions: ToolbarOptions(
          paste: true,
          copy: true,
          cut: true,
          selectAll: true,
        ),
        cursorWidth: 2,
        style: TextStyle(
            fontSize: responsiveWidthGivenWidth(
                responsiveWidth(context, 81.6) / 10, 53.3),
            height: 0.5),
        controller: widget.controller,
        maxLines: 1,
        obscureText: b,
        showCursor: true,
        textAlign: TextAlign.end,
        textDirection: TextDirection.ltr,
        keyboardType: widget.textInputType,
        inputFormatters: [],
      ),
    );
  }
}

这是我返回 InputDecoration 的两种方法。

InputDecoration errorInputDecoration(
    BuildContext context, IconData icon, String hintText, String errorText) {
  InputDecoration inputDecoration;
  inputDecoration = InputDecoration(
    suffixIcon: Padding(
      padding: EdgeInsets.only(
        right: responsiveWidthGivenWidth(responsiveWidth(context, 81.6), 5.2),
      ),
      child: Icon(
        icon,
        color: blue,
      ),
    ),
    hintText: hintText,
    errorText: errorText,
    errorMaxLines: 2,
    errorStyle: TextStyle(
      color: Colors.red,
    ),
    errorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(50),
      borderSide: BorderSide(
        color: Colors.red,
        width: 2,
      ),
    ),
    focusedErrorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(50),
      borderSide: BorderSide(
        color: Colors.red,
        width: 4,
      ),
    ),
  );
  return inputDecoration;
}

InputDecoration noramlInputDecoration(
    BuildContext context, String hintText, Icon icon) {
  return InputDecoration(
    suffixIcon: Padding(
      padding: EdgeInsets.only(
        right: responsiveWidthGivenWidth(responsiveWidth(context, 81.6), 5.2),
      ),
      child: Icon(
        icon.icon,
        color: blue,
      ),
    ),
    hintText: hintText,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(50),
      borderSide: BorderSide(
        color: Colors.blue[200],
        width: 2,
      ),
    ),
  );
}

【问题讨论】：

setState() 调用构建方法。因此，您在setState 中分配给inputDecoration 的值将被build 第一行中您分配给它的值所覆盖。所以试着把你最初的inputDecoration分配从build移动到build之外的某个地方，最好在initState里面。
哦，我明白了，我按照你说的做了，现在可以了。谢谢

标签： android flutter mobile dart flutter-layout

【解决方案1】：

正如@Ryosuke 在问题的评论中所说，我不应该在 build 方法中使用 setState() ，因为每次调用它都会陷入循环并且总是调用 build() 方法。

【讨论】：