Question

我正在尝试创建一个高度为40px的TextField，并且以圆角矩形作为背景。简直不敢相信没有一种简单的方法可以做到这一点。

这是我尝试过的：

在Container父级中设置高度。无效，孩子会超越父母的边界。
设置expands: true，它需要maxLines: null。请参见下面的代码。这可行，但我想将行数限制为1。

Container(
  decoration: BoxDecoration(
    color: Color(0xfff0f0f0),
    borderRadius: BorderRadius.circular(5),
  ),
  height: 40,
  child: TextField(
    style: TextStyle(fontSize: 18),
    expands: true,
    maxLines: null,
    decoration: InputDecoration(
      contentPadding:
          EdgeInsets.all(8),
      border: InputBorder.none,
      isDense: true,
    ),
  ))

Answer 1

找到一个解决方法，像这样设置垂直填充：

contentPadding: EdgeInsets.symmetric(vertical: 9)

要找到特定值（在这种情况下为9），请将其从0缓慢增加，进行热重装并观察文本向下移动。在某些时候，文本开始向上移动。选择使文本尽可能低的垂直填充。

Answer 2

我尝试过了，效果很好。

Row(children: [ Flexible(flex:2,
    child:
      Container(
       margin: EdgeInsets.symmetric(horizontal: 15),
  decoration: BoxDecoration(
    color: Color(0xfff0f0f0),
    borderRadius: BorderRadius.circular(5),
  ),
  height: 40,
  child:  TextField(
    style: TextStyle(fontSize: 18),

    maxLines: 1,
    decoration: InputDecoration(
      contentPadding:
          EdgeInsets.all(8),
      border: InputBorder.none,
      isDense: true,
    ),
  )))])

Answer 3

Wrap Your `Textfield` with `SizeBox` Widget and set height according to your design like below

SizedBox(
    height: 45,
    child: TextField(
      autocorrect: autocorrect,
      enabled: enabled,
      readOnly: readOnly,
      textCapitalization: textCapitalization,
      onEditingComplete: onEditingComplete,
      obscureText: obscure,
      controller: controller,
      keyboardType: keyboardType,
      style: AppTheme.textFieldTextStyle(),
      decoration: InputDecoration(
        filled: true,
        contentPadding: textFieldPadding(),
        prefixIcon: perfixIcon,
        hintText: hint,
        fillColor: Colors.white,
        hintStyle: AppTheme.textFieldHintTextStyle()
            .copyWith(fontWeight: FontWeight.w600),
      ),
      inputFormatters: [LengthLimitingTextInputFormatter(maxLength)],
      onTap: onTap,
      onSubmitted: onSubmit,
    ),
  );

如何设置TextField的高度？

3 个答案: