时间戳

首页 > 解决方案 > 如何在 listview.builder 中管理 listtiles 的选定变量

flutter - 如何在 listview.builder 中管理 listtiles 的选定变量

问题描述

我有一个ListView.builder返回一个ListTile. itemCount设置min(_selectedEvents.length, 3)为。因此，最多ListTile返回 3 秒，其中 a backgroundColorof Colors.grey[200]。

我想在按下时将颜色设置Colors.red为单个。ListTile我设置 selected:（_selectedListtileController我var创建的）并将onTap其设置为 true，这会将颜色更改为红色。

但问题是红色是为所有ListTiles 设置的，而不是为单个 s 设置的。另外创建 3 个单独的控制器也不是一个选项，因为我将它们返回 aListTile并且我只能通过 1 个控制器。

ListTile每次ListTile按下时如何设置单独的颜色？

提前致谢！

标签： flutterdart

解决方案

如果您希望有多个ListTile可供选择，我们可以定义一个List<int>保存indexes所选ListTiles 的位置：

// StatefulWidget is required
List<int> _selectedTiles = [];

并使用以下函数来切换特定的选定状态ListTile：

void toggleSelectedListTile(int index) {
    if (_selectedTiles.contains(index))
       setState(() => _selectedTiles.remove(index));
    else
       setState(() => _selectedTiles.add(index));
}

AListTile Widget具有selected我们可以利用的属性：

ListTile(
 selected: _selectedTiles.contains(index),
 selectedTileColor: Colors.red,
 title: Text('List tile $index'),
 onTap() { toggleSelectedListTile(index); },
)

因此，此解决方案的完整示例片段将是：

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

推荐阅读