如何更改Flitter/dart中ListView项目的背景色

是否有办法使用

ListView

而不是

ListView.builder

来查找特定项目的索引号？然后，我想为列表中的特定项目设置背景。说每三个项目是红色的背景。 我的清单长度为10-15项

这是我的名单

// List - Words
class WordList extends StatelessWidget {
  final List<WordModal> _wordModal;

  WordList(this._wordModal);

  @override
  Widget build(BuildContext context) {
    return new ListView(
      padding: new EdgeInsets.symmetric(vertical: 8.0),
      children: _buildList(),
    );
  }

  List<WordCard> _buildList() {
    return _wordModal.map((word) => new WordCard(word)).toList();
  }
}

//列表-单词
类WordList扩展了无状态小部件{
最终清单(u wordModal),；
单词列表（此.\u wordModal）；
@凌驾
小部件构建（构建上下文）{
返回新的ListView(
填充：新边集。对称（垂直：8.0），
子项：_buildList（），
);
}
列表_buildList（）{
return _wordModal.map（（word）=>newwordcard（word））.toList（）；
}
}

这是我的卡片生成器

// Word Card Item
class WordCard extends StatelessWidget {
  final WordModal _genericModal;

  WordCard(this._genericModal);

  @override
  Widget build(BuildContext context) {
    return new Card(
        margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
        child: Container(
          //color: ** want to put background color here **
          child: Column(
            children: <Widget>[
              new ExpansionTile(
                title: Container(
                  child: Column(
                    children: <Widget>[
                      new ListTile(
                        leading: new CircleAvatar(
                          child: Icon(Icons.image, color: Colors.grey), backgroundColor: Colors.white,),
                        title: Text(_genericModal.animalGenus),
                        subtitle: Text(
                          _genericModal.animalSpecies,
                        ),
                      ),
                    ],
                  ),
                ),
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      SizedBox(
                        width: 50,
                      ),
                      Text(
                        _genericModal.animalHabitatLocation,
                        style: (TextStyle(fontStyle: FontStyle.italic)),
                      ),
                    ],
                  ),
                  new Row(
                    children: <Widget>[
                      Spacer(),
                      IconButton(
                          icon: new Icon(
                            Icons.volume_up,
                            size: 28,
                            color: Colors.grey,
                          ),
                          onPressed: () {
                            Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => DetailPage()));
                          }),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ));
  }
}

//字卡项目
类WordCard扩展了无状态小部件{
最终单词模态_genericModal；
字卡（此为通用模式）；
@凌驾
小部件构建（构建上下文）{
归还新卡(
边距：新边集。对称（水平：10.0，垂直：6.0），
子：容器(
//颜色：**要在此处添加背景色吗**
子：列(
儿童：[
新扩展文件(
标题：集装箱(
子：列(
儿童：[
新ListTile(
领先：新CircleAvatar(
子：图标（Icons.image，颜色：Colors.grey），背景颜色：Colors.white，），
标题：文本（_genericModal.animalGenus），
字幕：文本(
_一般模式动物物种，
),
),
],
),
),
儿童：[
划船(
儿童：[
大小盒子(
宽度：50，
),
正文(
_genericModal.animalHabitatLocation，
样式：（TextStyle（fontStyle:fontStyle.italic）），
),
],
),
新行(
儿童：[
垫片（），
图标按钮(
图标：新图标(
Icons.volume\u up，
尺码：28，
颜色：颜色。灰色，
),
已按下：（）{
导航器。推(
上下文
材料路线(
生成器：（上下文）=>DetailPage（））；
}),
],
),
],
),
],
),
));
}
}

是的，您可以尝试在tour itemBuilder函数中对其进行更改，我在这里给您留下一个示例：

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()),
              ),
            ),
          ),
    );
  }
}

class PageTwoState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回ListView.builder(
项目范围：250.0，
itemBuilder：（上下文，索引）=>容器(
填充：所有边缘设置（10.0），
儿童：材料(
标高：4.0，
边界半径：边界半径。圆形（5.0），
颜色：索引%2==0？颜色。青色：颜色。深橙色，
儿童：中心(
子项：文本（index.toString（）），
),
),
),
);
}
}

以下是一些最简单的实现

    int _selectedIndex;
  _onSelected(int index) {

    setState(() {
      _selectedIndex = index;
    });
  }

然后在listview中显示要更改颜色的小部件

ListView.builder(

          itemCount: querySnapshot.documents.length,
          padding: EdgeInsets.all(8.0),
          itemBuilder: (context, i) {
...
     IconButton(
                          iconSize: 28,
                          icon: Icon(
                            Icons.favorite_border,
                            color: _selectedIndex != null && _selectedIndex == i
                                ? Colors.redAccent
                                : Colors.grey,
                          ),
                          onPressed: () {
                            _onSelected(i);

---

是的，但我的问题是，我可以只使用ListView来获取索引吗？我不想在较小的列表大小上使用ListView.builder。可能吗？