Flutter实现Gesture点击跳转、Chip选中高亮与空数据提示

以下改动基于你已经完成的分类数据过滤逻辑，可直接对照原有代码修改：

1. 卡片点击跳转详情页 #

实现逻辑 #

给现有卡片组件外层包裹GestureDetector（需要水波纹点击反馈可替换为InkWell，用法完全一致），在点击回调中通过Flutter内置的Navigator路由跳转至详情页，同时把当前卡片对应的数据作为参数传给详情页。

代码修改 #

原有卡片构建代码示例：

// 原服务/产品卡片组件
Widget _buildServiceCard(ServiceItem item) {
  return Card(
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: Text(item.name),
    ),
  );
}

修改后代码：

Widget _buildServiceCard(ServiceItem item) {
  // 外层包裹手势识别组件
  return GestureDetector(
    onTap: () {
      // 点击触发路由跳转
      Navigator.push(
        context,
        MaterialPageRoute(
          // 替换为你自己的详情页组件，传入当前卡片数据
          builder: (context) => ServiceDetailPage(serviceData: item),
        ),
      );
    },
    child: Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Text(item.name),
      ),
    ),
  );
}

注意：需要提前编写ServiceDetailPage详情页组件，在构造函数中增加required this.serviceData参数接收传入的卡片数据即可。

2. 分类Chip选中高亮 #

实现逻辑 #

基于Flutter状态驱动UI的特性，先在组件State中定义变量记录当前选中的分类ID，构建Chip时判断当前分类ID和选中ID是否一致，匹配则应用高亮样式，不匹配则用默认样式；点击Chip时通过setState更新选中ID、触发过滤逻辑，页面会自动重绘刷新样式。

代码修改 #

首先在State类中新增选中状态变量：

class _ServiceListPageState extends State<ServiceListPage> {
  // 原有变量：分类列表、过滤后的数据列表
  List<Category> categoryList = [];
  List<ServiceItem> filteredList = [];

  // 新增：记录当前选中的分类ID，默认值可设为0对应「全部分类」
  int? selectedCategoryId = 0;

  // 你已经实现的分类过滤方法
  void filterData(int categoryId) {
    // 原有过滤逻辑
  }
}

修改分类栏的Chip构建逻辑：

Widget _buildCategoryBar() {
  return SizedBox(
    height: 48,
    child: ListView.builder(
      scrollDirection: Axis.horizontal,
      padding: const EdgeInsets.symmetric(horizontal: 12),
      itemCount: categoryList.length,
      itemBuilder: (context, index) {
        final currentCategory = categoryList[index];
        // 判断当前分类是否为选中状态
        final isSelected = currentCategory.id == selectedCategoryId;
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 4),
          child: GestureDetector(
            onTap: () {
              setState(() {
                // 更新选中分类ID，触发UI重绘
                selectedCategoryId = currentCategory.id;
              });
              // 调用已有的过滤逻辑刷新列表
              filterData(currentCategory.id);
            },
            child: Chip(
              label: Text(currentCategory.name),
              // 选中态用主题色背景，未选中态用浅灰背景
              backgroundColor: isSelected 
                ? Theme.of(context).primaryColor 
                : Colors.grey[200],
              // 选中态文字为白色，未选中为深灰色
              labelStyle: TextStyle(
                color: isSelected ? Colors.white : Colors.black87,
              ),
            ),
          ),
        );
      },
    ),
  );
}

补充：如果使用Flutter内置的ChoiceChip组件，无需额外包裹GestureDetector，直接给组件传入selected: isSelected参数，在自带的onSelected回调中编写状态更新和过滤逻辑即可，样式自定义规则和上述代码一致。

3. 无匹配数据空提示 #

实现逻辑 #

构建服务列表区域时，先判断过滤后的数据列表是否为空，为空时渲染居中的"Not Available"提示文本，有数据时再渲染原有列表组件，避免空白区域。

代码修改 #

原有列表构建代码直接返回ListView.builder，修改为：

Widget _buildServiceList() {
  // 先判断过滤结果是否为空
  if (filteredList.isEmpty) {
    return const Center(
      child: Text(
        "Not Available",
        style: TextStyle(
          fontSize: 16,
          color: Colors.grey,
        ),
      ),
    );
  }
  // 有数据时渲染原列表组件
  return ListView.builder(
    padding: const EdgeInsets.all(12),
    itemCount: filteredList.length,
    itemBuilder: (context, index) {
      return _buildServiceCard(filteredList[index]);
    },
  );
}

注意：每次过滤逻辑执行更新filteredList后，页面重绘会自动执行该判断，无需额外手动触发提示显隐。

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