如何在Flutter的ListView中实现iOS风格的按压选中效果？

在iOS的UITableView里，单元格被选中时背景会变为灰色，还能通过以下代码实现自动取消选中状态：

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
}

要在Flutter的ListView里实现同款效果，别用TextButton（它的按压状态背景显示时间极短，几乎无法察觉），推荐以下两种更贴合iOS原生交互的实现方式：

方法一：使用ListTile的selected属性配合状态管理 #

这是最简洁的实现方式，通过维护选中索引，点击时先标记选中，再延时取消，模拟iOS的高亮后自动恢复效果：

class MyListView extends StatefulWidget {
  @override
  _MyListViewState createState() => _MyListViewState();
}

class _MyListViewState extends State<MyListView> {
  int? _selectedIndex;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 20,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('列表项 $index'),
          selected: _selectedIndex == index,
          selectedTileColor: Colors.grey.shade300, // 贴近iOS风格的选中背景色
          onTap: () {
            setState(() {
              _selectedIndex = index;
            });
            // 模拟iOS自动取消选中的动画时长
            Future.delayed(const Duration(milliseconds: 200), () {
              if (mounted) {
                setState(() {
                  _selectedIndex = null;
                });
              }
            });
          },
        );
      },
    );
  }
}

方法二：自定义GestureDetector包裹组件 #

如果需要更灵活的自定义单元格样式，可以用GestureDetector监听点击事件，手动控制背景色切换：

class CustomListView extends StatefulWidget {
  @override
  _CustomListViewState createState() => _CustomListViewState();
}

class _CustomListViewState extends State<CustomListView> {
  int? _pressedIndex;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 20,
      itemBuilder: (context, index) {
        return GestureDetector(
          onTapDown: (_) {
            setState(() {
              _pressedIndex = index;
            });
          },
          onTapUp: (_) {
            Future.delayed(const Duration(milliseconds: 200), () {
              if (mounted) {
                setState(() {
                  _pressedIndex = null;
                });
              }
            });
          },
          onTapCancel: () {
            setState(() {
              _pressedIndex = null;
            });
          },
          child: Container(
            color: _pressedIndex == index ? Colors.grey.shade300 : Colors.transparent,
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            child: Text('自定义列表项 $index'),
          ),
        );
      },
    );
  }
}

以上两种方法都能实现：点击单元格时显示灰色背景，短暂延时后自动恢复原状，完美解决TextButton背景闪得快的问题。

内容的提问来源于stack exchange，提问作者m_x_m