Question

我正在尝试声明我的应用导航。由于我没有使用MaterialApp包装或样式，我的所有导入都来自package:flutter/widgets.dart。

根据文档，要正确使用导航，我这样做：

import "package:flutter/widgets.dart";
import "package:myapp/routes/home.dart";

void main() {
  runApp(
    new WidgetsApp(/* stuck here */);
  )
}

我坚持这一步，我正在尝试关注Navigator docs并在ide中编写注释，但我无法弄清楚如何使用onGenerateRoute的{{1}}属性，也无法找到这个在线的完整例子，因此问题。

与WidgetsApp类似，如何在new MaterialApp()内定义我的主路径和其余路径？

作为对此的后续问题，我是否允许在new WidgetsApp()内使用/onboarding/**或/dashboard/**之类的通配符路由以某种方式路由到布局，然后使用switch语句检查路线和显示页面？

Answer 1

您可以使用onGenerateRoute属性为小部件应用生成路由。

这是一个非常小的实现：

import 'package:flutter/widgets.dart';

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

class MyWidgetsApp extends StatelessWidget {

  Route generate(RouteSettings settings){
    Route page;
    switch(settings.name){
      case "/":
        page =  new PageRouteBuilder(
            pageBuilder: (BuildContext context,Animation<double> animation,
                Animation<double> secondaryAnimation){
              return new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text("Home Page",textDirection: TextDirection.ltr,),
                  const Padding(padding: const EdgeInsets.all(10.0)),
                  new GestureDetector(
                    onTap: () => Navigator.of(context).pushNamed("/first"),
                    child: new Container(
                      padding: const EdgeInsets.all(10.0),
                      color:Colors.blue,
                      child: const Text("Go to First Page"),
                    ),
                  ),
                  const Padding(padding: const EdgeInsets.all(10.0)),
                  new GestureDetector(
                    onTap: () => Navigator.of(context).pushNamed("/abcd"),
                    child: new Container(
                      padding: const EdgeInsets.all(10.0),
                      color:Colors.blue,
                      child: const Text("Unkown Route"),
                    ),
                  )
                ],
              );
            },
            transitionsBuilder: (_, Animation<double> animation, Animation<double> second, Widget child) {
              return new FadeTransition(
                opacity: animation,
                child: new FadeTransition(
                  opacity: new Tween<double>(begin: 1.0, end: 0.0).animate(second),
                  child: child,
                ),
              );
            }
        );
        break;
      case "/first":
        page =  new PageRouteBuilder(
            pageBuilder: (BuildContext context,Animation<double> animation,
                Animation<double> secondaryAnimation){
              return new Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    const Text("First Page",textDirection: TextDirection.ltr,),
                    const Padding(padding: const EdgeInsets.all(10.0)),
                    new GestureDetector(
                      onTap: () => Navigator.of(context).pop(),
                      child: new Container(
                        padding: const EdgeInsets.all(10.0),
                        color:Colors.blue,
                        child: const Text("Back"),
                      ),
                    )
                  ]
              );
            },
            transitionsBuilder: (_, Animation<double> animation, Animation<double> second, Widget child) {
              return new FadeTransition(
                opacity: animation,
                child: new FadeTransition(
                  opacity: new Tween<double>(begin: 1.0, end: 0.0).animate(second),
                  child: child,
                ),
              );
            }
        );
        break;
    }
    return page;
  }

  Route unKnownRoute(RouteSettings settings){
    return new PageRouteBuilder(
        pageBuilder: (BuildContext context,Animation<double> animation,
            Animation<double> secondaryAnimation){
          return new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text("First Page",textDirection: TextDirection.ltr,),
                const Padding(padding: const EdgeInsets.all(10.0)),
                new GestureDetector(
                  onTap: () => Navigator.of(context).pop(),
                  child: new Container(
                    padding: const EdgeInsets.all(10.0),
                    color:Colors.blue,
                    child: const Text("Back"),
                  ),
                )
              ]
          );
        }
    );
  }

  @override
  Widget build(BuildContext context) {
    return new WidgetsApp(
        onGenerateRoute: generate,
        onUnknownRoute: unKnownRoute,
        textStyle: const TextStyle(),
        initialRoute: "/",
        color: Colors.red
    );
  }
}

希望有所帮助！

使用WidgetsApp的App导航示例

1 个答案: