Question

我正在尝试在抽屉中放置一些按钮，用户可以将其放在上方并转到另一个页面/小部件。但是，它给我一个错误，并且不起作用。我不确定我在另一个项目中正在考虑的问题是什么，它是否有效，此外，我检查了Flutter文档中的食谱，了解如何进行导航，并且在此基础上看起来还不错。

这是我的抽屉代码，它位于Scaffold小部件内：

Drawer(
    child: Column(
        children: <Widget>[
            AppBar(
                automaticallyImplyLeading: false,
                title: Text('Looped In'),
            ),
            ListTile(
                leading: Icon(Icons.info),
                title: Text('About'),
                onTap: () {
                    Navigator.of(context).pushNamed('/about');
                },
            ),
        ],
    ),
),

这是我得到的错误回溯

flutter: The following assertion was thrown while handling a gesture:
flutter: Navigator operation requested with a context that does not include a Navigator.
flutter: The context used to push or pop routes from the Navigator must be that of a widget that is a
flutter: descendant of a Navigator widget.
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #0      Navigator.of.<anonymous closure> (package:flutter/src/widgets/navigator.dart:1273:9)
flutter: #1      Navigator.of (package:flutter/src/widgets/navigator.dart:1280:6)
flutter: #2      MyAppState.build.<anonymous closure> (file:///Users/garrettlove/Documents/learn/Flutter/loopt_in/lib/main.dart:59:29)
flutter: #3      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:507:14)
flutter: #4      _InkResponseState.build.<anonymous closure> (package:flutter/src/material/ink_well.dart:562:30)
flutter: #5      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:102:24)
flutter: #6      TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:242:9)
flutter: #7      TapGestureRecognizer.acceptGesture (package:flutter/src/gestures/tap.dart:204:7)
flutter: #8      GestureArenaManager.sweep (package:flutter/src/gestures/arena.dart:156:27)
flutter: #9      _WidgetsFlutterBinding&BindingBase&GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:147:20)
flutter: #10     _WidgetsFlutterBinding&BindingBase&GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:121:22)
flutter: #11     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:101:7)
flutter: #12     _WidgetsFlutterBinding&BindingBase&GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:64:7)
flutter: #13     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:48:7)
flutter: #14     _invoke1 (dart:ui/hooks.dart:153:13)
flutter: #15     _dispatchPointerDataPacket (dart:ui/hooks.dart:107:5)
flutter:
flutter: Handler: onTap
flutter: Recognizer:
flutter:   TapGestureRecognizer#2d408(debugOwner: GestureDetector, state: ready, won arena, finalPosition:
flutter:   Offset(98.5, 222.5), sent tap down)

编辑这是我拥有的一切：

import 'package:flutter/material.dart';

import './pages/home.dart';
import './pages/categories.dart';
import './pages/about.dart';
import './pages/contact.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  int _selectedTab = 0;
  final _pageOptions = [
    HomePage(),
    CatPage(),
  ];

  Widget _buildDrawer(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          AppBar(
            automaticallyImplyLeading: false,
            backgroundColor: Color.fromRGBO(135, 142, 136, 1.0),
            title: Text('Looped In'),
          ),
          ListTile(
            leading: Icon(Icons.info, color: Color.fromRGBO(247, 203, 21, 1.0),),
            title: Text('About'),
            onTap: () {
              //Navigator.of(context).pushNamed('/about');
              Navigator.of(context).push(MaterialPageRoute(builder: (context) => AboutPage()));
            },
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        accentColor: Color.fromRGBO(245, 93, 62, 1.0),
        primaryTextTheme: TextTheme(
          title: TextStyle(color: Colors.white),
        ),
      ),
      routes: <String, WidgetBuilder>{
        '/home': (BuildContext context) => HomePage(),
        '/about': (BuildContext context) => AboutPage(),
        '/contact': (BuildContext context) => ContactPage(),
      },
      home: Scaffold(
        drawer: _buildDrawer(context),
        appBar: AppBar(
          title: Text('Looped In'),
          backgroundColor: Color.fromRGBO(
            135,
            142,
            136,
            1.0,
          ),
        ),
        body: Container(
          padding: EdgeInsets.symmetric(horizontal: 10.0),
          child: _pageOptions[_selectedTab],
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _selectedTab,
          onTap: (int index) {
            setState(() {
              _selectedTab = index;
            });
          },
          fixedColor: Color.fromRGBO(118, 190, 208, 1.0),
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Everything'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text('Categories'),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

在构建小部件之前，您可能需要在“关于”屏幕中输入一个字符串

static const String routeName = "/about";

或仅使用此

onPressed: () {
                  Navigator.of(context).push(MaterialPageRoute(
                      builder: (context) => new AboutScreen()));
                }

Answer 2

您需要确保用于context的{{1}}具有父Navigator，否则将发生此错误。用MaterialApp包装Scaffold小部件应该可以解决问题。

还要在您的MaterialApp中向MaterialApp参数提供路由route

它应该看起来像这样：

'/about'

编辑：

下面您可以根据您的代码找到解决方案。我测试过了。您所需要做的就是将MaterialApp( routes: <String, WidgetBuilder>{ '/about': (BuildContext context) => AboutPage() }, home: Scaffold(), );用Scaffold包裹起来，如下所示：

Builder

轻按抽屉中的颤动按钮时会出现错误，而不是导航至正确的页面

2 个答案: