setState不会改变TextField的装饰。

Question

我想在调用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,
      ),
    ),
  );
}

Answer 1

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