带有图标的 flutter 数字文本字段

Question

这是最终结果:

这是我的代码:

SizedBox(width: 150, child: TextField(
  keyboardType: TextInputType.number,
  textAlign: TextAlign.center,
  textAlignVertical: TextAlignVertical.center,
  decoration: InputDecoration(
    border: new OutlineInputBorder(
      borderRadius: const BorderRadius.all(
        const Radius.circular(10.0),
      ),
    ),
    prefixIcon: IconButton(icon: Icon(MdiIcons.minus), onPressed: () async {

    }),
    suffixIcon: IconButton(icon: Icon(MdiIcons.plus), onPressed: () async {

    })
  )
));

我的问题是，即使我的宽度设置为 150，我也只能输入 3 位数字。任何超出 123 的数字屏幕上显示不可见。
它不是中心。

Answer 1

你可以用 IntrinsicWidth 包裹你的文本框
它是一个小部件，可将其子项的大小调整为子项的最大固有宽度。

 IntrinsicWidth(
                child: TextField(

但是上面的代码在它为空时使它变小，所以你应该用 ConstrainedBox包裹它们。

ConstrainedBox(
              constraints: BoxConstraints(minWidth: 120),//here is the initial or default width
              child: IntrinsicWidth(
                child: TextField(

正如你提到的，记得添加 contentPadding: EdgeInsets.zero,至 InputDecoration使文本对齐到中心，如果你不文本将默认向右移动
我想已经完成了
结果:

这是整个代码

    ConstrainedBox(
      constraints: BoxConstraints(minWidth: 120),
      child: IntrinsicWidth(
        child: TextField(
            keyboardType: TextInputType.number,
            textAlign: TextAlign.center,
            textAlignVertical: TextAlignVertical.center,
            decoration: InputDecoration(
                contentPadding: EdgeInsets.zero,
                border: new OutlineInputBorder(
                  borderRadius: const BorderRadius.all(
                    const Radius.circular(10.0),
                  ),
                ),
                prefixIcon: IconButton(
                    icon: Icon(Icons.remove), onPressed: () async {}),
                suffixIcon: IconButton(
                    icon: Icon(Icons.add), onPressed: () async {}))),
      ),
    ),