[英]How to manage selected variables for listtiles inside of a listview.builder
I have a ListView.builder
which returns a ListTile
.我有一个返回
ListTile
的ListView.builder
。 The itemCount
is set to min(_selectedEvents.length, 3)
. itemCount
设置为min(_selectedEvents.length, 3)
。 So a maximum of 3 ListTile
s is being returned with a backgroundColor
of Colors.grey[200]
.因此,最多返回 3 个
ListTile
,其backgroundColor
为Colors.grey[200]
。
I want to set the color to Colors.red
for a single ListTile
when it is pressed.我想在按下单个
ListTile
时将颜色设置为Colors.red
。 I set selected: _selectedListtileController
(a var
that I created) and with onTap
this is being set to true, which changes the color to red.我设置 selected:
_selectedListtileController
(我创建的一个var
)并使用onTap
将其设置为 true,这会将颜色更改为红色。
But the problem is that the red color is set for all the ListTile
s and not for a single one.但问题是红色是为所有
ListTile
设置的,而不是为单个设置的。 Also creating 3 separate controllers is not an option because I return them in a ListTile
and I can only pass 1 controller.也不能创建 3 个单独的控制器,因为我在
ListTile
中返回它们,我只能传递 1 个 controller。
How do I set the color of a separate ListTile
whenever the ListTile
is pressed?每当按下
ListTile
时,如何设置单独ListTile
的颜色?
Thanks in advance!提前致谢!
If you'd like more than one ListTile
to be selectable, we could define a List<int>
where to save the indexes
of selected ListTile
s:如果您希望有多个
ListTile
可供选择,我们可以定义一个List<int>
来保存所选ListTile
的indexes
:
// StatefulWidget is required
List<int> _selectedTiles = [];
And use the following functions to toggle the selected state of a specific ListTile
:并使用以下函数来切换特定
ListTile
:
void toggleSelectedListTile(int index) {
if (_selectedTiles.contains(index))
setState(() => _selectedTiles.remove(index));
else
setState(() => _selectedTiles.add(index));
}
A ListTile
Widget
has the selected
property, which we can take advantage of: ListTile
Widget
具有selected
属性,我们可以利用它:
ListTile(
selected: _selectedTiles.contains(index),
selectedTileColor: Colors.red,
title: Text('List tile $index'),
onTap() { toggleSelectedListTile(index); },
)
Therefore, a full example snippet of this solution would be:因此,此解决方案的完整示例片段将是:
class HomeWidget extends StatefulWidget {
HomeWidget({ Key key }) : super(key: key);
@override
_HomeWidgetState createState() => _StatefulWidgetExampleState();
}
class _HomeWidgetState extends State<StatefulWidgetExample> {
List<int> _selectedTiles = [];
void toggleSelectedListTile(int index) {
if (_selectedTiles.contains(index))
setState(() => _selectedTiles.remove(index));
else
setState(() => _selectedTiles.add(index));
}
Widget _buildListTile(int index) {
return ListTile(
selected: _selectedTiles.contains(index),
selectedTileColor: Colors.red,
title: Text('List tile $index'),
onTap() { toggleSelectedListTile(index); },
);
}
@override
Widget build(BuildContext context)
return Scaffold(
body: new ListView.builder
(
itemCount: 3,
itemBuilder: (BuildContext ctxt, int index) => _buildListTile(index),
),
);
}
Create an empty map at the top of the class在 class 的顶部创建一个空的 map
final _isSelected = Map();
@override
Widget build(BuildContext context) {
on your ListView.builder在您的 ListView.builder 上
ListView.builder(
itemCount: _selectedEvents.length,
itemBuilder: (context, index) {
//add this line to initiate
if (!_isSelected.containsKey(index)) // important
_isSelected[index] = false;
return ListTile(
...
...
// and this line to check listTile is selected or not
selected: _isSelected[index],
tileColor: Colors.grey[200],
selectedTileColor: Colors.red,
onTap: () {
setState(() => _isSelected[index] = !_isSelected[index] );
},
);
},
),
or you can create your selected logic at initState()或者您可以在 initState() 创建您选择的逻辑
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.