在 Flutter Listview 中选择卡片

Posted 2023-02-23

【中文标题】在 Flutter Listview 中选择卡片

【英文标题】：Select Card In Flutter Listview

【发布时间】：2019-12-14 12:30:23

【问题描述】：

所以我在 Flutter 中有一个 listview.builder。它返回一个 InkWell，该 InkWell 在 Container 中作为子项有一张卡片。当卡片被点击时，容器的颜色必须改变。我想用setState() 来做这件事，但它不起作用。在列表视图中设置状态似乎不起作用。如何让卡片动态化？？？？

Container(
      margin: EdgeInsets.only(top: 10),
      height: 200,
      color: Colors.cyan,
      width: MediaQuery.of(context).size.width,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 3,
        itemBuilder: (context, index) 

          var mycolor=Colors.white;

          return InkWell(
            onTap: () 

                setState(() 
                  if (mycolor == Colors.white) 
                    mycolor=Colors.grey[300];
                   else 
                    mycolor=Colors.white;
                  
                );

            ,
            child: Card(
              color: mycolor,
              child: Container(
                width: 100,
                height: 100,

              ),
            ),
          );
        
      ),
    ),

【参考方案1】：

class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 

  // list of colors to map to specific index of list items
  List<Color> _color = [
    Colors.green[400],
    Colors.green[400],
    Colors.green[400]
  ];

  // when tapped, toggle the color
  void _toggleColor(_index) 
    setState(() 
      if (_color[_index] == Colors.white) 
        _color[_index] = Colors.green[400];
       else 
        _color[_index] = Colors.white;
      
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: 3,
          itemBuilder: (context, index) 
            return InkWell(
                onTap: () 
                  return this._toggleColor(index);
                ,
                child: Card(
                    color: this._color[index], // get value from state object
                    child: Container(width: 100, height: 100)));
          ),
    );
  

【讨论】：

这似乎是正确的。如果可以添加一些解释为什么需要进行此更改会更有用。

【参考方案2】：

我建议在开头的小部件状态中声明mycolor 变量，如下所示：

Color mycolor = Colors.white;

然后在您的 onTap 函数上，您可以执行以下操作：

if (mycolor === Colors.white) 
  setState(() 
    mycolor = Colors.grey[300];
  
 else 
 setState(() 
  mycolor = Colors.white;