Flutter 如何在特定条件下更改 TextField 边框

Question

所以我正在尝试创建一个包含文本字段的注册表单。我想要做的是，如果按下 SignUp 按钮并且其中有空字段，那么 TextField 的边框应该从绿色变为红色并且还放一个 TextHint 说 "This field is empty"

我只能看到 TextEditingController，它只控制 TextField 的文本部分。

那么，如何在事件发生后更改 TextField 的边框？

TextField(
  controller: _name,
  decoration: InputDecoration(
    labelText: ' NAME ',
    labelStyle: TextStyle(
      fontFamily: 'Montserrat',
      fontWeight: FontWeight.bold,
      color: Colors.grey),
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.green),
    ),
  ),
),

如果按下按钮后字段为空，我希望绿色变为红色

Answer 1

您必须使用单独的 bool 变量才能这样做。你设置 bool 为 true 是没有数据填充然后它会显示错误。

以下完整代码可能对您有更多帮助。

 TextEditingController _name = TextEditingController();
  bool _validateName = false;
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _name,
              decoration: InputDecoration(
                labelText: ' NAME ',
                errorText: _validateName ? "please enter name" : null,
                labelStyle: TextStyle(
                  fontFamily: 'Montserrat',
                  fontWeight: FontWeight.bold,
                  color: Colors.grey,
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.green),
                ),
              ),
            ),
            RaisedButton(
              child: Text("submit"),
              onPressed: () {
                setState(() {
                  _name.value.text.isEmpty
                      ? _validateName = true
                      : _validateName = false;
                });
              },
            )
          ],
        ),
      ),
    );
  }

Answer 2

对于 borderDecoration 属性我把它变成了一个 var，这样我以后可以将它与三元运算符语法一起使用，以在空或其他情况下提供（布尔）红色下划线。我使用 'enabledBorder' 属性将下划线边框更改为红色。然后我为 "TextHint" 创建了一个 var if empty as 'errorText' 它将出现在文本字段下，或者如果输入有文本则为空。

要使这个模块化，您实际上可以将 'borderDecoration' var 放在另一个文件夹中，然后将其导入此处。

 final _name = TextEditingController();
      final borderDecoration = InputDecoration(
        labelText: ' NAME ',
        labelStyle: TextStyle(
            fontFamily: 'Montserrat',
            fontWeight: FontWeight.bold,
            color: Colors.grey),
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.green),
        ),
      );
      String errorText = '';
      bool redUnderLine = false;

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("title"),
          ),
          body: Column(children: <Widget>[
            SizedBox(height: 20.0),
            TextField(
                controller: _name,
                decoration: redUnderLine
                    ? borderDecoration.copyWith(
                        enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.red)),
                      )
                    : borderDecoration),
            Text(errorText, style: TextStyle(color: Colors.red)),
            SizedBox(height: 20.0),
            RaisedButton(
                onPressed: () {
                  if (_name.value.text.isEmpty) {
                    setState(() => redUnderLine = true);
                    setState(() => errorText = "This field is empty");
                  } else {
                    setState(() => redUnderLine = false);
                    setState(() => errorText = "");
                  }
                },
                child: Text("SignUp"))
          ]),
        );
      }

Flutter 如何在特定条件下更改 TextField 边框

Flutter how to change TextField borders after certain condition

flutter

flutter-widget