bilibili案例学习—框架搭建

本文介绍如何在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);
          },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值