Question

我在Flutter UI上遇到了一个小问题，我不确定是什么原因造成的。

这是我的摘录：

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  String fetchedData = 'doubleleng';

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              height: 40.0,
              padding: const EdgeInsets.only(bottom: 8.0),
              margin: const EdgeInsets.symmetric(horizontal: 40.0),
              child: ListView.builder(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                physics: NeverScrollableScrollPhysics(),
                itemCount: fetchedData.length,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 4.0,
                    ),
                    child: SizedBox(
                      width: MediaQuery.of(context).size.width * 0.06,
                      child: TextFormField(
                        style: TextStyle(
                          fontSize: 20.0,
                        ),
                        keyboardType: TextInputType.number,
                        inputFormatters: [
                          LengthLimitingTextInputFormatter(1),
                        ],
                        textAlign: TextAlign.center,
                      ),
                    ),
                  );
                },
              ),
            ),
            Container(
              child: RaisedButton(
                onPressed: () {},
              ),
            ),
          ],
        ),
      ),
    );
  }
}

所以我想基于fetchedData的长度构建一个动态的TextFormField，所以我使用ListView.builder。我用TextAlign.center填充了textAlign属性，但没有得到我想要的。

这是党卫军：

这是怪异部分的SS（不完全居中）：

不仅是'5'而是全部

Answer 1

我不知道RepaintBoundary或字体本身是否有问题，但是我尝试了几件事，看到唯一的解决方案是在TextFormField / TextField中将InputDecoration与Padding结合使用：

TextFormField(
// your params
   decoration: new InputDecoration(contentPadding: const EdgeInsets.only(left: 3.0))
)

Flutter TextFormField TextAlign.center不会使输入居中

1 个答案: