Flutter实战(一、项目搭建(下))

项目搭建(下)

一起从0开始Flutter实战!

上篇文章中我们的项目结构以及基础的网络,存储以及配置完成了,接下来将所有页面的主题颜色,通用下拉刷新来做封装,写下来感觉有些地方的不是很好描述或者思路大于写博客的意义,所以在实战篇中不会把每个部分代码都再拿出来写了,感觉意义不大,Flutter的项目例子也找了看了一些没有看到特别好的分层结构,我也在想如何针对Flutter的多层嵌套的问题作出一个比较简单易做的分隔,减少多层级的嵌套,如果有好的思路可以一起讨论。
接下来我可能只会将遇到的问题和一些解决问题的思路整理一下来做分享,更多的内容可以去GitHub上去看下,如果有不妥的地方还请多多指点,大家共同学习。

在以前的APP上经常看到一键换肤的功能,在Flutter中会比较简单的实现,我们每个页面都是用统一的主题颜色,修改提供的统一颜色变量,然后刷新当前页面即可。我们先看下主题变量的设置:

class Style {
  //主题颜色的变量,为了以后如果出现换肤的预留
  static int THEME_COLOR = 0xFFCC1100;

  //全局的背景颜色
  static int BACKGROUND_COLOR = 0xFFFFFFFF;

  //设置全局的主题颜色
  static Color themeColor = Color(THEME_COLOR);
}

很是简单,然后在我们的页面的使用主题颜色的部分时直接使用:

color: Style.themeColor

其他的背景颜色,字体颜色都是类似的设置,不再多赘述。
下拉刷新的通用封装,这里借用了第三方的框架pull_to_refresh,我们一起看下如何使用下拉刷新:
首先我们先引入第三方的库:

dependencies:
	pull_to_refresh: ^1.5.8

在我们需要使用的类中引入下拉刷新的类:

import 'package:pull_to_refresh/pull_to_refresh.dart';

这里我做了一个全局的下拉刷新管理类,目的是为了让多个地方使用的时候不用逐个去进行初始化的操作,让它能更简单的实现我们的功能:

class CommonRefreshWidget extends SmartRefresher {
  ///这里的继承是为了能初始化一部分参数,
  ///这样以后使用的时候就可以拿到统一模板化的RefreshWidget,
  ///并且还可以根据自己的需要进行部分参数的修改
  CommonRefreshWidget(
      {Key key,
      @required controller,
      child,
      header:const ClassicHeader(
        height: 10,
      ),
      footer:const ClassicFooter(

      ),
      enablePullDown: true,
      enablePullUp: true,
      enableTwoLevel: false,
      onRefresh,
      onLoading,
      onTwoLevel,
      onOffsetChange,
      dragStartBehavior,
      primary,
      cacheExtent,
      semanticChildCount,
      reverse,
      physics,
      scrollDirection,
      scrollController})
      : assert(controller != null),
        super(
          key: key,
          controller: controller,
          child: child,
          header: header,
          footer: footer,
          enablePullDown: enablePullDown,
          enablePullUp: enablePullUp,
          enableTwoLevel: enableTwoLevel,
          onRefresh: onRefresh,
          onLoading: onLoading,
          onTwoLevel: onTwoLevel,
          onOffsetChange: onOffsetChange,
          dragStartBehavior: dragStartBehavior,
          primary: primary,
          cacheExtent: cacheExtent,
          semanticChildCount: semanticChildCount,
          reverse: reverse,
          physics: physics,
          scrollDirection: scrollDirection,
          scrollController: scrollController,
        );
}

这里比较简单,不用多加解释,其实很多地方我们都是可以做类似的操作的,这是我们可以做到的最低成本的封装,接下来我会将一部分有类似需求的功能进行同样封装,这里就不再占用更多的篇幅了。
接下来会去介绍项目中遇到的问题和一些自己的想法。可以持续关注。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章