Listview构建器项目的动态高度

时间:2019-05-28 08:17:50

标签: flutter dart flutter-layout

每次显示空白屏幕并指定恒定大小时,我都无法为列表视图构建器的列表项设置动态大小。

我尝试通过设置mainAxisSize=minimum来使用列,并使用容器,因为我们知道容器会包裹子高度,但是没有任何作用

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


    )],
  );

2 个答案:

答案 0 :(得分:6)

只需添加var settings = { url: "http://XXXXXXXXx.com", method: "POST", headers: { "Content-Type": "application/json", }, data: JSON.stringify({ dni: doc, nom: nombre, ape: apellido, email: correo, dir: domicilio, tel: telefono, sex: sexo, mora: mora, }), }; $.ajax(settings).done(function (response) { if (response.result == "OK") { } }); shrinkWrap这两个属性,就可以使列表的高度动态化

physics

答案 1 :(得分:1)

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

在使用“灵活”或“扩展”窗口小部件时,您总是需要限制其父级大小,否则会出现此错误:

  

RenderFlex子级具有非零的flex,但是传入的高度限制   是无界的。当列位于不提供   有限的高度限制,例如在垂直方向上   滚动,它将尝试沿垂直方向收缩其子级   轴。在子级上设置伸缩(例如,使用扩展)表示   孩子将扩大以填充垂直方向上的剩余空间   方向。

解决方案和代码清理:

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

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