如何在顫動中單擊切換按鈕時更改多個列表顏色

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 上的_onProductSelected上做一些事情，請幫助如何做到這一點。

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);
      });
    }
  }