Flutter

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

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

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

或

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

Answer 3

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

只需使用对齐小部件将 child 小部件垂直居中 and/or 水平：

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

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

mainAxisAlignment: MainAxisAlignment.center

到列以垂直对齐。

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

输出：

Answer 6

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

解决方法是在ListView中放置一个Container作为唯一的children，并给它一个最小高度等于可用的space高度（使用 LayoutBuilder 测量小部件的最大高度）。然后作为 Container 的 child，您可以放置一个 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 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'),
      ),
    ],
  ),
),

提示：为容器指定颜色以可视化可以滚动的区域

Answer 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: 'سلاااام',
                  ),
                )
              ]),
            ],
          ),
        ),
      ),
    )

Answer 9

在您的列表视图中添加此容器

Container(
            height: MediaQuery.of(context).size.height / 1.2,
            child: Center(
              child: Text(
                "No Record Found",
                style: TextStyle(fontSize: 20, color: Colors.black),
              ),
            ),
          ),

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

Flutter - How to center widget inside list view

flutter-layout