dart - 在 Flutter 中更改 TextField 装饰 onFocus

Question

我想在它处于聚焦状态时有一个不同fillColor的，而在正常状态下有一个不同的。TextField如何实现这种行为？

同样，是否可以根据状态自定义其他样式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;
  }
}