列颤振内部居中扩展ListView [英] Center Expanded ListView inside Column Flutter

问题描述

我正在尝试构建一个布局，在该布局的顶部和底部有两个Text对象，它们保留了文具，并且在它们的中心有一个ListView。

这里是代码对于屏幕

 类HomeScreen扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return脚手架（
主体：SafeArea（
子代：容器（
填充：EdgeInsets.symmetric（水平：40.0）），
子代：圆柱（
 crossAxisAlignment ：CrossAxisAlignment.start，
 mainAxisAlignment：MainAxisAlignment.spaceBetween，
子级：< Widget> [
 Container（
 margin：EdgeInsets.symmetric（vertical：40.0），
子级：Text（
 DateFormat（ hh：mm'PM，'MMMM d）。format（DateTime.now（）），
样式：Theme.of（context）.textTheme.title， 
），
），
 Expanded（
 child：ListView.builder（
 itemCount：4，
 itemBuilder：（BuildContext context，int index）=> 
 CustomAppText（
文本：'Custom App'，
），
），
），
 Container（
保证金：EdgeInsets.symmetric （垂直：40.0），
子级：文本（
设置，
样式：Theme.of（context）.textTheme.title，
），
） ，
]，
），
），
），
）； 
} 
} 
  

给定代码
< a href = https://i.stack.imgur.com/MECok.png rel = noreferrer>

我正在寻找的设计

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

解决方案

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

浏览了文档后，我发现了有关Flexible Widget

  Flexible，这不会强迫孩子填补可用空间。 
  

进行更改并像魅力一样工作

  Flexible（
 child：ListView.builder（
rinkWrap：true，
 itemCount：4，
 itemBuilder：（BuildContext context，int index）=> 
 CustomAppText（
 text：'Custom App'，
），
），
），
  

I'm trying to build a layout where there are two Text objects at the top and bottom which stays stationery and a ListView at their center.

Here's the code for the Screen

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

The output of the given code

The Design I'm looking for

I have tried using the Center widget but it does not center the ListView

解决方案

The ListView fills the entire Expanded Widget, that's why using the Center widget didn't work, so shrinkWrap: true should be added so the ListView takes only the height of it's children.

After skimming through the documentation I found about Flexible Widget

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

Made the change and works like a charm

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

这篇关于列颤振内部居中扩展ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！