文本字段文本对齐未垂直对齐答案

【问题标题】：Textfield text alignment is not aligned vertically文本字段文本对齐未垂直对齐
【发布时间】：2021-01-16 12:30:32
【问题描述】：

我正在尝试构建一个具有自定义文本字段高度的表单，我想让文本字段文本和命中文本垂直居中。这是我的代码

      SizedBox(
             height: 40,
              child:
              TextField(
                style: TextStyle(
                  fontSize: 14,
                ),
                textAlignVertical: TextAlignVertical.center,
                textAlign: TextAlign.left,
                maxLines: 1,
                decoration: InputDecoration(
                    filled: true,
                    fillColor: Color(0xff5a9fd6).withOpacity(0.15),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xff5a9fd6).withOpacity(1.0),
                      ),
                      borderRadius: BorderRadius.circular(2.0),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.transparent,
                      ),
                      borderRadius: BorderRadius.circular(1.0),
                    )
                ),
              )
          ),

当我减小字体大小时，文本垂直对齐，但我想使用 14 及以上的字体大小。

【问题讨论】：

标签： flutter textfield vertical-alignment

【解决方案1】：

您可以将TextField的contentPadding设置为0或根据您的要求设置。

SizedBox(
             height: 40,
              child:
              TextField(
                style: TextStyle(
                  fontSize: 14,
                ),

                textAlignVertical: TextAlignVertical.center,
                textAlign: TextAlign.left,
                maxLines: 1,
                decoration: InputDecoration(
                    contentPadding: const EdgeInsets.all(0),
                    filled: true,
                    fillColor: Color(0xff5a9fd6).withOpacity(0.15),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xff5a9fd6).withOpacity(1.0),
                      ),
                      borderRadius: BorderRadius.circular(2.0),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.transparent,
                      ),
                      borderRadius: BorderRadius.circular(1.0),
                    )
                ),
              )
          ),

【讨论】：

如果我将 sizedbox 的高度更改为 80，那么文本字段的大小不会增加以占据整个高度，而且光标不在文本字段的中心。

【解决方案2】：

您可以调整contentPadding 使您的文本垂直居中，例如：

TextField(
decoration: InputDecoration(
    contentPadding: const EdgeInsets.all(<your value>),
)

【讨论】：

但如果我改变 Sizedbox 的高度，它就不起作用。我想要一个 60x60 大小的文本字段，文本应该在这个框的中心。

【解决方案3】：

不要包装来自 SizeBox 的 TextField 来管理 TextField 的高度。您可以通过使用垂直 contentPadding 来做到这一点，如下所示。它使您的文本居中。

TextField(
    style: TextStyle(
        fontSize: 14,
    ),
    textAlignVertical: TextAlignVertical.center,
    textAlign: TextAlign.left,
    maxLines: 1,
    decoration: InputDecoration(
         contentPadding: EdgeInsets.symmetric(vertical: 50, horizontal: 20),
         filled: true,
         fillColor: Color(0xff5a9fd6).withOpacity(0.15),
         focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(
                      color: Color(0xff5a9fd6).withOpacity(1.0),
                ),
                borderRadius: BorderRadius.circular(2.0),
          ),
          enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(
                      color: Colors.transparent,
                ),
          borderRadius: BorderRadius.circular(1.0),
          )
     ),
),

【讨论】：