【问题标题】: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: () {},
        ),
      ),
    ),
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-04-24
      • 1970-01-01
      • 2021-04-10
      • 2018-07-29
      • 1970-01-01
      • 1970-01-01
      • 2023-03-05
      • 1970-01-01
      相关资源
      最近更新 更多