【问题标题】：TextField with animated hint / label带有动画提示/标签的文本字段
【发布时间】：2019-02-28 11:01:08
【问题描述】：

我想实现一个包含 TextField 的表单。每个字段都有一个标签/提示。当用户开始输入时，我希望提示动画并成为标签。这是一个标准的 Material 设计模式，所以我希望它会被标准的 Widgets 实现。

类似这样的：

【问题讨论】：

标签： flutter flutter-layout flutter-animation

【解决方案1】：

结果很简单。

InputDecoration 有一个 labelText 参数，可以满足我的要求。

例如

TextField(decoration: InputDecoration(labelText: 'Full name')),

【讨论】：

【解决方案2】：

在 Flutter 中，提示和标签都以两种不同的方式表现，hintText 将显示为固定，但 labelText 将（双重作用） 显示为提示当光标聚焦时动画到顶部。

TextField(decoration: InputDecoration
          (
            labelText: "Animatable hint",
            hintText: "Inanimate hint"
          )
)

【讨论】：

我不知道标签是可动画的，而提示不是。 +1

【解决方案3】：

labelText 和 HintText 的区别。

labelText ：显示输入字段顶部的标签，如果它是空的或没有焦点。当它获得焦点时，labelText 移动到输入字段的上方。

hintText：只向用户显示提示。

TextField(decoration: InputDecoration(labelText: 'labelText'),),
TextField(decoration: InputDecoration(hintText: 'hintText'),),
TextField(decoration:InputDecoration(hintText: 'both', labelText: 'both'),),

more information - TextFormField placeholder

【讨论】：

【解决方案4】：

这也是制作自己的方法或小部件的好方法。（因此您可以稍后重用代码）

例子：

//your generator method or you can make your own widget class if you want that.
  Widget _entryField(String title, {bool isPassword = false}) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            title,
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
          ),
          SizedBox(
            height: 10,
          ),
          TextField(
              obscureText: isPassword,
              decoration: InputDecoration(
                //labelText: title ,  // you can change this with the top text  like you want
                hintText: "Please enter your $title" ,
                  border: InputBorder.none,
                  fillColor: Color(0xfff3f3f4),
                  filled: true))
        ],
      ),
    );
  }

==============

编辑：

正如下面@Evin1_ 所提到的。看完这篇文章Splitting widgets to methods is a performance antipattern/Iiro Krankka

我发现最好使用 StatelessWidget 来拆分您的代码和函数，仅用于执行操作。

原因： 这样一来，您就不会因为浪费 CPU 周期而多次重建静态小部件树。

如果您真的更喜欢使用方法构建小部件树，您可能想看看Remi Rousselet 的名为functional_widget 的包。

还有其他 cmets 在此处了解有关此主题的更多信息 difference between functions and classes to create reusable widgets

【讨论】：

这是一个很好的建议，我只想补充一点，我们应该提倡不要使用基于stackoverflow.com/questions/53234825/… 和iiro.dev/2018/12/11/… 的方法来构建小部件
@Evin1_ 谢谢你的提及，我从中学到了很多。