flutter - 带有动画提示/标签的 TextField

Question

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

像这样的东西：

Answer 1

事实证明这很简单。

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

例如

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

Answer 2

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

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

Answer 3

labelText 和 HintText 之间的区别。

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

hintText：只向用户显示提示。

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

更多信息 - TextFormField 占位符

Answer 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_ 所提到的。阅读本文后将小部件拆分为方法是一种性能反模式/Iiro Krankka

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

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

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

还有其他人评论有关此主题的更多信息here函数和类之间的区别以创建可重用的小部件