使用WidgetsApp的应用导航示例

一尘不染

使用WidgetsApp的应用导航示例

flutter

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

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

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

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

我被困在这一步，我试图遵循ide中的Navigator文档和代码注释，但是我无法弄清楚如何使用的onGenerateRoute属性WidgetsApp，也无法在网上找到此示例的完整内容，因此就产生了问题。

类似于new MaterialApp()如何定义我的家庭路径和其中的其余路径new WidgetsApp()？

作为对此的后续问题，我是否可以使用通配符路由（例如）/onboarding/**或/dashboard/**内部new WidgetsApp()以某种方式路由到布局中，然后使用switch语句检查路由并显示页面？

阅读 340

2020-08-13

共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
    );
  }
}

希望能有所帮助！

2020-08-13