1

我想在打开切换按钮时更改容器颜色。我正在使用 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),),
                
          
              ],
            ),
          ),
    ),
  );
}

请帮助如何做到这一点。

4

3 回答 3

0

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

示例：

bool isSelected = true;
Container(
    color: isSelected ? Colors.red : Colors.green,
    ...
)
于 2021-11-04T08:30:41.847 回答
0

更新

您可以为卡片颜色定义一个变量并更改该_onProductSelected方法的值。

var cardColor = Colors.pink;

Container(
      color: Colors.white,
      height: MediaQuery.of(context).size.height*0.12,
      child: Card(
        margin: EdgeInsets.all(10),
  color: cardColor,
  child: SwitchListTile(
      title: Text(book.title,style: TextStyle(
          color: Colors.white,
      ),
      ),
     
      value: _selectedProducts.contains(book.id),
      activeColor: Colors.blue,
      inactiveTrackColor: Colors.grey,
      onChanged: (bool? selected) {
                if (selected != null) {
                  setState(() {
                    _onProductSelected(selected, book.id);
                       
                  });
                }},
  ),
),
    ));

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

同样对于容器，您可以使用以下代码：

var containerColor= Colors.pink;

Container(
      color:containerColor,  //want to change this color
child:ListTile(
      dense:true,
          
          trailing:Switch(
            value: _selectedProducts.contains(book.id),
            onChanged:(bool? selected) {
              if (selected != null) {
                setState(() {
            if(selected){
            containerColor = Colors.blue;
            }else{
            containerColor = Colors.pink;
            }
                  _onProductSelected(
                      selected, book.id);
                      print(selected);
                      print(book.id);
                });
              }},
            activeTrackColor: HexColor("#b8c2cc"),
            activeColor: HexColor("#7367f0"),
          ),
          title: Text(book.title,style:  ),
          
          subtitle: Text("Rs/- 40",),
              
        
          
        ),
  );
于 2021-11-04T06:55:56.007 回答
0

您可以使用bool属性。基于此真假条件，您可以更改容器的颜色。

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

完整的源代码

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Home(),
    ));

class Home extends StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool isChangeColor = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Container(
          color: isChangeColor ? Colors.red : Colors.green, //here you check
          child: ListTile(
            dense: true,
            trailing: Switch(
              value: isChangeColor,
              onChanged: (bool selected) {
                if (selected != null) {
                  setState(() {
                    isChangeColor = selected;
                  });
                }
              },
            ),
            title: Text("book.titl"),
            subtitle: Text(
              "Rs/- 40",
            ),
          ),
        ));
  }
}

输出：

在此处输入图像描述

于 2021-11-04T06:58:33.270 回答