Flutter第十六节-----路由管理（2）

一.命名路由传递参数●作用通过路由传递参数是实现页面间数据通信的常用方式●传递参数命名路由Navigator.pushNamed(context,地址arguments:{参数)●接收参数命名路由ModalRoute.of(context)?.settings.arguments●接收时机initState获取不到路由参数放置在Future.microtask(异步微任务)中import package:dio/dio.dart; import package:flutter/cupertino.dart; import package:flutter/material.dart; void main(ListString args) { runApp(MainPage()); } class MainPage extends StatelessWidget { const MainPage({Key? key}) : super(key: key); override Widget build(BuildContext context) { return MaterialApp( home: ListPage(), initialRoute: /list, routes: { /list: (context) ListPage(), /detail: (context) DetailPage(), }, ); } } class ListPage extends StatefulWidget { ListPage({Key? key}) : super(key: key); override _ListPageState createState() _ListPageState(); } class _ListPageState extends StateListPage { override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(列表页)), body: ListView.builder( itemCount: 100, padding: EdgeInsets.all(10), itemBuilder: (BuildContext context, int index) { return GestureDetector( //用于识别用户的按下 onTap: () { Navigator.pushNamed( context, /detail, arguments: {id: index 1}, ); // Navigator.push( // context, // MaterialPageRoute(builder: (context) DetailPage()), // ); }, child: Container( height: 100, margin: EdgeInsets.only(top: 10), color: Colors.blue, alignment: Alignment.center, child: Text( 列表项${index 1}, style: TextStyle(color: Colors.white, fontSize: 16), ), ), ); }, ), ); } } class DetailPage extends StatefulWidget { DetailPage({Key? key}) : super(key: key); override _DetailPageState createState() _DetailPageState(); } class _DetailPageState extends StateDetailPage { override String _id ; void initState() { // TODO: implement initState super.initState(); Future.microtask(() { if (ModalRoute.of(context) ! Null) { MapString, dynamic params ModalRoute.of(context)!.settings.arguments as MapString, dynamic; print(params[id]); _id params[id].toString(); setState(() {}); } }); } override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(详情页)), body: Center( child: Column( children: [ TextButton( onPressed: () { Navigator.pop(context); }, child: Text(列表页$_id), ), TextButton( onPressed: () { Navigator.pop(context); }, child: Text(返回上一个页面), ), ], ), ), ); } }二.基础路由传递参数●传递参数基础路由通过组件构造函数传递参数-父传子●接收参数基础路由通过组件构造函数接收参数-父传子●接收时机initState可获取到基础路由的构造函数传参