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

【问题标题】：Unable to set dynamic height for a Column involving ListView.builder() flutter无法为涉及 ListView.builder() 颤动的列设置动态高度
【发布时间】：2020-08-04 23:25:07
【问题描述】：

我有以下代码，我试图在其中创建一个列，该列是一个包含标题的容器，另一个包含项目列表的容器，可以水平滚动。但我收到以下运行时错误 - “ 在 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,
      ),
        )],
    ),
  );
}

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

【问题讨论】：

标签： flutter flutter-dependencies

【解决方案1】：

我终于从这个帖子https://github.com/flutter/flutter/issues/18341 中找到了答案。我必须用Expanded 替换第二个Container 并且效果很好。更新代码

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

【讨论】：