颤抖如何将小部件放在列表视图中

Question

我正在努力使小部件居中listView。

我确实喜欢这样，但Text('ABC')没有垂直居中。我该如何实现？

new Scaffold(
      appBar: new AppBar(),
      body: new ListView(
         padding: const EdgeInsets.all(20.0),
         children: [
          new Center(
            child: new Text('ABC')
          )
        ]
      )
    );

Answer 1

垂直居中和水平居中：

Scaffold(
  appBar: new AppBar(),
  body: Center(
    child: new ListView(
      shrinkWrap: true,
        padding: const EdgeInsets.all(20.0),
        children: [
          Center(child: new Text('ABC'))
        ]
    ),
  ),
);

仅垂直中心

Scaffold(
  appBar: new AppBar(),
  body: Center(
    child: new ListView(
      shrinkWrap: true,
        padding: const EdgeInsets.all(20.0),
        children: [
          new Text('ABC')
        ]
    ),
  ),
);

Answer 2

解决这个问题shrinkWrap = true是一种技巧。在 a 内ListView居中小部件的重点是启用弹性和滚动。使用shrinkWrap并不能实现这一点，它在视觉上看起来是正确的，但它的行为完全错误。

解决方案是将 aContainer作为 中唯一的孩子ListView，并为其指定一个等于该高度可用空间的最小高度（LayoutBuilder用于测量小部件的最大高度）。然后作为Container的孩子，您可以放置​​一个Center或Column（使用MainAxisAlignment.center）小部件，然后您可以从那里添加您想要居中的任何小部件。

以下是解决问题中示例的代码：

Scaffold(
  appBar: AppBar(),
  body: LayoutBuilder(
    builder: (context, constraints) => ListView(
      children: [
        Container(
          padding: const EdgeInsets.all(20.0),
          constraints: BoxConstraints(
            minHeight: constraints.maxHeight,
          ),
          child: Center(
            child: Text('ABC'),
          ),
        )
      ],
    ),
  ),
);

Answer 3

Align在你的内部使用ListView，它将在中心渲染小部件，而且我们不必提供任何对齐属性，因为默认情况下它是中心

这将添加ListView到屏幕的中心，随着列表项的增加，它只会从中心开始增长。

   Center(
        child: ListView.builder(
          shrinkWrap: true,
          scrollDirection: Axis.vertical, // Axis.horizontal for horizontal list view.
          itemCount: 2,
          itemBuilder: (ctx, index) {
            return Align(child: Text('Text'));
          },
        ),
      ),

输出：

Answer 4

只需将您的小部件包装起来Align并相应地提供alignment。

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView( // your ListView
        children: <Widget>[
          Align(
            alignment: Alignment.centerLeft,
            child: _button("Left"),
          ),
          Align(
            alignment: Alignment.center,
            child: _button("Middle"),
          ),
          Align(
            alignment: Alignment.centerRight,
            child: _button("Right"),
          ),
        ],
      ),
    );
  }

  Widget _button(text) => RaisedButton(onPressed: () {}, child: Text(text));
}

Answer 5

将小部件包装到容器中

Container(alignment: Alignment.center, ...)

要么

Container(alignment: Alignment.centerLeft, ...)