Listview构建器项目的动态高度 [英] Dynamic height of listview builder item

问题描述

我无法为列表视图构建器的列表项设置动态大小，每次它显示空白屏幕时，当我指定一个恒定大小时，它都起作用。

I am unable to set the dynamic size to my list item of list view builder, every time it shows blank screen and when I specify a constant size it works.

我尝试通过设置 mainAxisSize = minimum 来使用列，并使用容器，因为我们知道容器会包裹子高度，但无济于事

I tried by using column by setting mainAxisSize=minimum and by using container as we know container wraps the child height but nothing works

 listItem (GuideLines news) =>Column(
    mainAxisAlignment: MainAxisAlignment.start,
    mainAxisSize:  MainAxisSize.min,
    children: <Widget>[Container(
      decoration: BoxDecoration(image: new DecorationImage(image: AdvancedNetworkImage(
        "${news.featured_image}",
        useDiskCache: true,
        cacheRule: CacheRule(maxAge: const Duration(days: 7)),
      ),fit: BoxFit.cover)),
      margin: EdgeInsets.only(bottom: 10.0),
      child: ListTile(
        onTap: (){
          print(news.web_link);
          Navigator.push(context, MaterialPageRoute(builder: (context) => NewsDetailsPage(news)));
        },
        title: new Container(
            margin: EdgeInsets.only(left: 30.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(top: 20.0),
                  child: new Text("${DateFormat("E, d MMM y").format(CommonService.dateFormat(news.publish_date.toString()))}", style: TextStyle(fontFamily: 'SF-Display-Regular' ,fontSize: 13.0 ,color: Colors.white),),
                ),
                SizedBox(height: 13.0),
                new Flexible(
                  child: new Container( width:  MediaQuery.of(context).size.width  *0.45,
                      child: Padding(
                        padding: const EdgeInsets.only(bottom: 20.0),
                        child: new Text("${news.title}" ,maxLines: 3, overflow: TextOverflow.ellipsis, style: TextStyle(fontFamily: 'SF-Display-Semibold' ,fontSize: 22.0 ,color: Colors.white),),
                      )


                  ),
                )
              ],
            )),
        trailing: Padding(
          padding: const EdgeInsets.only(right: 20),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[Icon(Icons.arrow_forward_ios, color: Colors.white),SizedBox(width: 8,)],
          ),
        ),
      ),


    )],
  );

推荐答案

代码的问题是，您使用了列中的 Flexible 小部件。灵活小部件扩展为列或行的剩余空间。但是，这仅在您限制了列或行窗口小部件的大小的情况下才有效。因为否则，由于剩余空间不受限制，列中元素的大小将扩大到无穷大，因此也将无穷大。

The problem with your code is, that you used a Flexible widget in a Column. A Flexible widget expands to the remaining space of the Column or Row. However, this only works if you have restricted the size of the Column or Row widget. Because otherwise, the size of the element in the Column would expand to infinity as the remaining space is not restricted and therefore also infinity.

使用灵活或扩展小部件时，您总是需要限制其父级大小，否则会出现此错误：

When using Flexible or Expanded widgets you always need to restrict their parent size, else you get this error:

RenderFlex子级的flex为非零值，但传入的高度约束
是无界的。当列位于不提供
有限高度约束的父级中时，例如，如果列位于垂直的
可滚动状态中，它将尝试沿垂直的
收缩其子级轴。在子对象上设置伸缩（例如，使用Expanded）表示该子对象将扩展
来填充垂直
方向上的剩余空间。

RenderFlex children have non-zero flex but incoming height constraints are unbounded. When a column is in a parent that does not provide a finite height constraint, for example if it is in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the vertical direction.

解决方案和一些代码清除：

The solution and some cleanup of your code:

Widget listItem(GuideLines news) {
  return Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: AdvancedNetworkImage(
            "${news.featured_image}",
            useDiskCache: true,
            cacheRule: CacheRule(maxAge: const Duration(days: 7)),
          ),
          fit: BoxFit.cover),
    ),
    margin: EdgeInsets.only(bottom: 10.0),
    child: ListTile(
      onTap: () {
        print(news.web_link);
        Navigator.push(context, MaterialPageRoute(builder: (context) => NewsDetailsPage(news)));
      },
      title: Container(
        margin: EdgeInsets.only(left: 30.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 20.0, bottom: 13.0),
              child: Text(
                "${DateFormat("E, d MMM y").format(CommonService.dateFormat(news.publish_date.toString()))}",
                style: TextStyle(fontFamily: 'SF-Display-Regular', fontSize: 13.0, color: Colors.white),
              ),
            ),
            Container(
              width: MediaQuery.of(context).size.width * 0.45,
              padding: const EdgeInsets.only(bottom: 20.0),
              child: new Text(
                "${news.title}",
                maxLines: 3,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(fontFamily: 'SF-Display-Semibold', fontSize: 22.0, color: Colors.white),
              ),
            )
          ],
        ),
      ),
      trailing: Padding(
        padding: const EdgeInsets.only(right: 28),
        child: Icon(Icons.arrow_forward_ios, color: Colors.white),
      ),
    ),
  );
}

在您的特定情况下，此灵活小部件还是多余的。

In your specific case, this Flexible widget was redundant anyway.

这篇关于Listview构建器项目的动态高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！