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

只需将小部件包装在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 3

使用shrinkWrap = true解决此问题是骇客。将ListView中的小部件居中的全部目的是启用反弹功能和滚动功能。使用shrinkWrap并不能达到这个目的，虽然看起来很正确，但是表现却完全错误。

解决方案是将Container放置为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 4

将小部件包装到容器中

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

或

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

Answer 5

只需使用“对齐”小部件将子小部件垂直和/或水平居中：

   Align(
    alignment: Alignment.center,
    child: Text(
      'middle',
    ),

注意：如果您的子级中有一列，则必须添加：

mainAxisAlignment: MainAxisAlignment.center

到该列以使其垂直对齐。

Answer 6

在Align内使用ListView，这将使Widget处于中心位置。此外，我们不必提供任何对齐方式属性，因为默认情况下它是center

这会在屏幕的中央添加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 7

如果需要中间的项目滚动，请执行以下操作。

Center(
  child: ListView(
    shrinkWrap: true,
    children: [
      // the container with height will make the screen scroll
      Container(
        height:
             MediaQuery.of(context).size.height / 1.2,
        child: Text('ABC'),
      ),
    ],
  ),
),

提示：为容器提供一种颜色，以可视化可以滚动的区域

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

7 个答案: