Question

我正在尝试设计一个自定义TextFormField，并且一切正常，只是我只需要在聚焦TextFormField（有人轻敲它）时显示边框。

由于我认为不可能改变边框的颜色，但是在我看来，只能通过主题的hintColor来设置该颜色。但是由于hintColor也改变了提示的颜色，因此我无法使用显示的文本。

final theme = Theme.of(context);

return new Theme(
  data: theme.copyWith(primaryColor: Colors.blue),
  child: TextFormField(
    autocorrect: false,
    style: TextStyle(color: Colors.green),
    decoration: new InputDecoration(
      fillColor: Colors.white,
      filled: true,
      contentPadding:
          EdgeInsets.only(bottom: 10.0, left: 10.0, right: 10.0),
      labelText: title,
    ),
    validator: this.validator,
    onSaved: (String newValue) {
      setMethod(newValue);
    },
  ),
);

有人知道如何解决此问题吗？

Answer 1

有一个名为focusedBorder的属性，您可以根据需要使用和更改它，还可以将默认边框设置为InputBorder.none，例如：

  @override
    Widget build(BuildContext context) {
      return TextFormField(
        autocorrect: false,
        focusNode: _focusNode,
        style: TextStyle(color: Colors.green),
        decoration: new InputDecoration(
          fillColor: Colors.white,
          border: InputBorder.none,
          focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              borderSide: BorderSide(color: Colors.blue)),
          filled: true,
          contentPadding:
              EdgeInsets.only(bottom: 10.0, left: 10.0, right: 10.0),
          labelText: widget.title,
        ),
        validator: widget.validator,
        onSaved: (String newValue) {},
      );
    }

如果您没有focusBorder属性，请更新

    class MyHomePage extends StatefulWidget {
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Center(
            child: Column(
          children: <Widget>[
            MyCustomTextField(
              title: "Testing 1",
            ),
            MyCustomTextField(
              title: "Testing 2",
            )
          ],
        ));
      }
    }

    class MyCustomTextField extends StatefulWidget {
      final String title;
      final ValueChanged<String> validator;

      MyCustomTextField({this.title, this.validator});

      @override
      _MyCustomTextFieldState createState() => _MyCustomTextFieldState();
    }

    class _MyCustomTextFieldState extends State<MyCustomTextField> {
      var _focusNode = new FocusNode();

      _focusListener() {
        setState(() {});
      }

      @override
      void initState() {
        _focusNode.addListener(_focusListener);
        super.initState();
      }

      @override
      void dispose() {
        _focusNode.removeListener(_focusListener);
        super.dispose();
      }

      @override
      Widget build(BuildContext context) {
        return TextFormField(
          autocorrect: false,
          focusNode: _focusNode,
          style: TextStyle(color: Colors.green),
          decoration: new InputDecoration(
            fillColor: Colors.white,
            border: _focusNode.hasFocus
                ? OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(5.0)),
                    borderSide: BorderSide(color: Colors.blue))
                : InputBorder.none,
            filled: true,
            contentPadding: EdgeInsets.only(bottom: 10.0, left: 10.0, right: 10.0),
            labelText: widget.title,
          ),
          validator: widget.validator,
          onSaved: (String newValue) {},
        );
      }
    }

Flutter-仅在聚焦时才为InputDecoration边框

1 个答案: