Flutter：使用嵌套导航器

Question

我有一个页面将屏幕分为左 ( 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()的区域，而不是整个屏幕。 我读到嵌套导航器是解决方案，但在阅读了一些在线示例后我无法解决这个问题。 如果能提供更明确的指导或帮助，将不胜感激。

非常感谢！

Answer 1

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

static final navigatorKey = GlobalKey<NavigatorState>();

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

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