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

Question

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

使用的代码是

    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

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

将 a 添加TextStyle到并将的hintText设为。当较大时，您需要减少此值，因为将乘以 来形成行高。我添加了一个以确保文本不会溢出（因为现在文本从 的中心开始）。heightTextStyle2.8fontSizeheightfontSizecontentPaddingTextField

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

结果：