Question

所以我试图在有文本字段的地方创建一个SignUp表单。我想做的是，如果按下了“注册”按钮，并且其中有空字段，那么TextField的边框应从绿色变为红色，并且还要输入TextHint空”

我只能看到TextEditingController，它仅控制TextField的Text部分。

那么，说一个事件之后如何更改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”创建了一个变量，如果为空，则为“ 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"))
          ]),
        );
      }

颤抖如何在特定条件后更改TextField边框

2 个答案: