Question

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

我从中期望的是标题（即第一列内的第一个容器），高度等于屏幕高度三分之一的图像以及最后的Text小部件。但是为什么会出现我无法理解的错误。

Answer 1

最后，我从该线程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,
      ),
        )],
    ),
  );
}

无法为涉及ListView.builder（）抖动的列设置动态高度

1 个答案: