如何在flutter中单击切换按钮时更改多个listtile颜色

Question

我想在切换按钮打开时更改 ListTile 的颜色，这种情况正在发生，但我不能为多个 ListTile 执行此操作，而我可以在多个 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);
      });
    }
  }