上一次我們建立了專案，整合了 fish-redux ，安裝了外掛，並寫出第一個頁面，這次我們更詳細的瞭解 fish-redux 。並實現一個簡單的列表。效果：
1 跳轉到一個新的頁面
1.1 建立一個新頁面
我們用上一篇講述的的方式：建立 package 、建立 FishReduxTemplate 來得到新的頁面，取名叫 Grid 。
把這個頁面也新增到app.dart的頁面路由中。app.dart修改如下
Widget createApp() {
final AbstractRoutes routes = PageRoutes(
pages: <String, Page<Object, dynamic>>{
'entrance_page': EntrancePage(),
'grid_page': GridPage(), //新增這一行
},
);
//省略 ...
}
複製程式碼然後編輯這個頁面的 view.dart，暫且讓它顯示一行文字。/grid/view.dart如下
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'state.dart';
Widget buildView(GridState state, Dispatch dispatch, ViewService viewService) {
return Scaffold(
appBar: new AppBar(
title: new Text('Grid頁面'),
),
body: Text("Grid頁面"),
);
}
複製程式碼1.2 完成頁面的跳轉
理清思路：為了從 entrance 頁面跳轉到 grid 頁面。我們需要：
- 為 entrance 頁面定義跳轉的 action
- 在 entrance 頁面跳轉的地方 dispatch 這個 action
- 在 effect 處理這個 action，即進行頁面跳轉（這裡不涉及到狀態的更新，所以不在 reducer 裡處理啦）
第一步 定義 action
我們開啟 /entrance/action.dart 發現由模板建立的程式碼中為我們預設定義了一個action，我們照它的樣子新增自己的 action ，取名叫 openGrid 表示開啟 grid 頁面的事件。修改後的 /entrance/action.dart 如下
import 'package:fish_redux/fish_redux.dart';
enum EntranceAction { action, openGrid }//增加openGrid
class EntranceActionCreator {
static Action onAction() {
return const Action(EntranceAction.action);
}
//我們定義的
static Action onOpenGrid() {
return const Action(EntranceAction.openGrid);
}
}
複製程式碼第二步 傳送Action
我們開啟 /entrance/view.dart，為 RaisedButton 寫點選事件 onPress。在這裡dispatch我們定義的OpenGrid事件。
dispatch(EntranceActionCreator.onOpenGrid());
複製程式碼修改後的 /entrance/view.dart如下
第三步 接收並處理事件
開啟 /entrance/effect.dart，讓它接收並處理我們定義的 OpenGrid Action。 /entrance/effect.dart程式碼如下
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/widgets.dart' hide Action; //注意1
import 'action.dart';
import 'state.dart';
Effect<EntranceState> buildEffect() {
return combineEffects(<Object, Effect<EntranceState>>{
EntranceAction.action: _onAction,
EntranceAction.openGrid: _onOpenGrid, //接收openGrid事件
});
}
void _onAction(Action action, Context<EntranceState> ctx) {
}
//處理openGrid事件
void _onOpenGrid(Action action, Context<EntranceState> ctx) {
Navigator.of(ctx.context).pushNamed('grid_page', arguments: null); //注意2
}
複製程式碼這裡有兩個地方要注意。第一個地方是由於我們跳轉頁面引入的 widgets.dart 包含 Action 類，會與 fish-redux 的 Action 衝突並報錯，所以在 import 時需要 hide Action ，之後就不在贅述。另外，pushNamed() 方法第一個引數就是我們在 app.dart 裡面定義的頁面路由。
然後我們執行看看效果：點選進入，跳轉到了grid頁面。
2 簡單的列表
現在我們來把 grid 頁面改造成一個簡單的列表。
2.1 定義資料格式
我新建一個 model.dart 存放我的資料實體類 。我在 GridModel 簡單的定義了一個 name 欄位 model.dart 如下
然後在 grid 頁面的 state.dart 中，建立資料的集合。修改後端 /grid/state.dart如下
import 'package:fish_redux/fish_redux.dart';
import '../model.dart';
class GridState implements Cloneable<GridState> {
List<GridModel> models; // 存放資料
@override
GridState clone() {
return GridState()
..models = models; //clone規則
}
}
GridState initState(Map<String, dynamic> args) {
return GridState();
}
複製程式碼2.2 在介面上展示
接著我們在頁面中通過 gridview 展示我們的資料，列表的資料就採用 state 中的 models。修改 /grid/view.dart 如下
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'state.dart';
Widget buildView(GridState state, Dispatch dispatch, ViewService viewService) {
return Scaffold(
appBar: new AppBar(
title: new Text('Grid頁面'),
),
body: new GridView.count(
crossAxisCount: 2,//列數
crossAxisSpacing: 20.0,// 左右間隔
mainAxisSpacing: 20.0,// 上下間隔
childAspectRatio: 1 / 1, //寬高比
padding: EdgeInsets.all(20),
children: new List.generate(state.models.length, (index) {//使用state裡面的models生成列表
return Center(
child: Card(
color: Colors.lightBlueAccent,
child: InkWell(
splashColor: Colors.blue.withAlpha(100),
onTap: () {
//todo 點選事件
},
child: Container(
width: 200,
height: 200,
child: Center(
child: Text(state.models[index].name),//展示name欄位
),
),
),
));
}),
),
);
}
複製程式碼資料格式和展示樣式都已經完成，接下來我們來獲得資料。
2.3 資料來源
我建立一個 api.dart 用來進行資料請求。
import 'model.dart';
class Api {
factory Api() {
return _get();
}
static Api _instance;
Api._internal() {
//init Api instance
}
static _get() {
if (_instance == null) {
_instance = Api._internal();
}
return _instance;
}
List<GridModel> getGridData() {
return [
GridModel(name: "第一塊"),
GridModel(name: "第二塊"),
GridModel(name: "第三塊"),
GridModel(name: "第四塊"),
GridModel(name: "第五塊"),
GridModel(name: "第六塊"),
GridModel(name: "第七塊"),
GridModel(name: "第八塊"),
GridModel(name: "第九塊"),
GridModel(name: "第十塊"),
];
}
}
複製程式碼2.4 載入資料
我們需要在 grid 頁面進入時進行資料載入。首先通過 effect 接收 state 初始化的生命週期事件，在 state 初始化的時候，我們 dispatch 一個載入資料的 action 給 reducer，reducer 接收事件，請求資料並更新 state 。
第一步 定義action
在 /grid/action.dart 中新增一個 action, 取名 loadData。新增後如下
import 'package:fish_redux/fish_redux.dart';
enum GridAction { action, loadData }
class GridActionCreator {
static Action onAction() {
return const Action(GridAction.action);
}
static Action onLoadData() {
return Action(GridAction.loadData);
}
}
複製程式碼第二步 初始化時傳送action
然後在 effect 中監聽初始化事件，併傳送 loadData Action。修改後的 /grid/effect.dart 如下
import 'package:fish_redux/fish_redux.dart';
import 'action.dart';
import 'state.dart';
Effect<GridState> buildEffect() {
return combineEffects(<Object, Effect<GridState>>{
Lifecycle.initState: _init, //頁面初始化
GridAction.action: _onAction,
});
}
void _onAction(Action action, Context<GridState> ctx) {
}
void _init(Action action, Context<GridState> ctx) {
ctx.dispatch(GridActionCreator.onLoadData()); //傳送事件
}
複製程式碼第三步 接收action並更新state
最後在 reducer 中接收 loadData 事件，呼叫 Api 請求資料, 並更新 state 。修改後的 /grid/reducer.dart如下
import 'package:fish_redux/fish_redux.dart';
import '../api.dart';
import 'action.dart';
import 'state.dart';
Reducer<GridState> buildReducer() {
return asReducer(
<Object, Reducer<GridState>>{
GridAction.action: _onAction,
GridAction.loadData: _onLoadData, //接收loadData Action
},
);
}
GridState _onAction(GridState state, Action action) {
final GridState newState = state.clone();
return newState;
}
//初始化資料
GridState _onLoadData(GridState state, Action action) {
final GridState newState = state.clone()..models = Api().getGridData();//從Api請求資料
return newState;
}
複製程式碼執行一下看看效果
?如果我的內容對您有幫助，歡迎點贊、評論、轉發、收藏。