17flutter中的路由/命名路由/命名路由传值/无状态组件传值/有状态组件传值。

逃离我推掉我的手 2023-08-17 15:59 167阅读 0赞

main.dart

import 'package:flutter/material.dart';
    import 'package:flutter_demo/pages/Search.dart';
    
    import 'routes/Routes.dart';
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
          initialRoute: '/',
          onGenerateRoute: onGenerateRoute
          );
      }
    }

Product.dart

import 'package:flutter/material.dart';
    
    class ProductPage extends StatefulWidget {
      ProductPage({Key key}) : super(key: key);
    
      _ProductPageState createState() => _ProductPageState();
    }
    
    class _ProductPageState extends State<ProductPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text('商品页面'),
            ),
            body: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                    child: Text('跳转到商品详情页面'),
                    onPressed: () {
                      Navigator.pushNamed(context, '/productinfo',
                          arguments: {
         "pid":778899});
                    },
                    color: Theme.of(context).accentColor,
                    textTheme: ButtonTextTheme.primary),
              ],
            ));
      }
    }

ProductInfo.dart

import 'package:flutter/material.dart';
    class ProductInfoPage extends StatefulWidget {
      Map arguments;
      ProductInfoPage({Key key,this.arguments}) : super(key: key);
    
      _ProductInfoPageState createState() => _ProductInfoPageState(arguments:this.arguments);
    }
    
    class _ProductInfoPageState extends State<ProductInfoPage> {
       Map arguments;
       _ProductInfoPageState({
         this.arguments});
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('商品详情页面'),
          ),
          body: Text("这是一个商品详情页面pid=${arguments["pid"]}")
        );
      }
    }

Routes.dart

import 'package:flutter/material.dart';
    import '../pages/Product.dart';
    import '../pages/ProductInfo.dart';
    import '../pages/Form.dart';
    import '../pages/Search.dart';
    import '../pages/Tabs.dart';
    
    final routes = {
      '/': (context) => Tabs(),
      '/form': (context) => FormPage(),
      '/product': (context) =>ProductPage(),
      '/productinfo': (context, {arguments}) =>ProductInfoPage(arguments: arguments),
      '/search': (context, {arguments}) => SearchPage(arguments: arguments)
    };
    //固定写法：
    var 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;
        }
      }
    };

Home.dart

import 'package:flutter/material.dart';
    class HomePage extends StatelessWidget {
      const HomePage({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('跳转到搜索页面'),
              onPressed: (){
                Navigator.pushNamed(context,'/search',arguments: {
                  "id":123
                });
              },
              color: Theme.of(context).accentColor,
              textTheme: ButtonTextTheme.primary
            ),
            RaisedButton(
              child: Text('跳转到商品页面'),
              onPressed: (){
                Navigator.pushNamed(context,'/product');
              }
            )
          ],
        );
      }
    }

转载于:https://www.cnblogs.com/yiweiyihang/p/11479670.html