Flutter：使用嵌套导航器答案

【问题标题】：Flutter: using nested navigatorFlutter：使用嵌套导航器
【发布时间】：2020-12-10 15:26:20
【问题描述】：

我有一个页面将屏幕分为左（CheckOutPage）和右（MyFoodOrder()）：

class TakeOrderPage extends StatefulWidget {

  @override
  _TakeOrderPageState createState() => _TakeOrderPageState();
}

class _TakeOrderPageState extends State<TakeOrderPage> {

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(flex: 4, child: CheckOutPage()),
        VerticalDivider(),
        Expanded(flex: 6, child: MyFoodOrder()),
      ],
    );
  }
}

在MyFoodOrder 中，我有一个使用FoodCard 构建食品的小部件：

  Widget buildFoodList() {
    return Expanded(
      child: GridView.count(
        //itemCount: foods.length,
        childAspectRatio: 3.0,
        mainAxisSpacing: 4,
        crossAxisSpacing: 4,
        crossAxisCount: 2,
        controller: _controller,
        physics: BouncingScrollPhysics(),
        //children: foods.map((food) {
        //    return FoodCard(food);
        //}).toList(),
        children: [for (var food in Level1) if ((food.foodType == MyFoodTypes[value])) FoodCard(food)].toList(),
      ),
    );
  }

在FoodCard 内，我有一个带有InkWell 的小部件，当点击它以选择选项时，它可以移动到另一个页面。此刻，新页面ChooseOptions()将占据整个屏幕：

  Widget buildPriceInfo() {
    ConfirmAction action;

    return Padding(
      padding: const EdgeInsets.only(left: 8, right: 8, bottom: 8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(
            '\$ ${food.price}',
            style: titleStyle,
          ),
          Card(
            margin: EdgeInsets.only(right: 0),
            shape: roundedRectangle4,
            color: mainColor,
            child: InkWell(
              onTap: IsAvailable() ? () async {
                remark = ''; //cancel any selected taste
                if (food.options.length != 0) {
                  if (food.options.containsKey('2')) {
                    action =  await _showTasteDialog(food.index);
                  }
                  if (food.options.containsKey('1')) {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => ChooseOptions(food)),
                    );
                  }
                  else
                    addItemToCard();
                }
                else
                  addItemToCard();
              } : (){},
              splashColor: Colors.white70,
              customBorder: roundedRectangle4,
              child: Icon(Icons.add, size: 30,),
            ),
          )
        ],
      ),
    );
  }

我想修改一下，让ChooseOptions的新页面只占据MyFoodOrder()的区域，而不是整个屏幕。我读到嵌套导航器是解决方案，但在阅读了一些在线示例后我无法解决。如果能提供更明确的指导或帮助，不胜感激。

非常感谢！

【问题讨论】：

我建议，如果你想导航到另一个小部件并保留你可以称之为“背景”的东西，你需要为你的背景制作一个单独的小部件，然后导航到ChooseOptions ，只有应用程序的主体发生变化。此外，它使您只需要几行甚至只需要 1 行代码即可包含背景。

标签： flutter dart

【解决方案1】：

用 Navigator 包装您的 MyFoodOrder，设置路线，并为其分配导航键。

static final navigatorKey = GlobalKey<NavigatorState>();

然后使用导航键更改路由。

navigatorKey.currentState.pushNamed("Your route");

【讨论】：