在flutter中的应用程序上一张一张添加随机图像

Question

我在使用浮动操作按钮向页面添加随机图像时遇到问题。从 .shuffle 列表中绘制图像后，我想从列表中绘制另一张图片。我可以使用操作按钮添加更多图片，但是当按下浮动操作按钮时，它也会更改之前的图像。结果，即使我可以打乱图像，我也只能得到显示大量相同图像的结果，而不是添加不同的图像。

我现在面临的主要问题是 添加第二个图像时，第一个图像也会更改为第二个图像。因此，相加后不是得到两张不同的图像，而是得到两张相同的图像。 我想知道如何每次点击按钮时获得不同的图像。

 
List stickerList = [];

void addNewImageToList () {
  setState(() {
    stickerList.add(Container(
       width: 250,
       height: 250,
       decoration: BoxDecoration(
        image: DecorationImage(
        image: AssetImage(
           'lib/images/${assetsList[stickerList.length]}'),
        fit: BoxFit.fill,),  
        borderRadius: BorderRadius.circular(50)
    ));
  });
}


body: ListView.builder(
      itemCount: stickerList.length,
      itemBuilder: (context, index) {
        return Column(
          children: [Container(
                    width: 250,
                    height: 250,
                    decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage(
                          'lib/images/${assetsList[stickerList.length]}'),
                    fit: BoxFit.fill,),  
                    borderRadius: BorderRadius.circular(50))
          )],
        );
      },),

floatingActionButton:FloatingActionButton(
          onPressed: () {
          addNewImageToList();},
      heroTag: Icons.group_add,
      child: Icon(Icons.group_add),)

我想问如何修改它并每次从随机列表中添加新图像而不影响之前添加的图像？ 我应该走什么逻辑方向？ 比如，用操作按钮断开上一张图像的连接？ 生成一个随机列表并按升序相应地调用图像，而不是每次都进行随机排列？ 我不太确定哪个方向是有效的，因为我不太熟悉编码。 谢谢你。

Answer 1

您可以使用

Random().nextInt()

获取assetsList长度范围内的随机索引。然后，您可以根据随机选择的索引将新图像添加到 StickerList

这是我所做的代码：

import 'dart:math';

List stickerList = [];

void addNewImageToList() {
  setState(() {
    int randomIndex = Random().nextInt(assetsList.length);
    
    stickerList.add(Container(
      width: 250,
      height: 250,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('lib/images/${assetsList[randomIndex]}'),
          fit: BoxFit.fill,
        ),
        borderRadius: BorderRadius.circular(50),
      ),
    ));
  });
}

Answer 2

问题出在 ListViewBuild 代码中的这一行。

image: DecorationImage(
                        image: AssetImage(
                          'lib/images/${assetsList[stickerList.length]}'),

虽然您的构建器函数会迭代，但每次迭代始终具有相同的

stickerList.length

值。

以下内容应该更接近您的需要。

List stickerList = [];

void addNewImageToList () {
   // as per Gokuls answer.
  int randomIndex = Random().nextInt(assetsList.length);

  setState(() {
   stickerList.add(randomIndex )
  });
}


body: ListView.builder(
      itemCount: stickerList.length,
      itemBuilder: (context, index) {
        return Column(
          children: [Container(
                    width: 250,
                    height: 250,
                    decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage(
                          'lib/images/${assetsList[stickerList[index]]}'),
                    fit: BoxFit.fill,),  
                    borderRadius: BorderRadius.circular(50))
          )],
        );
      },),

floatingActionButton:FloatingActionButton(
          onPressed: () {
          addNewImageToList();},
      heroTag: Icons.group_add,
      child: Icon(Icons.group_add),)