Flutter

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) {},
      );
    }

如果没有 focusedBorder 属性请更新

    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 边框仅在聚焦时

Flutter - InputDecoration border only when focused

dart

flutter-layout