dart 如何在Wrap小工具中滚动列表？

mjqavswn 于 2022-12-06 发布在其他

关注(0)|答案(4)|浏览(170)

我正在使用wrap来显示一些图像，Wrap的方向被设置为Axis.horizontal。当水平空间用完时，它会创建新的行。只要有足够的垂直空间，所有内容都会按应有的方式显示。但当有很多图像时，它会出现底部溢出。
我尝试将Wrap小部件 Package 在SingleChildScrollView、ListView和Expanded中，但似乎没有任何效果。以下是我的代码：

@override
  Widget build(BuildContext context) {
    return Wrap(
      direction: Axis.horizontal,
      spacing: 8,
      runSpacing: 12,
      children: [
        _buildImageCard('abc'),
        _buildImageCard('def'),
        _buildImageCard('ghi'),
        _buildImageCard('jkl'),
      ],
    );
  }
}

和_buildImageCard之间的关系

Widget _buildImageCard(String imagePath) {
    return SizedBox(
      width: 500,
      height: 400,
      child: Card(
        elevation: 5,
      ),
    );
  }

其结果是：

dart

来源：https://stackoverflow.com/questions/64727562/flutter-how-to-scroll-a-list-inside-of-wrap-widget

4条答案

按热度按时间

vsmadaxz1#

尝试单个子滚动视图

SingleChildScrollView(
    scrollDirection: Axis.vertical,
    child: Wrap(
      direction: Axis.horizontal,
      spacing: 8,
      runSpacing: 12,
      children: [
        _buildImageCard('abc'),
        _buildImageCard('def'),
        _buildImageCard('ghi'),
        _buildImageCard('jkl'),
        _buildImageCard('jkl'),
        _buildImageCard('jkl'),
        _buildImageCard('jkl'),
      ],
    ),
  );

赞(0）回复(0）举报 2022-12-06

nbnkbykc2#

I met the same problem and I can solve it. The problem is SingleChildScrollViewrequires the contstraints in which it will scroll. So you need to specify them:

SizedBox(
  height: 100.0,
  child: SingleChildScrollView(
    child: Wrap(
      children: [
      ],
    ),
  ),
)

赞(0）回复(0）举报 2022-12-06

aelbi1ox3#

@bambinoua是对的。你需要对SingleChildScrollView进行约束。例如，对高度进行无穷大约束对垂直SingleChildScrollView不起作用。你可以使用LayoutBuilder检查传递给它的约束：

LayoutBuilder(
    builder: (context, constraints){
        print('Constraints for SingleChildScrollView : $constraints');
        return SingleChildScrollView(...);
    },
)

如果它是BoxConstraints(0.0<=w<=720, 0.0<=h<=Infinity)，那么你需要检查你的小部件树，找到导致这个问题的父部件。在我的例子中，它是一个列，我通过将SingleChildScrollView Package 在Expanded小部件中来解决这个问题：

Column(
    children: [
        ...
        Expanded(
            child: SingleChildScrollView(...)
        )
    ]
)

赞(0）回复(0）举报 2022-12-06

cgyqldqp4#

对于水平滚动，请尝试以下操作。

Row(
  children: [
    Expanded(
        child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Wrap(direction: Axis.horizontal,
            children: [
              // childs here
            ],)))
  ],
);

赞(0）回复(0）举报 2022-12-06

我来回答

dart 如何在Wrap小工具中滚动列表？

4条答案

相关问题

热门标签

最新问答