在 Flutter 中更改 TextField 装饰 onFocus

Question

我想 TextField 在聚焦状态和正常状态下有不同的 fillColor。如何实现这种行为？

同理，是否也可以根据TextField的状态自定义其他样式？

编辑：

我的目标是为带有颤动的移动设备实现颜色过渡。

Answer 1

您可以将自己的 FocusNode 对象传递给文本字段的 focusNode 属性。 FocusNode 有 addListener 方法，您可以在其中调用 setState，从而重新呈现您的小部件。

class _ChangingColorsExampleState extends State<ChangingColorsPage> {
  FocusNode _focusNode;

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

  @override
  void initState() {
    super.initState();
    _focusNode = new FocusNode();
    _focusNode.addListener(_onOnFocusNodeEvent);
  }

  _onOnFocusNodeEvent() {
    setState(() {
      // Re-renders
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        backgroundColor: _getAppBarBackgroundColor(),
        title: new Text('Changing Colors'),
      ),
      body: new Container(
        color: _getContainerBackgroundColor(),
        padding: new EdgeInsets.all(40.0),
        child: new TextField(
          style: new TextStyle(color: _getInputTextColor()),
          focusNode: _focusNode,
        )
      ),
    );
  }

  Color _getContainerBackgroundColor() {
    return _focusNode.hasFocus ? Colors.blueGrey : Colors.white;
  }

  Color _getAppBarBackgroundColor() {
    return _focusNode.hasFocus ? Colors.green : Colors.red;
  }

  Color _getInputTextColor() {
    return _focusNode.hasFocus ? Colors.white : Colors.pink;
  }
}

在 Flutter 中更改 TextField 装饰 onFocus

Change TextField decoration onFocus in Flutter

textfield

dart

material-design

google-inbox

flutter