526互联

Flutter 命名路由与传参

发布时间 2023-12-18 16:13:11作者: angelwgh

路由配置

router/router.dart

import 'package:flutter/material.dart';
import '../pages/home.dart';
import '../pages/search.dart';
import '../pages/category.dart';

class MyRouter {
  // 路由列表
  final Map<String, Widget Function(BuildContext)> _routes = {
    '/': (context) => const Home(),
    '/search': (context, {arguments}) => Search(search: arguments), //传参路由
    '/category': (context) => const Category(),
  };
  // 默认路由
  String initialRoute = '/';
  final BuildContext context;
  
  MyRouter(this.context, [this.initialRoute = '/']);
  // 命名路由传参设置
  Route<dynamic>? onGenerateRoute(RouteSettings settings) {
    final String? name = settings.name;
    final Function? pageContentBuilder = _routes[name];
    if (pageContentBuilder != null) {
      if (settings.arguments != null) {
        final Route route = MaterialPageRoute(
            builder: (context) =>
                pageContentBuilder(context, arguments: settings.arguments));
        return route;
      } else {
        final Route route = MaterialPageRoute(
            builder: (context) => pageContentBuilder(context));
        return route;
      }
    }
    return null;
  }
}

引入路由配置

main.dart

import 'package:flutter/material.dart';
import './router/router.dart';

void main() {
  runApp(const App());
}
class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    final route = MyRouter(context);
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
        primaryColor: Colors.blue,
      ),
      initialRoute: route.initialRoute,
      // 渲染路由
      onGenerateRoute: route.onGenerateRoute,
    );
  }
}

路由跳转

pages/home.dart

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Column(
        children: [
          const Text('首页'),
          ElevatedButton(
            onPressed: () {
              // 命名路由传参
              Navigator.pushNamed(context, '/search', arguments: 'search');
            },
            child: const Text('搜索'),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, '/category');
            },
            child: const Text('分类'),
          ),
        ],
      ),
    );
  }
}

页面接收路由参数

pages/search.dart

import 'package:flutter/material.dart';

class Search extends StatelessWidget {
  final String search; // 传入的参数，参数名与router.dart中对应的配置保持一致
  const Search({super.key, required this.search});

  @override
  Widget build(BuildContext context) {
    // print(arguments);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Search'),
      ),
      body: Column(
        children: [
          Text(search),
        ],
      ),
    );
  }
}