在 Flutter 中对齐多行 TextField 中的提示文本

Posted 2023-02-23

【中文标题】在 Flutter 中对齐多行 TextField 中的提示文本

【英文标题】：Align hint text in multiline TextField in Flutter

【发布时间】：2020-11-25 23:59:07

【问题描述】：

我有一个带有前缀图标的多行文本字段，所以现在图标位于垂直中心，提示文本位于左上角。我希望它们都对齐，无论是在顶部还是在垂直中心。

使用的代码是

    Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10.0),
          child: TextField(
            maxLines: 3,
            decoration: InputDecoration(
              hintText: 'Bio',
              prefixIcon: Icon(Icons.chrome_reader_mode),
              fillColor: Colors.grey[200],
              filled: true,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10.0),
                borderSide: BorderSide(),
              ),
            ),
          ),
        ),

【问题讨论】：

尝试将TextField 包装在Column 小部件中并使用mainAxisAlignment: MainAxisAlignment.center 属性

试过了！没用！

【参考方案1】：

  Widget customTextView(String hint, Icon iconName) 
    return Container(
      decoration: BoxDecoration(
        color: _DarkWhiteColor.withOpacity(0.5),
        borderRadius: BorderRadius.circular(5),
      ),
      child: Padding(
        padding: const EdgeInsets.only(left: 0, right: 0),
        child: TextField(
          style: TextStyle(color: Colors.grey),
          cursorColor: Colors.grey,
          decoration: InputDecoration(
            border: InputBorder.none,
            focusedBorder: InputBorder.none,
            enabledBorder: InputBorder.none,
            errorBorder: InputBorder.none,
            disabledBorder: InputBorder.none,
            fillColor: _DarkWhiteColor.withOpacity(0),
            filled: true,
            hintText: "Enter Your Message",
            labelStyle: TextStyle(color: Colors.white),
//                suffixIcon: iconName,
            prefixIcon: Container(
              transform: Matrix4.translationValues(0, -45, 0),
              child: iconName,
            ),
          ),
          maxLines: 6,
        ),
      ),
    );
  

【讨论】：

你需要在装饰中使用icon，同时还要使用prefixIcon: Container( transform: Matrix4.translationValues(0, -45, 0), child: iconName, ),

【参考方案2】：

虽然在您的特定情况下，问题可以通过添加换行符 (hintText: '\nBio') 来解决，但更好的解决方案是使用 labelText 属性而不是 hintText。默认情况下，标签与 TextField 的中心对齐。

      TextField(
        maxLines: 3,
        decoration: InputDecoration(
          labelText: 'Bio',
          prefixIcon: Icon(Icons.chrome_reader_mode),
          fillColor: Colors.grey[200],
          filled: true,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10.0),
            borderSide: BorderSide(),
          ),
        ),
      ),
   

【讨论】：

labelText 代替 hintText 工作正常，谢谢

【参考方案3】：

这是一个丑陋的解决方案，但它有效。其他解决方案（例如，将 textAlignVertical 设置为 TextAlignVertical.center）不起作用，因为 maxLines 不为空。

将TextStyle 添加到hintText 并将TextStyle 的height 设置为2.8。当fontSize 较大时，您需要减少它，因为height 将乘以fontSize 以形成行高。我添加了一个contentPadding 以确保文本不会溢出（因为现在文本从TextField 的中心开始）。

TextField(
                    maxLines: 3,
                    decoration: InputDecoration(
                      contentPadding: EdgeInsets.symmetric(vertical: 30),
                      hintText: 'Bio',
                      hintStyle: TextStyle(
                        height: 2.8,
                      ),
                      prefixIcon: Icon(Icons.chrome_reader_mode),
                      fillColor: Colors.grey[200],
                      filled: true,
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10.0),
                        borderSide: BorderSide(),
                      ),
                    ),
                  ),

结果：