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

Question

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

使用的代码是

    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(),
              ),
            ),
          ),
        ),

Answer 1

尽管在您的特定情况下问题可以通过添加换行符 (

hintText: '\nBio'

) 来解决，但更好的解决方案是使用

labelText

属性而不是

hintText

。默认情况下，标签与文本字段的中心对齐。

      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(),
          ),
        ),
      ),
   

Answer 2

这是一个丑陋的解决方案，但它有效。其他解决方案（例如，将

textAlignVertical

设置为

TextAlignVertical.center

）不起作用，因为

maxLines

不为空。

将

TextStyle

添加到

hintText

并将

height

的

TextStyle

设置为

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(),
                      ),
                    ),
                  ),

结果：

Answer 3

  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,
        ),
      ),
    );
  }

Answer 4

将 minLines 设置为 1。

TextField(textAlignVertical: TextAlignVertical.center,
                            minLines: 1,
                            maxLines: 3,
                            decoration: InputDecoration(
                              hintText: 'Bio',
                              prefixIcon: const Icon(Icons.email),
                              fillColor: Colors.grey[200],
                              filled: true,
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(10.0),
                                borderSide: BorderSide(),
                              ),
                            ),
                          ),