Flutter项目：实现Home页到Show All页的标签联动导航需求问询

核心思路 #

通过路由传参把Home页当前选中的Men/Women/Kids标签值传递给Show All页，Show All页拿到参数后自动切换对应标签并加载商品数据。

具体实现步骤 #

1. 统一标签类型（避免硬编码） #

先定义枚举来规范标签类型：

enum ProductCategory { men, women, kids }

2. Home页跳转逻辑处理 #

在"show all"按钮的点击事件里，把当前选中的标签作为参数传给Show All页：

// 假设Home页里用selectedCategory变量存当前选中的标签
ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => ShowAllPage(
          initialCategory: selectedCategory,
        ),
      ),
    );
  },
  child: const Text("show all"),
)

3. Show All页接收参数并初始化 #

在Show All页的构造函数里接收参数，初始化时自动选中对应标签并加载数据：

class ShowAllPage extends StatefulWidget {
  final ProductCategory initialCategory;

  const ShowAllPage({super.key, required this.initialCategory});

  @override
  State<ShowAllPage> createState() => _ShowAllPageState();
}

class _ShowAllPageState extends State<ShowAllPage> {
  late ProductCategory _currentSelectedCategory;

  @override
  void initState() {
    super.initState();
    // 直接把Home页传来的标签设为当前选中状态
    _currentSelectedCategory = widget.initialCategory;
    // 加载对应标签的商品数据
    _fetchProductsByCategory(_currentSelectedCategory);
  }

  // 模拟根据标签获取商品数据的方法
  void _fetchProductsByCategory(ProductCategory category) {
    // 这里写接口请求或本地数据查询逻辑
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Show All")),
      body: Column(
        children: [
          // 标签栏
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              _buildCategoryTab(ProductCategory.men),
              _buildCategoryTab(ProductCategory.women),
              _buildCategoryTab(ProductCategory.kids),
            ],
          ),
          // 商品列表区域
          Expanded(child: _buildProductList()),
        ],
      ),
    );
  }

  // 构建单个标签按钮
  Widget _buildCategoryTab(ProductCategory category) {
    final isSelected = _currentSelectedCategory == category;
    return GestureDetector(
      onTap: () {
        setState(() {
          _currentSelectedCategory = category;
          _fetchProductsByCategory(category);
        });
      },
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 10),
        decoration: BoxDecoration(
          color: isSelected ? Colors.green.shade500 : Colors.grey.shade200,
          borderRadius: BorderRadius.circular(25),
        ),
        child: Text(
          category.name.toUpperCase(),
          style: TextStyle(
            color: isSelected ? Colors.white : Colors.black87,
            fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
          ),
        ),
      ),
    );
  }

  // 构建商品列表
  Widget _buildProductList() {
    // 根据_currentSelectedCategory渲染对应商品列表
    return const Center(child: Text("商品列表展示区域"));
  }
}

4. 可选：用命名路由传参 #

如果项目用命名路由管理，也可以通过arguments传递参数：

// 路由注册
routes: {
  '/showAll': (context) => const ShowAllPage(),
},

// Home页跳转代码
Navigator.pushNamed(
  context,
  '/showAll',
  arguments: selectedCategory,
);

// ShowAll页获取参数
@override
void initState() {
  super.initState();
  _currentSelectedCategory = ModalRoute.of(context)!.settings.arguments as ProductCategory;
  _fetchProductsByCategory(_currentSelectedCategory);
}

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