欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flutter学习(二)-FlutterGo学习

程序员文章站 2022-07-14 16:51:00
...

目录
Flutter学习(一)
Flutter学习(二)-FlutterGo学习

FlutterGo是阿里拍卖前端团队针对于时下很火的跨平台移动解决方案推出的实例APP项目,对于Flutter初学者,学习掌握此项目是极其有益的。
github地址:https://github.com/alibaba/flutter-go

目录结构

fluro

Flutter本身提供了路由机制,作个人的小型项目,完全足够了。但是如果你要作企业级开发,可能就会把入口文件变得臃肿不堪。而再Flutter问世之初,就已经了企业级路由方案fluro。
github地址:https://github.com/theyakka/fluro
这边文章写的比较详细:Flutter路由_fluro引入配置和使用
接着Flutter 开发文档中的demo继续学习fluro。
在mai.dart中点击右上角,会打开已经收藏的名字,原文demo中使用flutter自带的路由实现,现在我用fluro来实现。
目录结构如下:
Flutter学习(二)-FlutterGo学习
1、先写收藏列表,这个界面很简单,就把传过来的名字展示一下(suggestion_page.dart):

import 'package:flutter/material.dart';

class SuggestionPage extends StatefulWidget {
  String suggestions;

  SuggestionPage(String suggestions) {
    this.suggestions = suggestions;
  }

  @override
  State<StatefulWidget> createState() {
    return SuggestionWidget();
  }

}

class SuggestionWidget extends State<SuggestionPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Center(
        child: Text(widget.suggestions),
      ),
    );
  }

}

2、处理router跳转的handle(router_handle.dart):

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/views/suggestion_page.dart';

var suggestionHandle = new Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
      var suggestions = params['suggestions'].first; // router参数
      return new SuggestionPage(suggestions); // 收藏界面
    }
);

3、定义路由文件(routers.dart):

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'router_handle.dart';

class Routers {
  static String root = '/'; // 根目录
  static String suggestion = '/suggestion'; // 收藏界面

  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(suggestion, handler: suggestionHandle);// 收藏界面
  }
}

4、全局管理router文件(application.dart),这样不用每次都去new router:

import 'package:fluro/fluro.dart';

class Application {
  static Router router;
}

5、在main.dart中初始化路由:

class MyApp extends StatelessWidget {

  MyApp() {
    final router = Router();
    Routers.configRouters(router);
    Application.router = router;
  }
  // ...........
  //调用路由跳转
Application.router.navigateTo(context, '${Routers.suggestion}?suggestions=${strJson}');
}

参数好像只能是String类型的???

相关标签: 跨平台