如何在 Flutter 的小部件树中导航到新的小部件答案

【问题标题】：How to navigate to new widget as a child in widget tree in Flutter如何在 Flutter 的小部件树中导航到新的小部件
【发布时间】：2022-01-15 12:06:39
【问题描述】：

在下面的示例中，当我推送新的 MaterialPageRoute “Child”时，它会在 Flutter 小部件树中的 MyApp 小部件的同一级别上创建。我想让它作为小部件 MyApp 的子级，因此 MyApp 将是 Child 小部件的父级。

这是完整的代码：

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar:AppBar(),
      body: Column(
        children: <Widget>[
          Center(
            child: Text("This is home"),
          ),
          ListView.builder(
            shrinkWrap:true,
          itemCount:10,
          itemBuilder:(context,index){
            return InkWell(
            onTap:(){
              Navigator.of(context)
                  .push(MaterialPageRoute(builder: (context) => Child(index)));
            },
            child:Container(
            height:50,
            width:50,
            child:Text("item $index",style:TextStyle(color:Colors.white))));
          }),
          
        ],
      ),
    ),
    );
  }
}

class Child extends StatelessWidget {
  final int index;
  Child(this.index);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(),
        body: Container(
      child: Text("Child view $index"),
    ));
  }
}

我知道可以使用嵌套导航来完成，但我无法使用 Navigator。

【问题讨论】：

标签： flutter dart flutter-navigation

【解决方案1】：

您可能需要将InkWell 小部件更改为Container，如下所示，因为容器与墨水池行为重叠，因此无法执行任何操作：

      ListView.builder(shrinkWrap:true, itemCount:10, itemBuilder:(context,index){
        return Container(
          height:50,
          width:50,
          child: InkWell(
            child: Text("item $index",style:TextStyle(color:Colors.white)),
            onTap:(){
             Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => Child(index)));
          })),
      })

【讨论】：

我的代码运行良好。我只是希望导航到新屏幕（子项）应该是 MyApp 的子项。现在它与 MyApp 处于同一水平。
显然，这个现有的代码应该可以正常工作。您介意提供结果截图以便我帮助您吗？
我已经添加了小部件树的当前结构。在此您可以看到 Child 小部件是 Scaffold 的兄弟，我希望 Child 小部件成为 Scaffold 的孩子。