flutter - 如何在切换按钮打开时更改卡片颜色

Question

我想在打开切换按钮时更改容器颜色。我正在使用 ListTile，这是我的代码

Container(
      color:Colors.red,  //want to change this color
child:ListTile(
      dense:true,
          
          trailing:Switch(
            value: _selectedProducts.contains(book.id),
            onChanged:(bool? selected) {
              if (selected != null) {
                setState(() {
                  _onProductSelected(
                      selected, book.id);
                      print(selected);
                      print(book.id);
                });
              }},
            activeTrackColor: HexColor("#b8c2cc"),
            activeColor: HexColor("#7367f0"),
          ),
          title: Text(book.title,style:  ),
          
          subtitle: Text("Rs/- 40",),
              
        
          
        ),
  );

_onProductSelected在方法中，我正在处理特定的切换按钮。

更新：

我正在调用这个小buildBook部件Widget build(BuildContext context)

 Expanded(
              child: ListView.builder(
                itemCount: books.length,
                itemBuilder: (context, index) {
                  final book = books[index];

                  return Column(
                    children: [
                      buildBook(book,index),
                      Divider()
                    ],
                  );
                },
              ),
            ),
 Widget buildBook(Book book) => InkWell(
    onTap:(){Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => ProductProfile(),
        ));},
    child: Container(
      color:isChangeColor?Colors.red:Colors.green,
      child: ListTile(
        dense:true,
            leading: SizedBox(
              width: 50,
              height: 90,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10.0),
                child: Image.network(
                  book.urlImage,
                 fit: BoxFit.cover,
                
                ),
              ),
            ),
            trailing:Switch(
              value: _selectedProducts.contains(book.id),
              onChanged:(bool? selected) {
                if (selected != null) {
            //       setState(() {
            // if(selected){
            // cardColor = Colors.blue;
            // }else{
            // cardColor = Colors.pink;
            // }});
                  setState(() {
                    isChangeColor = selected;
                    // isChangeColor=true;
                    _onProductSelected(
                        selected, book.id);
                        print(selected);
                        print(book.id);
                  });
                }},
              activeTrackColor: HexColor("#b8c2cc"),
              activeColor: HexColor("#7367f0"),
            ),
            title: Text(book.title,style:  GoogleFonts.montserrat(color:Colors.black,fontWeight:FontWeight.w500,fontSize: 15),),
            // isThreeLine: true,
            subtitle: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(book.author,style: GoogleFonts.montserrat()),
                // SizedBox10(),
                Text("Rs/- 40",style: GoogleFonts.montserrat(fontSize: 15,color: Colors.black,fontWeight: FontWeight.w400),),
                
          
              ],
            ),
          ),
    ),
  );
}

请帮助如何做到这一点。

标签： fluttercontainerstogglelisttile

Answer 1

您可以使用类似isSelected的bool变量来检查 ListTile 是否被选中。

示例：

bool isSelected = true;
Container(
    color: isSelected ? Colors.red : Colors.green,
    ...
)