如何独立地在列表视图项目中切换布尔值？

Question

我正在尝试通过按下按钮来更改容器的颜色。它查看布尔值并确定颜色。但如何独立地为每个列表视图项更改布尔值呢？

我也在使用Provider进行状态管理。这只是我尝试做的事情的一种示例。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    bool colorToggle = false;

    return MaterialApp(
      home: Scaffold(
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, i) {
            return Container(
              width: 100,
              height: 100,
              color: colorToggle ? Colors.blue : Colors.green,
              child: GestureDetector(
                onTap: () {
                  //how to change the colorToggle independendently with each listview item?
                  print('tapped');
                },
                child: Text('change color'),
              ),
            );
          },
        ),
      ),
    );
  }
}

- Dzuko

---

请查看以下链接：https://dev59.com/F7bna4cB1Zd3GeqPaGWF - undefined

Answer 1

您不能仅通过一个布尔值来实现此功能。

您可以使用一个List。在选定某个项目后，将该项目的索引添加到List中。然后检查List以设置颜色。

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List toggled = List();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, i) {
            return Container(
              width: 100,
              height: 100,
              color: toggled.contains(i) ? Colors.blue : Colors.green,
              child: GestureDetector(
                onTap: () {
                  toggled.add(i);
                  setState(() {});
                },
                child: Text('change color'),
              ),
            );
          },
        ),
      ),
    );
  }
}

- JideGuru

---

谢谢，这个方法有效！你能解释一下List()是什么吗？我知道你在示例中创建了一个名为toggled的列表，但为什么不是List toggled = []; - undefined

List() 表示一个空列表。你可以将它改为 []，这样也可以正常工作。 - undefined