当前位置：首页 > news >正文

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

news 2026/7/23 13:12:06

一.命名路由传递参数

●作用：通过路由传递参数是实现页面间数据通信的常用方式
●传递参数（命名路由）：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(List<String> 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 State<ListPage> { @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 State<DetailPage> { @override String _id = ""; void initState() { // TODO: implement initState super.initState(); Future.microtask(() { if (ModalRoute.of(context) != Null) { Map<String, dynamic> params = ModalRoute.of(context)!.settings.arguments as Map<String, 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("返回上一个页面"), ), ], ), ), ); } }