Question

如何自定义TextFormField标签动画？ InputDecoration没有提供设置固定字体大小或任何其他不同动画的方法。

我只想从提示位置到标签设置动画，而不缩小字体。另外，尽管我可以覆盖FocusNode侦听器，但是如果我覆盖字体颜色属性，则当焦点对准字段时它不会改变。

无论如何，有人知道一种简单的方法来提供我自己的自定义动画，或者至少对其稍作调整，而不必从头开始重新创建自定义表单字段吗？

谢谢。

Answer 1

实际上，您可以使用FocusNode状态来自定义浮动标签字体大小和浮动标签文本颜色。根据焦点状态，可以强制浮动标签字体大小看起来像与提示保持相同。这是一个演示此情况的简单示例，

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  FocusNode myFocusNode = new FocusNode();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Test'),
            ),
            body: Container(
                padding: const EdgeInsets.all(20.0),
                child: TextFormField(
                  focusNode: myFocusNode,
                  decoration: new InputDecoration(
                      alignLabelWithHint: true,
                      labelStyle: TextStyle(
                          fontSize: myFocusNode.hasFocus ? 24 : 18.0,//I believe the size difference here is 6.0 to account padding
                          color:
                              myFocusNode.hasFocus ? Colors.blue : Colors.grey),
                      labelText: 'Hint text',
                      filled: true,
                      fillColor: Colors.white,
                      enabledBorder: new OutlineInputBorder(
                        borderRadius: new BorderRadius.circular(25.0),
                        borderSide: new BorderSide(
                          color: Colors.grey,
                        ),
                      ),
                      focusedBorder: new OutlineInputBorder(
                          borderRadius: new BorderRadius.circular(25.0),
                          borderSide: new BorderSide(
                            color: Colors.blue,
                          ))),
                  style: new TextStyle(color: Colors.black),
                ))));
  }
}

希望这会有所帮助。

如何自定义TextFormField标签动画？

1 个答案: