Flutter：如何在 Wrap 小部件内滚动列表？

Question

我正在使用 wrap 来显示一些图像，方向Wrap设置为Axis.horizontal。当它用完水平空间时，它正在创建新行。只要垂直有足够的空间，一切都会按预期显示。但是在有很多图像的那一刻，它给出了一个底部溢出。

我试着包裹Wrap部件内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,
      ),
    );
  }

结果是：

Answer 1

我遇到了同样的问题，我可以解决它。问题是SingleChildScrollView 需要对其滚动进行限制。所以你需要指定它们：

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

Answer 2

尝试SingleChildScrollView

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