列颤振内部居中扩展ListView

Question

我正在尝试构建一个布局，在该布局的顶部和底部有两个Text对象，这些对象保持文具，而ListView处于它们的中心。

这是屏幕的代码

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 40.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                margin: EdgeInsets.symmetric(vertical: 40.0),
                child: Text(
                  DateFormat("hh:mm 'PM ,'  MMMM d").format(DateTime.now()),
                  style: Theme.of(context).textTheme.title,
                ),
              ),
              Expanded(
                child: ListView.builder(
                  itemCount: 4,
                  itemBuilder: (BuildContext context, int index) =>
                      CustomAppText(
                        text: 'Custom App',
                      ),
                ),
              ),
              Container(
                margin: EdgeInsets.symmetric(vertical: 40.0),
                child: Text(
                  "Settings",
                  style: Theme.of(context).textTheme.title,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

给定代码的输出

我正在寻找的设计

我试过使用Center小部件，但它没有将ListView居中

Answer 1

ListView填充了整个Expanded Widget，这就是为什么使用Center Widget不起作用的原因，因此shrinkWrap: true应该添加它，以便ListView仅占据其子级的高度。

浏览了文档后，我发现了关于Flexible Widget的信息。

Flexible, which does not force the child to fill the available space.

做出改变并像魅力一样运作

Flexible(
                child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: 4,
                  itemBuilder: (BuildContext context, int index) =>
                      CustomAppText(
                        text: 'Custom App',
                      ),
                ),
              ),

Answer 2

对于那些仍在寻找答案的人，这对我有用：

Column(
  children: [

    Container(), // some top content

    Expanded(
      child: Center(
        child: ListView(
          shrinkWrap: true,
          children: [] //your list view content here
        )
      )
    ),

    Container(), // some bottom content

  ]
)

该扩展插件使内容占用全部可用空间。

该中心窗口小部件中心要显示的内容。

该ListView控件握着你的清单内容与“拆封：真正的”属性使您的列表视图根据内容大小（它允许通过集中收缩中心，当它不采取了大量的空间小部件）。