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

Posted 2023-02-23

【中文标题】Flutter - 如何在列表视图中居中小部件

【英文标题】：Flutter - How to center widget inside list view

【发布时间】：2019-03-30 04:33:45

【问题描述】：

我正在努力将一个小部件置于 listView 中。

我试过这个，但Text('ABC') 没有垂直居中。 我怎样才能做到这一点？

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

【问题讨论】：

你为什么要使用 ListView？

【参考方案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')
        ]
    ),
  ),
);

【讨论】：

感谢分享。这行得通。但是我有一个孩子的列表，所以我必须给每个孩子一个 center-widget :( 希望 Flutter 在 Listview 上带有一个对齐属性......

祝福你的灵魂！这正是我所需要的！

这可行，但shrinkWrap: true 使页面无法滚动。

这对我不起作用，您用于实现此结果的逻辑绝对不清楚，请添加一些 cmets。

在 ios 中你仍然可以滚动，但看起来很糟糕

【参考方案2】：

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

解决方案是在ListView 中放置一个Container 作为唯一的子项，并为其指定一个与该高度的可用空间相等的最小高度（使用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'),
          ),
        )
      ],
    ),
  ),
);

【讨论】：

这是最好的答案，shrinkWrap 可能不是您想要使用的，尽管理想情况下 ListView 应该有更好的方法来实现这一点。具体来说，对于我的情况，我需要一个 ListView 以便触发 RefreshIndicator。谢谢。

就我而言，这是唯一可行的解​​决方案。我需要列表视图顶部的菜单和中心的activityIndi​​cator。谢谢。

不错的解决方案，除非您正在处理登录/注册表单（像我一样）。在那里，您会注意到键盘在打开后会立即关闭。 shrinkView: true 不会出现此问题。使用键盘是唯一迫使我使用ListView 而不是Column。

@HamzaAbbad，我发现这个错误也发生在我身上，但与使用ListView 居中无关。该错误与 iOS 上的 AutofillGroup 有关。如果您将AutofillGroup 取出，则键盘应该可以正常工作。仍在等待颤振发布修复。

谢谢！这把我逼疯了，现在我知道该怎么做了

【参考方案3】：

将您的小部件包装到容器中

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

或

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

【参考方案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));

【参考方案5】：

在您的ListView 中使用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'));
          ,
        ),
      ),

输出：

【讨论】：

首先你不需要使用Center作为ListView的父级​​，第二个scrollDirection默认是垂直的，第三个，我已经提供了Align作为居中小部件的解决方案.我在您的答案中看不到任何价值，因此应该将其删除，如果我错了，请纠正我。

@CopsOnRoad：它将从屏幕中心绘制 ListView，我知道问题是关于 listview 下的小部件。这是在中心添加 Listview 以及子文​​本的另一种方式

所以，您只想将Center 添加到您的ListView 中，对吧？好吧，即使那样你也不正确，无论你是否将ListView 包裹在Center 中，它都不会有任何区别。所以，你的回答实际上没有任何意义。如果我错了，请再次纠正我。

它确实使小部件居中，但列表视图仍然不可滚动

谢谢。只有这对我有用。

【参考方案6】：

只需使用 Align 小部件将子小部件垂直和/或水平居中：

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

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

mainAxisAlignment: MainAxisAlignment.center 

到列垂直对齐。

【参考方案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'),
      ),
    ],
  ),
),

提示：给容器一个颜色以可视化可以滚动的区域

【参考方案8】：

    Scaffold(
      backgroundColor: Color.fromARGB(255, 238, 237, 237),
      body: Center(
        child: Container(
          child: Column(
            children: <Widget>[
              Column(children: <Widget>[
                Image.asset(
                  'images/logo.png',
                  fit: BoxFit.contain,
                  width: 130,
                )
              ]),
              Column(children: <Widget>[
                RaisedButton(
                  onPressed: () => ,
                  child: TextStyle_Title(
                    text: 'سلاااام',
                  ),
                )
              ]),
            ],
          ),
        ),
      ),
    )