Flutter - 水平 ListView 出现无限高度错误

Question

Flutter - 水平 ListView 出现无限高度错误

androidiosflutterlistviewhorizontalscrollview

3

当scrollDirection设置为垂直时，它按预期工作。问题是，当我将section.axis设置为Axis.horizontal时，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);
            }
          },
        ),
      ],
    );
  }
}

- Valen G.

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rkdupr0n · Accepted Answer

那是因为Column或Row会给它们的子组件提供所需的高度/宽度，而ListView会利用其父组件中可用的尽可能多的高度/宽度。

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

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的更多信息，请参考。

编辑：

我认为使用网格视图会更适合这种情况。我已经重新制作了构建代码，以适应不同孩子的尺寸。我认为您可以处理孩子的位置和其他一些事情。

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