如何在flutter中创建固定的Text标签

Question

我想在文本字段上创建一个保持固定位置的标签。我的手机上有一个应用程序，其标签如下所示，我正在尝试设计类似的东西：

如图所示，无论是否有人在字段中输入，标签始终固定在位置上。我在

Customer Contact Field

中输入了“Jay” 使用我当前的代码，标签从字段内开始，然后移动到悬挂在边界处。或者也许颤振是不可能的？

child:TextField(
       decoration: InputDecoration(
       labelText: 'Customer Contact')),

Answer 1

您可以将

Text

和

TextField

添加到

Column

小部件中来实现此目的：

    Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Text('Customer Contact', textAlign: TextAlign.left),
        TextField(
          cursorColor: Colors.white,
          decoration: InputDecoration(hintText: 'Enter here'),
        )
      ],
    );

Answer 2

您应该将所有内容保留在TextField中，以便它可以自动管理验证流程样式。

InputDecoration(
    contentPadding: EdgeInsets.zero,
    label: Container(
        child: Text(
            widget.title,
        ),
    ),
    floatingLabelBehavior: FloatingLabelBehavior.always,
)

Answer 3

我发现上述解决方案存在一些问题。然后，当我点击文本字段时，我会构建一个文本。 您可以在文档中查看更多详细信息。下面的例子几乎就是 ctrl + c ctrl + v

class _MainAppState extends State<MainApp> {
  late FocusNode input;
  @override
  void initState() {
    input = FocusNode();
  }

  @override
  void dispose() {
    // Clean up the focus node when the Form is disposed.
    input.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
      child: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(43),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              GestureDetector(
                onTap: () => input.requestFocus(),
                child: const Text("Texto"),
              ),
              TextField(
                focusNode: input,
              )
            ],
          ),
        ),
      ),
    )));
  }
}