如何在 flutter 中单击切换按钮更改多个列表块颜色

Question

我想在打开切换按钮时更改 ListTile 的颜色，这是发生了，但我不能对多个 ListTiles 执行此操作，而我可以在多个 listTile 的切换按钮上执行此操作。

这是我的代码

late int tappedIndex;

@override
  void initState() {
    super.initState();
    tappedIndex = 0;
  }


 Expanded(
            child: ListView.builder(
              itemCount: books.length,
              itemBuilder: (context, index) {
                final book = books[index];
                return Column(
                  children: [
                    Container(
                         decoration: BoxDecoration(
                       color: tappedIndex == index ? Colors.grey[200] : Colors.white,
                       
                      ),
                        child: ListTile(
                          dense: true,
                          trailing: Switch(
                            value: _selectedProducts.contains(book.id),
                            onChanged: (bool? selected) {
                              if (selected != null) {
                                setState(() {
                                  tappedIndex = index
                                  _onProductSelected(selected, book.id,tappedIndex);
                                });
                              }
                            },
                            activeTrackColor: HexColor("#b8c2cc"),
                            activeColor: HexColor("#7367f0"),
                          ),
                          title: Text(
                            book.title,)
                            ],
                          ),
                        ),
                      ),
                    ),
                  ],
                );



void _onProductSelected(bool selected, productId,tappedindex) {
    if (selected == true) {
      setState(() {
        _selectedProducts.add(productId);
      });
    } else {
      setState(() {
        _selectedProducts.remove(productId);
      });
    }
  }

我正在尝试在 _onProductSelected 的 tappedIndex 上做一些事情，请帮助如何做。

Answer 1

您已经在“_selectedProducts”变量中启用了切换按钮列表。

所以你只需更改一点代码。

tappedIndex == index ? Colors.grey[200] : Colors.white

-> 

_selectedProducts.contains(book.id) ? Colors.grey[200] : Colors.white

late int tappedIndex;

@override
  void initState() {
    super.initState();
    tappedIndex = 0;
  }


 Expanded(
            child: ListView.builder(
              itemCount: books.length,
              itemBuilder: (context, index) {
                final book = books[index];
                return Column(
                  children: [
                    Container(
                         decoration: BoxDecoration(
                       color: _selectedProducts.contains(book.id) ? Colors.grey[200] : Colors.white,
                       
                      ),
                        child: ListTile(
                          dense: true,
                          trailing: Switch(
                            value: _selectedProducts.contains(book.id),
                            onChanged: (bool? selected) {
                              if (selected != null) {
                                setState(() {
                                  tappedIndex = index
                                  _onProductSelected(selected, book.id,tappedIndex);
                                });
                              }
                            },
                            activeTrackColor: HexColor("#b8c2cc"),
                            activeColor: HexColor("#7367f0"),
                          ),
                          title: Text(
                            book.title,)
                            ],
                          ),
                        ),
                      ),
                    ),
                  ],
                );



void _onProductSelected(bool selected, productId,tappedindex) {
    if (selected == true) {
      setState(() {
        _selectedProducts.add(productId);
      });
    } else {
      setState(() {
        _selectedProducts.remove(productId);
      });
    }
  }

如何在 flutter 中单击切换按钮更改多个列表块颜色

How to change multiple listtile color on click on toggle button in flutter

flutter

listtile