Flutter TextFormField：在输入字段左侧对齐文本描述答案

【问题标题】：Flutter TextFormField: Align text description on left of entry fieldFlutter TextFormField：在输入字段左侧对齐文本描述
【发布时间】：2020-01-31 14:20:25
【问题描述】：

美好的一天，我正在 Flutter 中创建 TextFormFields，但我有点沮丧，因为我不能在 STAYS 的输入输入左侧有文本。

当您输入该字段时，hintText 会消失。

prefixText 仅在您输入字段后出现。

prefixIcon 完全符合我的要求，但我想要 Text 而不是图标。

上图使用了prefixIcon和hintText。

有没有人建议如何用永久文本替换我目前拥有的图标？感谢您的所有帮助。

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

尝试在装饰中使用prefixText 属性。

TextField(
   controller: _textController,
   keyboardType: TextInputType.number,

   decoration: InputDecoration(            
     hintText: 'Enter a valid ZIP-Code',
     errorText: _hasInputError ? "ZIP-Code is too short" : null,
     counterText: _textController.text.length.toString(),
     helperText: "ZIP-Code of shipping destination",
     labelText: "ZIP-Code",
     prefixText: "DE - ",
     suffixIcon: Icon(Icons.airport_shuttle), 
   ),
),

参考这个link

我认为在使用decoration 时不能使用prefixIcon。

【讨论】：

正如我的问题中提到的，prefixText 只有在您单击输入表单后才会出现。这无助于用户事先了解他们应该输入的内容。不过谢谢你的建议。

【解决方案2】：

prefixIcon 接受 Widget 类型，因此您可以根据需要将 Widget 传递给它

TextFormField(        
  controller: _passwordController,
  decoration: InputDecoration(
    hintText: "Password",
    prefixIcon: CircleAvatar(
      backgroundImage: NetworkImage(kDefaultProfilePicture),
    ) // You can replace this with a Text("") widget,
    suffixIcon: IconButton(
      icon: Icon(Icons.visibility),
      onPressed: () {},
    ),
  ),
),

【讨论】：