如何在 Flutter 中的 TextField 边框上放置提示（占位符）答案

【问题标题】：How to put hint (placeholder) on border of TextField in Flutter如何在 Flutter 中的 TextField 边框上放置提示（占位符）
【发布时间】：2021-11-09 12:10:05
【问题描述】：

我想实现与此行为类似的东西，但我找不到任何东西。

想法是 TextField 有一个常规提示（占位符）。一旦用户开始输入，提示就会转到顶部边框。

【问题讨论】：

标签： flutter user-interface flutter-layout textfield

【解决方案1】：

试试下面的代码希望对你有帮助

声明 TextEditingController

late TextEditingController username;

为 initState 声明控制器并释放状态

@override
  void initState() {
    super.initState();
    username = TextEditingController();
  }

  @override
  void dispose() {
    username.dispose();
    super.dispose();
  }

声明小部件：

 Padding(
              padding: EdgeInsets.all(15),
              child: TextField(
                controller: username,
                decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'City',
                    hintText: 'Enter City Here'),
              ),
            ),

您的屏幕结果 ->

【讨论】：

【解决方案2】：

在 TextField 中使用 labelText 属性并添加装饰

TextField(
    decoration:InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'Label',
    ),
)

【讨论】：