跨平台方案 |Flutter |Flutter浅尝

项目结构

• paltform_flutter_base

  • 最基础的工具类

• paltform_flutter_core

  • 项目定制化共通

• paltform_flutter

  • 最上层的应用

封装效果

使用

pubspec.yaml pub导入

 
dependencies:
  flutter_core:
    path: packages/flutter_core

使用时导包

import 'package:flutter_core/export_public.dart';

入口页面

void main() {
  initApplication(
      "hello",//title
      ThemeData(//主题样式
        primarySwatch: Colors.blue,
      ),
      routes: routes);//动态路由
}

路由配置

///动态路由表，
///       path---只有登录页有，标识的是哪个页面进来的，登录完成之后跳转回去
///       arguments是一个可以为空的参数，这个是页面跳转是传递的参数，object对象
Map<String, YxMaterialRoutePage> routes = {
  //默认启动页，这个是必须要有的，而且key也是固定的
  "/": YxMaterialRoutePage(route: (arguments) => Welcome()),

  //登录页，现在也是必须的，key值固定
  "/login": YxMaterialRoutePage(
      loginCallback: (path, arguments) => Login(path, arguments)),

  //自由页面
  "/home": YxMaterialRoutePage(
      route: (arguments) => Home(arguments), loginRequired: true),
};

wiget页面

@override
Widget build(BuildContext context) {
  //全屏显示
  CommonHelper.fullscreen();
  return YxViewRoot(
    //背景图片
    image: 'assets/bg_login.png',
    //展示内容
    child: Center(
      child: Text(
        "Welcome",
        style: TextStyle(
          color: Colors.white,
          fontSize: 60,
        ),
      ),
    ),
  );
}

接口调用

HttpManager.getInstance().post("user/login",
        params: {"username": "13812345678", "password": "654321"},
        successCallBack: (data) {
      M model = JsonConvert.fromJsonAsT<M>(data);
    }, errorCallBack: (err) {
      print(err);
    });

再次封装一层Api之后的调用

Api.list((data) => {});

权限控制

扩展函数封装

runWithPermission(
          [Permission.READ_EXTERNAL_STORAGE, Permission.WRITE_EXTERNAL_STORAGE],
          () {
              //获取到该权限后需要执行的方法
      });

使用第三方的sdk

Map<Permission, PermissionStatus> statuses = await [
      Permission.camera,
      Permission.storage,
    ].request();
if (statuses[Permission.storage].isGranted) {
      //获取到该权限后需要执行的方法
    }

状态栏与导航栏

import 'package:base_flutter/utils/libs_utils_common.dart';
CommonHelper.fullscreen();
CommonHelper.normal();

绘制列表页

import 'package:flutter/material.dart';
import 'package:flutter_core/export_public.dart';
import 'package:platform_flutter_app/http/app_http_api.dart';
import 'package:platform_flutter_app/model/model_home_list_entity.dart';

class Home extends StatefulWidget {
  //页面传参
  final arguments;

  Home(this.arguments);

  //创建一个state
  @override
  State createState() => _HomeState(_HomeViewModel());
}

//继承ListState，使用封装的列表页面
//ModelHomeListList 是一个泛型支持，这里的作用是 createItem 方法的时候，可以更好的返回对应的对象
class _HomeState extends ListState<ModelHomeListList> {
  _HomeState(_HomeViewModel viewModel) : super(viewModel);

  @override
  Widget build(BuildContext context) {
    //显示状态栏---这个地方是因为上一个页面设置了全面模式，所以这里要设置回来
    CommonHelper.normal();
    return super.build(context);
  }

  //创建item的方法，这个是必须的
  @override
  createItem(ModelHomeListList item) {
    return Card(child: Center(child: Text(item.name??"没名字")));
  }
}
//准备用mvvm的方式实现，现在只是用了ViewModel的名字，但是实现效果不标准
//ModelHomeListList  这个泛型支持的作用是，onLoad 拉取数据时 对应的call设置值用到的
class _HomeViewModel extends BaseViewModel<ModelHomeListList> {
  ///call 返回一个list
  ///分页效果，page在首次进入和下拉刷新时是1
  ///上拉加载共多的时候，page会 +1
  @override
  onLoad(int page, Function call) {
    Api.list((l) => {call(l.xList)});
  }
}

实现效果

https://xuqinmin.com/xuqinmin12/paltform_flutter/src/master/images/device-2020-10-30-162403.png