时间戳

首页 > 解决方案 > 无法为涉及 ListView.builder() 颤动的列设置动态高度

flutter - 无法为涉及 ListView.builder() 颤动的列设置动态高度

问题描述

我有以下代码，我试图在其中创建一个列，该列是一个包含标题的容器，另一个包含项目列表的容器，可以水平滚动。但是我收到以下运行时错误-“在 performResize() 期间引发了以下断言：水平视口被赋予了无限的高度。

视口在横轴上扩展以填充其容器并约束其子级以匹配其在横轴上的范围。在这种情况下，水平视口被赋予了无限量的垂直空间来扩展。”

Widget horizontalSlider(MediaQueryData mediaQuery){
  final List<String> entries = <String>['A', 'B', 'C','D','E'];
  return Container(
    padding: EdgeInsets.all(0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
            padding: EdgeInsets.only(left:16),
            child: Text("Home",style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),)
        ),
        Container(
          child: ListView.builder(
          padding: EdgeInsets.all(8),
          itemCount: entries.length,
          itemBuilder: (BuildContext context, int index){
            return Column(
              children: <Widget>[
                Container(
                  height: mediaQuery.size.height/3,
                  margin: EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage('assets/images/$index.jpg'),
                      fit: BoxFit.cover,
                    ),
                    borderRadius: BorderRadius.circular(18),
                    boxShadow: [BoxShadow(
                      color: Colors.grey.withOpacity(0.5),
                      spreadRadius: 4,
                      blurRadius: 4,
                    ),],
                  ),
                  width: mediaQuery.size.width/1.5,
                ),
                Text("Item ${entries[index]}",style: TextStyle(fontSize: 18),),
              ],
            );
          },
          scrollDirection: Axis.horizontal,
      ),
        )],
    ),
  );
}

我对此的期望是一个标题（即第一列内的第一个容器），一个高度等于屏幕高度三分之一的图像和一个文本小部件。但是为什么我会收到我无法理解的错误。

标签： flutterflutter-dependencies

解决方案

最后我从这个线程https://github.com/flutter/flutter/issues/18341找到了答案。我必须用第二个替换Container它Expanded并且效果很好。更新代码

Widget horizontalSlider(MediaQueryData mediaQuery){
  final List<String> entries = <String>['A', 'B', 'C','D','E'];
  return Container(
    padding: EdgeInsets.all(0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
            padding: EdgeInsets.only(left:16),
            child: Text("Home",style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),)
        ),
        Expanded(
          child: ListView.builder(
          padding: EdgeInsets.all(8),
          itemCount: entries.length,
          itemBuilder: (BuildContext context, int index){
            return Column(
              children: <Widget>[
                Container(
                  height: mediaQuery.size.height/3.5,
                  margin: EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage('assets/images/$index.jpg'),
                      fit: BoxFit.cover,
                    ),
                    borderRadius: BorderRadius.circular(18),
                    boxShadow: [BoxShadow(
                      color: Colors.grey.withOpacity(0.5),
                      spreadRadius: 4,
                      blurRadius: 4,
                    ),],
                  ),
                  width: mediaQuery.size.width/1.5,
                ),
                Text("Item ${entries[index]}",style: TextStyle(fontSize: 18),),
              ],
            );
          },
          scrollDirection: Axis.horizontal,
      ),
        )],
    ),
  );
}

推荐阅读