如何在颤动/飞镖的 ListView 项目中更改背景颜色答案

【问题标题】：How do I change background Color in ListView items in flutter/dart如何在颤动/飞镖的 ListView 项目中更改背景颜色
【发布时间】：2019-12-15 10:39:16
【问题描述】：

有没有办法使用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();
  }
}

这是我的卡片生成器

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

【问题讨论】：

标签： listview flutter flutter-layout

【解决方案1】：

是的，您可以尝试在 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()),
              ),
            ),
          ),
    );
  }
}

【讨论】：

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

【解决方案2】：

这是一些最小的实现

    int _selectedIndex;
  _onSelected(int index) {

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

然后在您的列表视图中，您要更改颜色的小部件

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);

【讨论】：