[英]How do I change background Color in ListView items in flutter/dart
Is there a way to find an index number, of a particular item using ListView
instead of ListView.builder
?有没有办法使用
ListView
而不是ListView.builder
来查找特定项目的索引号? I want to then, set backgrounds to a particular item on the list.然后,我想为列表中的特定项目设置背景。 Say every third item to be Red in background.
说每三个项目在背景中是红色的。 My lists are 10-15 items in length.
我的列表长度为 10-15 项。
This is my List这是我的清单
// 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();
}
}
This is my Card Builder这是我的卡片生成器
// 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()));
}),
],
),
],
),
],
),
));
}
}
here is some minimal implementation这是一些最小的实现
int _selectedIndex;
_onSelected(int index) {
setState(() {
_selectedIndex = index;
});
}
and then in your listview the widget you want to change color然后在您的列表视图中要更改颜色的小部件
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);
Yes, you can try to change it inside tour itemBuilder function, I'll leave you an example here:是的,您可以尝试在 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()),
),
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.