Question

我有一个简单的Card，其中包含一个FormTextField，只要FormTextField被聚焦，Card的海拔高度就会增加。

我对Flutter还是很陌生，而且我想不出在聚焦FormTextField时如何增加仰角。我已经搜索了文档，但没有发现太多内容。

这是Card小部件

...
Padding(
  padding: EdgeInsets.symmetric(horizontal: 25, vertical: 30),
  child: Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadiusDirectional.circular(10),
    ),
    elevation: 5,
    child: Padding(
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
      child: TextFormField(
        validator: (value) {
          if (value.isEmpty) {
            return 'Text tidak boleh kosong';
          }
          return null;
        },
      ),
    ),
  ),
),
...

我希望当TextFormField被聚焦时，海拔高度将上升到10。我该如何实现？谢谢...

Answer 1

TextFormField具有一个名为focusNode的属性。这是一个有关如何使用它的示例。


class MyClass extends StatefulWidget {
  @override
  _MyClassState createState() => new _MyClassState();
}

class _MyClassState extends State<MyClass> {
  FocusNode _focusA = new FocusNode();
  FocusNode _focusB = new FocusNode();
  int _elevation = 5;

  @override
  void initState() {
    super.initState();
    _focusA.addListener(_onFocusChange);
    _focusB.addListener(_onFocusChange);
  }

  void _onFocusChange(){
    if (_focusA.hasFocus || _focusB.hasFocus)
      setState(() => _elevation = 10);
    else
     setState(() => _elevation = 10);
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 25, vertical: 30),
        child: Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadiusDirectional.circular(10),
          ),
          elevation: _elevation,
          child: Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                child: TextFormField(
                  focusNode: _focusA,
                ),
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                child: TextFormField(
                  focusNode: _focusB,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

当TextFormField聚焦时如何增加卡片的高度？

1 个答案: