flutter - 在 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不为空 .
添加 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(),
                      ),
                    ),
                  ),

结果: