本文将为你讲解两个动态页面之间的跳转以及如何传递参数。

假如有两个动态页面：PageOne 和 PageTwo。

我们现在要实现从 PageOne 跳转到 PageTwo，同时传递一些参数。

实现步骤如下：

step1.定义路由

在 main.dart 的 routes 内添加公共跳转路径：

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

  WidgetsFlutterBinding.ensureInitialized();

  FairApp.runApplication(
    _getApp(),
    plugins: {},
  );
}

dynamic _getApp() => FairApp(
  modules: {},
  delegate: {},
  child: MyApp(),
);

/// 获取路由传递的参数
dynamic _getParams(BuildContext context, String key) =>
    (ModalRoute.of(context)?.settings.arguments is Map) ? (ModalRoute.of(context)?.settings.arguments as Map)[key] : null;

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        /// 注册公共路由
        routes: {
          'fair_page_two': (context) => FairWidget(
              path: _getParams(context, 'path'),
              data: {'fairProps': jsonEncode(_getParams(context, 'data'))}),
        },
          
        ......
  }
}

目标页面依然需要使用 FairWidget 来进行加载。

step2.使用 Navigator.pushNamed() 进行跳转

目前动态页面之间的跳转，只能使用 Navigator.pushNamed() 即命名路由的方式进行跳转。

跳转参数，需要传递目标页面的 bundle 路径，一般 key 指定为 path，如： 'path': 'assets/bundle/lib_page2page_page_two.fair.json'

如果需要给动态页面传值，一定要使用 Map 结构的数据，key 一般指定为 data，如： 'data': {'title': 'PageTwo'}

代码参考如下：

@FairPatch()
class PageOne extends StatefulWidget {
  const PageOne({Key? key}) : super(key: key);

  @override
  _PageOneState createState() => _PageOneState();
}

class _PageOneState extends State<PageOne> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('PageOne'),
        ),
        body: Container(
            child: Padding(
              padding: EdgeInsets.all(20),
              child: Text('点击右下角按钮跳转到下个页面'),
            )
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            /// 跳转动态页面
            Navigator.pushNamed(context, 'fair_page_two', arguments: {
              'path': 'assets/bundle/lib_page2page_page_two.fair.json',
              'data': {'title': 'PageTwo'}
            });
          },
          tooltip: 'Increment',
          child: const Icon(Icons.arrow_forward_sharp),
        )
    );
  }
}

step3.接收参数

需要定义一个变量来接收 Map 类型的参数：dynamic fairProps

@FairPatch()
class PageTwo extends StatefulWidget {
  PageTwo({Key? key,this.fairProps}) : super(key: key);

  dynamic fairProps;

  @override
  _PageTwoState createState() => _PageTwoState();
}

class _PageTwoState extends State<PageTwo> {
  @FairProps()
  var fairProps;

  @override
  void initState() {
    super.initState();
    fairProps = widget.fairProps;
  }

  String getTitle() {
    return fairProps['title'];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          /// 如果需要进行字符串拼接的话，在build()方法里进行拼接即可，不建议在getTitle()
          /// 方法里做字符串拼接
          title: Text('参数：${getTitle()}'),
        ),
        body: Container(
            child: Padding(
              padding: EdgeInsets.all(20),
              child: Text('xxxxx'),
            )
        ),
    );
  }
}

接收到的参数，如果需要进行字符串拼接操作，建议直接在 build() 方法里进行。