如何在 listview.builder 中管理 listtiles 的選定變量

Question

我有一個返回ListTile的ListView.builder 。 itemCount設置為min(_selectedEvents.length, 3) 。 因此，最多返回 3 個ListTile ，其backgroundColor為Colors.grey[200] 。

我想在按下單個ListTile時將顏色設置為Colors.red 。 我設置 selected: _selectedListtileController （我創建的一個var ）並使用onTap將其設置為 true，這會將顏色更改為紅色。

但問題是紅色是為所有ListTile設置的，而不是為單個設置的。 也不能創建 3 個單獨的控制器，因為我在ListTile中返回它們，我只能傳遞 1 個 controller。

每當按下ListTile時，如何設置單獨ListTile的顏色？

提前致謝！

Answer 1

如果您希望有多個ListTile可供選擇，我們可以定義一個List<int>來保存所選ListTile的indexes ：

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

並使用以下函數來切換特定ListTile ：

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

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

Answer 2

在 class 的頂部創建一個空的 map

  final _isSelected = Map();

  @override
  Widget build(BuildContext context) {

在您的 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] );
            },
          );
        },
      ),

或者您可以在 initState() 創建您選擇的邏輯