主页 / coding / 问题 / 79430351
Accepted
Jo Jo
Asked: 2025-02-11 22:38:54 +0800 CST

Flutter appBar 上下文

  • 772

我正在学习 Flutter。下面是我的基本代码。我收到一条错误消息，提示 appBar 中的按钮无权访问 Navigator。

import 'package:flutter/material.dart';
import 'package:new_app/pages/first_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});


  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
            actions: [
              IconButton(
                icon: Icon(
                    Icons.arrow_forward_ios,
                    color: Colors.black,
                  ),
                  onPressed: () {
                    Navigator.push(context, MaterialPageRoute(builder: (context) => FirstPage()));},
                  )
            ]),
        body: Center(
          child: Text('Sample Text'),
        ),
      ),
    );
  }
}

我不明白，因为它似乎直接位于 Scaffold 和 MaterialApp 下，所以应该如此？有人能用通俗易懂的语言向我解释一下吗？

flutter

4 个回答

  1. 将脚手架移至另一个小部件类。因为导航器需要访问materialapp上下文

    class Home extends StatelessWidget {
 const Home({super.key});

  @override
  Widget build(BuildContext context) {
   return Scaffold(
    appBar: AppBar(
        actions: [
          IconButton(
            icon: Icon(
                Icons.arrow_forward_ios,
                color: Colors.black,
              ),
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) => FirstPage()));},
              )
        ]),
    body: Center(
      child: Text('Sample Text'),
    ),
   );
  }
}

    然后在 MainApp 中调用它

    class MyApp extends StatelessWidget {
 const MyApp({super.key});

 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   home: Home(), 
  ), 
 }
}
    • 0

  2. 最好有一个主类（通常是无状态的）来加载应用程序的第一页。

    这必须是唯一具有 MaterialApp 小部件的类。

    这是回答您问题的一个清晰的例子：

    主类：

    class MyApp extends StatelessWidget {
 const MyApp({super.key});

 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   home: HomePage(),
  ), 
 }

 Widget _getFirstPage() => HomePage()
}

    如果您定义一个在页面之间导航的方法，那就很好了：注意：必须在类之外和全局范围内定义。

    void pushTo(Widget page, BuildContext context) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => page,
      ),
    );
  }

    主页类：

    class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: Icon(
              Icons.arrow_forward_ios,
              color: Colors.black,
            ),
            onPressed: () {
              pushTo(HomePage(), context);
            },
          )
        ],
      ),
      body: Center(
        child: Text('Sample Text'),
      ),
    );
  }
}
    • 0

  3. 与 Navigator 一起使用的上下文是不支持导航的 MyApp 小部件的上下文（从构建函数 arg 中检索）。您需要 MaterialApp 小部件的上下文。

    选项 1： 获取 MaterialApp 小部件的有效上下文所需的最低要求是使用 LayoutBuilder。

      @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LayoutBuilder(
        builder: (materialAppContext, constraints) {
          return Scaffold(
            appBar: AppBar(actions: [
              IconButton(
                icon: Icon(Icons.arrow_forward_ios, color: Colors.black),
                onPressed: () {
                  Navigator.push(materialAppContext, MaterialPageRoute(builder: (context) => FirstPage()));
                },
              ),
            ]),
            body: Center(
              child: Text('Sample Text'),
            ),
          );
        },
      ),
    );
  }

    选项 2： 提取 HomePage 小部件，这样您的构建上下文将位于树中的 MaterialApp 小部件下方

    我的应用程序

    class MyApp extends StatelessWidget {
 const MyApp({super.key});

 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   home: HomePage(),
  ), 
 }
}

    主页

    class HomePage extends StatelessWidget {
  const HomePage({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(actions: [
        IconButton(
          icon: Icon(Icons.arrow_forward_ios, color: Colors.black),
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) => FirstPage()));
          },
        ),
      ]),
      body: Center(
        child: Text('Sample Text'),
      ),
    );
  }
}
    • 0
  4. Best Answer

    将 Flutter 中的 widget 视为一棵树，其上下文指向使用 build 函数构建的任何节点。在你的例子中，你有

    MyApp    <------ context
  --> MaterialApp
   (--> Navigator built within MaterialApp)
      --> Scaffold
        --> App Bar
          --> IconButton
        --> Center
          -->Text

    因此，当您使用上下文来查找导航器时，您使用的并不是导航器下的 MyApp 上下文。

    您可以创建一个新的无状态或有状态 Widget 子类来包含您的 AppBar + IconButton，因为其中的构建函数将指向该级别，或者您可以使用Builder并定义builder回调（具有指向 Builder 的上下文）以返回 AppBar + IconButton。

    类似问题：这里

    • 0

相关问题