时间戳

首页 > 解决方案 > 如何将我的切换按钮映射到它们各自的变量？

flutter - 如何将我的切换按钮映射到它们各自的变量？

问题描述

当用户按下其各自的切换按钮时，我想在屏幕上显示 12 张图像的集合。

为简单起见，我会说我有 3 张图片：

img.Image image1 = img.decodeImage(_imageFile.readAsBytesSync());
img.Image image2 = img.decodeImage(_imageFile2.readAsBytesSync());
img.Image image3 = img.decodeImage(_imageFile3.readAsBytesSync());

List<bool> isSelected = [true, false, false];

//only showing relevant portion of @build function
ToggleButtons(
                color: Colors.teal,
                selectedColor: Colors.blueGrey,
                children: [
                  Icon(Icons.accessibility),
                  Icon(Icons.pets),
                  Icon(Icons.phone),
                ],
                isSelected: isSelected,
                onPressed: (index){
                  setState(() {
                    isSelected[index] = !isSelected[index];
                    print(isSelected);
                  });
                },
              ),

根据用户按下的按钮，我想显示该图像。我不想为所有可能的组合编写 if-else 语句isSelected，并且基于isSelected列表我将显示图像，例如在其默认状态下[true, false, false]仅image1应显示。

我将如何获得所有可能的组合isSelected？为此，我找到了 trotter 库：https ://pub.dev/packages/trotter ，但显然它不接受 bool 列表。

在我能够获得我的列表的所有可能组合之后，我该如何映射，每个图像到其各自的切换按钮？

标签： flutterdart

解决方案

你可以在ListView.builder这里使用。

将图像存储在一个数组中，例如List<Image> images = [image1, image2, image3,...].

代码将如下所示：

ListView.builder(
  itemCount: isSelected.length,
  itemBuilder: (context, index) {
    // Only render the image if it is selected.
    return isSelected[index] ? images[index] : Container();
  },
);

最好通过创建一个类来抽象它（因为每个ListImage调用它都有一个 isSelected 和 Image 。

如果您还有其他问题，请随时发表评论。谢谢 ：）

推荐阅读