flutter - 如何在 flutter 中为每个 ListView 项目设置不同的背景颜色

Question

我已经学习了很多教程，但我只能通过检查索引是偶数还是奇数来在两种颜色之间切换。

这是我的代码:

class PageTwoState extends State<PageTwo> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemExtent: 250.0,
      itemBuilder: (context, index) => Container(
            padding: EdgeInsets.all(10.0),
            child: Material(
              elevation: 4.0,
              borderRadius: BorderRadius.circular(5.0),
              color: index % 2 == 0 ? Colors.cyan : Colors.deepOrange,
              child: Center(
                child: Text(index.toString()),
              ),
            ),
          ),
    );
  }
}

我希望每个项目都有不同的背景颜色(假设如果我的列表中有 10 个项目，那么我希望每个项目都有不同的背景颜色。)，但是通过使用三元运算我无法做到那个。

Answer 1

如果你想生成随机颜色，那么使用这个:

导入 'dart:math';

颜色:Colors.primaries[Random().nextInt(Colors.primaries.length)],

如果你知道列表中的项目数量，你可以得到一个包含你想要的颜色的列表:

class PageTwoState extends State<PageTwo> {

  //ADDED
  var colors = [
    Colors.red,
    Colors.blue,
    Colors.cyan,
    Colors.green,
    Colors.yellow,
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemExtent: 250.0,
      itemCount: 5,//CHANGED
      itemBuilder: (context, index) => Container(
        padding: EdgeInsets.all(10.0),
        child: Material(
          elevation: 4.0,
          borderRadius: BorderRadius.circular(5.0),
          color: colors[index],//CHANGED
          child: Center(
            child: Text(index.toString()),
          ),
        ),
      ),
    );
  }
}