如何制作具有 2 个提示文本的 TextField？

Question

我有 ui 个来自 Figma 的文本字段。

有 2 个提示文本，第一个提示文本位于文本字段的开头，另一个位于文本字段的末尾。

可以看出，尾部是提示文字，当用户输入数字时，它会消失。

如果您有任何想法，请分享如何制作这种文本字段）

Answer 1

试试这个：

TextField(
  textAlign: TextAlign.end,
  decoration: InputDecoration(
    prefixIcon: Padding(
        padding: EdgeInsets.all(15), child: Text('Prefix')),
    border: OutlineInputBorder(),
    hintText: "Cym",
  ),
),

Answer 2

您可以只使用尾随作为提示，您可以使用 onChanged 方法来处理更改。就像您将根据输入行为管理文本一样。例如，如果输入为空，那么您的文本将类似于“A”，如果您输入一些内容，文本将被更改。

TextFormField(
                decoration: InputDecoration(
                    suffix: Text(text)
                ),
                onChanged: (value) {
                  // handle or change your text here
                  if(value.isEmpty){
                    setState(() { text = "A"});
                  }
                  else{
                    setState(() { myState = "any text"});
                  }
                },
              )

如何制作具有 2 个提示文本的 TextField？

How to make TextField which has 2 hintText?

textfield

uitextfield

dart

flutter

textformfield