Flutter中如何实现可选择的二维滚动图标列表？

核心所需Widget #

• StatefulWidget：维护选中图标的状态
• GridView：创建可滚动的二维网格布局，推荐用GridView.count或GridView.builder
• Icon：渲染单个图标
• InkWell/GestureDetector：为图标添加点击选中交互
• Container：包裹图标，实现选中状态的视觉反馈（比如背景色、边框）

伪代码示例 #

// 定义状态类，保存选中的图标标识（这里用IconData举例）
class IconSelector extends StatefulWidget {
  final List<IconData> presetIcons; // 传入预先选定的图标列表
  const IconSelector({super.key, required this.presetIcons});

  @override
  State<IconSelector> createState() => _IconSelectorState();
}

class _IconSelectorState extends State<IconSelector> {
  IconData? _selectedIcon; // 记录选中的图标

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: EdgeInsets.all(16),
      crossAxisCount: 5, // 每行展示5个图标，可按需调整
      crossAxisSpacing: 12,
      mainAxisSpacing: 12,
      children: widget.presetIcons.map((icon) {
        // 为每个图标添加点击交互和选中样式
        return InkWell(
          onTap: () {
            setState(() {
              _selectedIcon = icon; // 更新选中状态
            });
          },
          child: Container(
            decoration: BoxDecoration(
              color: _selectedIcon == icon ? Colors.blue.shade100 : null,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Icon(
              icon,
              size: 32,
              color: _selectedIcon == icon ? Colors.blue : Colors.grey.shade600,
            ),
          ),
        );
      }).toList(),
    );
  }
}

关键说明 #

• 用GridView.count可快速指定每行图标数量，适合固定数量的预选图标；若图标数量极大，推荐用GridView.builder优化性能
• 通过setState更新_selectedIcon维护选中状态，同步更新UI样式
• 可按需调整网格间距、图标大小、选中状态的视觉效果（比如添加边框、缩放动画）

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