Flutter 颤振-如何在列表视图中居中小部件

我正在努力将小部件集中在

listView

中

我试过了，但是

Text（'ABC'）

没有垂直居中。 我怎样才能做到这一点

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

---

垂直中心和水平中心：

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')
        ]
    ),
  ),
);

---

将小部件包装到容器中

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

或

---

只需将小部件包装在

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));
}

class\u HomePageState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：ListView（//您的ListView
儿童：[
对齐(
对齐：alignment.centerLeft，
子项：_按钮（“左”），
),
对齐(
对齐：对齐.center，
子项：_按钮（“中间”），
),
对齐(
对齐：alignment.centerRight，
子项：_按钮（“右”），
),
],
),
);
}
小部件_按钮（文本）=>RaisedButton（按下时：（）{}，子项：文本（文本））；
}

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

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

注意：如果您作为孩子有一列，您必须添加：

mainAxisAlignment: MainAxisAlignment.center 

---

在

列表视图中使用
align
，它将在中心呈现小部件，而且我们不必提供任何对齐属性，因为默认情况下它是中心的

这将在屏幕中央添加
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'));
          },
        ),
      ),

输出：

用
shrinkWrap=true解决这个问题是一种技巧。将小部件置于
列表视图
中的整个中心点是启用弹性和滚动。使用“包覆面提取”（shrinkWrap）无法实现这一点，它在视觉上看起来是正确的，但其行为完全错误

解决方案是将
容器
作为唯一的子容器放置在
列表视图
中，并为其指定一个最小高度，该高度等于可用的高度空间（使用
LayoutBuilder
测量小部件的最大高度）。然后，作为
容器
的子级，您可以放置
居中
或
列
（带有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'),
          ),
        )
      ],
    ),
  ),
);

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

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'),
      ),
    ],
  ),
),

提示：为容器提供一种颜色，以可视化可以滚动的区域
为什么要使用ListView？谢谢分享。这很有效。但是我有一个孩子的列表，所以我必须给每个孩子放一个中心小部件：（希望Flitter在Listview上带有对齐属性…保佑你的灵魂！这正是我所需要的！这可以工作，但
收缩包装：true
会使页面无法滚动。这对我不起作用，并且你用来实现此结果的逻辑绝对不清楚，请添加一些注释。在iOS中，你仍然可以滚动，而且看起来很像。）BAD首先，您不需要将
居中
用作
列表视图
的父对象，第二个滚动方向默认为垂直，第三个，我已经提供了
对齐
作为小部件居中的解决方案。我在您的答案中看不到任何值，因此应该将其删除，如果我错了，请纠正我。@CopsOnRoad:它将绘制列表从屏幕中央查看，我知道问题是关于listview下的小部件。这是在中间添加listview以及子文本的另一种方式。因此，对于这个问题，您只想将
center
添加到
listview
中，对吗？即使这样，您也不正确，无论您是否将
listview
包装在侧
Center
或不侧
不会有任何区别。因此，您的答案实际上没有任何意义。如果我错了，请再次更正我。它确实使小部件居中，但listview仍然无法滚动这是最好的答案，shrinkWrap可能不是您想要使用的，尽管理想情况下listview应该有更好的方法来实现这一点。对于我的c具体来说，我需要一个列表视图，这样我就可以触发刷新指示器。谢谢。@kapace谢谢你的好话。我刚刚更新了我的答案，使之更清晰、更容易理解。希望你喜欢！在我的情况下，这是唯一可行的解决方案。我需要在列表视图顶部有一个菜单，在中间有activityIndicator。Thanx。很好的解决方案n、 除非您正在处理登录/注册表单（如我）。在那里，您会注意到键盘在打开后会立即关闭。
shrinkView:true
不会出现此问题。使用键盘是唯一迫使我使用
列表视图的方法，而不是使用
列
@hamzaabad，我发现该错误也发生在我身上，但与居中无关使用
列表视图
。该错误与iOS上的
自动填充组
有关。如果将
自动填充组
取出，则键盘应能正常工作。仍在等待颤振释放修复。
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'),
      ),
    ],
  ),
),