Question

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

      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以上的字体。

Answer 1

您可以将contentPadding中的TextField设置为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),
                    )
                ),
              )
          ),

Answer 2

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

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

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

文本字段的文本对齐方式未垂直对齐

3 个答案: