bilibili案例学习—框架搭建

最新推荐文章于 2025-04-29 15:47:19 发布

胖哥哥飘过

最新推荐文章于 2025-04-29 15:47:19 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.youkuaiyun.com/pgg_cold/article/details/95060113

flutter 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何在Flutter项目中使用Fluro库进行路由管理，包括库的引入、初始化、编写路由规则及静态化过程。同时，文章还涵盖了Provide状态管理库的使用方法，从创建、初始化到获取和修改状态的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

fluro跳转路由库

引入：

dependencies:
  fluro: "^1.4.0"

初始化：在main.dart文件中main方法中初始化

void main() {
  //路由配置
  var router = new Router();
  Routers.configRouters(router);
  Application.router = router;
  runApp(MyApp());
}

1.编写Routers类：

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'rotuer_handler.dart';
import '../global/contants.dart';

class Routers{
  static String root='/';
  static void configRouters(Router router){
    //路由找寻不到时，作出提示
    router.notFoundHandler = new Handler(
      handlerFunc: (BuildContext context,Map<String,List<String>> params){
        print('ERROR====>ROUTE WAS NOT FONUND!!!');
      }
    );
    //定义跳转到首页的路由
    router.define(Constant.homePage, handler: homeHandler);
  }
}

2.编写router_handler文件：
handler相当于一个路由的规则，比如我们要到详细页面，这时候就需要传递商品的ID，那就要写一个handler。

import 'package:flutter/material.dart';
import '../pages/HomePage.dart';
import 'package:fluro/fluro.dart';

Handler homeHandler = new Handler(
  handlerFunc: (BuildContext context,Map<String,List<String>> map){
    return HomePage();
  }
);

3.路由_fluro的静态化

import 'package:fluro/fluro.dart';

class Application{
  static Router router;
}

4.使用过程

void goToHomePage(){
    ////如果页面还未跳转过则跳转页面
    if(!isUserLoginPage){
      //跳转主页 且销毁当前页面
      Application.router.navigateTo(context, Constant.homePage);
      isUserLoginPage=true;
    }
  }

Provide状态管理库

引入：

dependencies:
    provide: ^1.0.2

创建Provide：

import 'package:flutter/material.dart';

class CurrentIndexProvide extends ChangeNotifier{
  int currentIndex = 0;
  changeIndex(int newIndex){
    currentIndex = newIndex;
    notifyListeners();
  }
}

初始化：

void main(){
  var curProvide =CurrentIndexProvide();
  var providers  =Providers();
  providers
    ..provide(Provider<Counter>.value(curProvide));
  runApp(ProviderNode(child:MyApp(),providers:providers));
}

获取状态：
使用Provide Widget的形式就可以获取状态，

Provide<CurrentIndexProvide>(builder: (context,child,val){
int currentIndex = Provide.value<CurrentIndexProvide>(context).currentIndex;
}

修改状态:

onTap: (index) {
            Provide.value<CurrentIndexProvide>(context).changeIndex(index);
          },