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,
        );
}

這裏比較簡單,不用多加解釋,其實很多地方我們都是可以做類似的操作的,這是我們可以做到的最低成本的封裝,接下來我會將一部分有類似需求的功能進行同樣封裝,這裏就不再佔用更多的篇幅了。
接下來會去介紹項目中遇到的問題和一些自己的想法。可以持續關注。

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