使用 SingleChildScrollView 和 Wrap Widget with a lot of children 时如何实现平滑滚动？

Question

我正在使用 Wrap 小部件来包装一堆卡片，有时卡片的数量很多，导致滚动不流畅，有时如果卡片有图像，应用程序会停止。 Wrap 允许跨不同设备大小的动态行为。有什么办法可以解决这个问题。我想知道我是否可以只构建显示的卡而不会给其他卡增加内存负担。？如何保证滚动流畅？

       SingleChildScrollView(
            child: Center(
              child: Container(
                width: devWidth,
                margin: EdgeInsets.only(top: 15, bottom: 15),
                child: Wrap(
                    alignment: WrapAlignment.spaceEvenly,
                    runSpacing: devWidth * 0.03,
                    children: myList.map<Widget>((item) {
                      return itemCard(item);
                    }).toList()),
              ),
            ),
          )

Answer 1

你应该使用 ListView.seperated() 而不是 Wrap

ListView.separated(
    itemCount: myList.length,
    separatorBuilder: (BuildContext Context, int index) {
       return SizedBox(height: devWidth * 0.03);
    },
    itemBuilder: (BuildContext context, int index) {
       return itemCard(myList[index]);
    },
)

对于每行使用多个项目，请使用以下代码：

ListView.separated(
    itemCount: myList.length / 3,
    separatorBuilder: (BuildContext Context, int index) {
       return SizedBox(height: devWidth * 0.03);
    },
    itemBuilder: (BuildContext context, int index) {
    int idx = index * 3;
           return Row(
              children : <Widget>[
                  itemCard(myList[idx]),
                  itemCard(myList[idx + 1]),
                  itemCard(myList[idx + 2])
              ]
           );
    },
)