Flutter - 具有无限高度错误的水平 ListView

Posted 2023-02-23

【中文标题】Flutter - 具有无限高度错误的水平 ListView

【英文标题】：Flutter - Horizontal ListView with Unbounded height error

【发布时间】：2020-10-31 20:29:42

【问题描述】：

当 scrollDirection 设置为垂直时，它会按预期工作。问题是当我将 section.axis 设置为 Axis.horizo​​ntal 以便 ListView 水平显示小部件时。

使用 Flexible 或 Expanded 小部件无法解决此问题，因为 ListView 的高度需要由列表中的小部件定义。

如您所见，shrinkWrap 也已启用。所以我不知道这里发生了什么，感谢您的帮助。

控制台说： 'constraints.hasBoundedHeight'：不正确。 相关的导致错误的小部件是：ListView

class SectionWidget extends StatelessWidget 
  final Section section;

  const SectionWidget(@required this.section);

  @override
  Widget build(BuildContext context) 
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(section.title),
        ListView.separated(
          shrinkWrap: true,
          scrollDirection: section.axis,
          physics: section.axis == Axis.vertical
              ? NeverScrollableScrollPhysics()
              : null,
          itemCount: section.itemList.length,
          itemBuilder: (BuildContext context, int index) 
            return Container(
              height: 100,
              width: 100,
              color: Colors.red,
            ); // Just to test if it works
          ,
          separatorBuilder: (BuildContext context, int index) 
            double paddingBetween = 10;
            if (section.axis == Axis.horizontal) 
              return SizedBox(width: paddingBetween);
             else 
              return SizedBox(height: paddingBetween);
            
          ,
        ),
      ],
    );
  

【参考方案1】：

这是因为 Column 或 Row 提供了其子级所需的高度/宽度，而 ListView 采用了其父级可用的高度/宽度。

要解决这个问题，只需将 ListView 包装在一个容器中。像这样：

import 'package:flutter/material.dart';

class SectionWidget extends StatelessWidget 
  final Section section;

  const SectionWidget(@required this.section);

  @override
  Widget build(BuildContext context) 
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(section.title),
        Container(
          height: section.axis == Axis.horizontal ? 100 : 700,  // I just set these values
          width: section.axis == Axis.horizontal ? 350 : 100,   // to fit with my device.
          child: ListView.separated(                            // If you want to fit for 
            shrinkWrap: true,                                   // all devices, use MediaQuery
            scrollDirection: section.axis,
            physics: section.axis == Axis.vertical
                ? NeverScrollableScrollPhysics()
                : null,
            itemCount: section.itemList.length,
            itemBuilder: (BuildContext context, int index) 
              return Container(
                height: 100,
                width: 100,
                color: Colors.red,
              ); // Just to test if it works
            ,
            separatorBuilder: (BuildContext context, int index) 
              double paddingBetween = 10;
              if (section.axis == Axis.horizontal) 
                return SizedBox(width: paddingBetween);
               else 
                return SizedBox(height: paddingBetween);
              
            ,
          ),
        ),
      ],
    );
  

更多关于MediaQuery的信息

编辑：

我认为使用 gridview 会更适合这个。我已经为你重新制作了构建代码，以适应不同儿童的体型。孩子的位置和其他我认为你可以管理的东西。

  @override
  Widget build(BuildContext context) 
    return Column(
      children: <Widget>[
        Expanded(
          child: Text(section.title),
        ),
        SizedBox(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: GridView.builder(
            gridDelegate:
                SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 1),
            shrinkWrap: true,
            scrollDirection: section.axis,
            physics: section.axis == Axis.vertical
                ? NeverScrollableScrollPhysics()
                : null,
            itemCount: section.itemList.length,
            itemBuilder: (context, index) 
              return Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  // Spacer(),
                  Container(
                    margin: EdgeInsets.all(10),
                    height: 100,
                    width: 100,
                    color: Colors.red,
                  ),
                  // Spacer(),
                ],
              );
            ,
          ),
        ),
      ],
    );
  

【讨论】：

这实际上适用于我发布的代码，但如果我希望孩子们拥有动态的高度/宽度怎么办？基本上我想让 ListView 适应他的孩子尺寸，有什么选择吗？

列表视图为我调整到其子项的尺寸。在垂直和水平模式下，每个红色框的宽度和高度均为 100。你能提供一些描述你的问题的图片给我吗？

你是对的，在我发布的代码中，孩子的宽度和高度为 100，但在我的真实应用中，我不知道孩子的大小，所以用容器包装 ListView 并修复在这种情况下，尺寸不是一个好的选择。

我认为这是不可能的，所以我只是让孩子们都一样大

我已经编辑了我的答案。看看这个！我认为它适用于不同大小的小部件，但请告诉我。干杯！