如何在Flutter TextField中垂直居中不同大小的hintText?

时间:2017-11-16 23:38:57

标签: centering placeholder flutter text-styling

我有一个像这样的TextField,输入文本和提示文本的大小不同。

new TextField(
    style: Theme.of(context).textTheme.subhead.copyWith(
      fontSize: 70.0,
    ),
    decoration: new InputDecoration(
      hintText: 'Enter a number',
      hideDivider: true,
      hintStyle: new TextStyle(
        color: Colors.grey[500],
        fontSize: 25.0,
      ),
    ),
);

虽然用户输入文本在我的父容器中居中,但hintText不是(top比底部有更多空间)。有没有办法垂直居中提示文本? 提示文本与输入文本的大小不同的原因是它占用了比绿色容器更多的空间,因此它看起来像Enter a nu...,这不是非常用户友好。 (那么,有没有办法在hintText中有换行符?)

Hint text is smaller so that I can fit it all in the widget

Input text is centered

4 个答案:

答案 0 :(得分:1)

我看到这已经超过2年了,但是如果其他人遇到了这个问题:

InputDecoration具有属性contentPadding。

TextField(
  decoration: InputDecoration(
    hintText: 'Hint Text',
    contentPadding: EdgeInsets.all(10.0),
  ),
);

答案 1 :(得分:1)

在您的文本字段中添加 textAlignVertical: TextAlignVertical.center,

TextField(
  textAlignVertical: TextAlignVertical.center,
  ...
),

答案 2 :(得分:0)

new TextField(
  decoration: new InputDecoration(
    hintText: 'your hint',
  ),
  textAlign: TextAlign.center,
)

textAlign: TextAlign.center会使您的提示出现在中心位置。

答案 3 :(得分:-1)

以下是您问题的解决方案:

Container(
  color: Colors.red,
  width: 1000,
  height: 500,
  alignment: Alignment.center,
  child: TextFormField(
    keyboardType: TextInputType.emailAddress,
    autofocus: false,
    style: new TextStyle(fontSize: 20),
    decoration: InputDecoration(
        hintText: 'Email', hintStyle: TextStyle(color: Color(0xff777777))),
  ),
)