最近應(yīng)邀票圈小伙伴躺坑Flutter烘苹，項(xiàng)目初步雛形完結(jié)署照。以原來(lái)的工具鏈版本為基礎(chǔ)做了Flutter版本功戚，不過(guò)后面還是需要優(yōu)化下項(xiàng)目接入Redux缨该，以及擴(kuò)展一些Native方法别凤。
這里記錄一下在開(kāi)發(fā)過(guò)程中碰到的一些小問(wèn)題饰序。
首先是搭建Tab的時(shí)候，切換tab子頁(yè)面规哪，上一個(gè)頁(yè)面會(huì)被釋放求豫，導(dǎo)致切換回來(lái)時(shí)會(huì)重新觸發(fā)initState等生命周期（網(wǎng)絡(luò)請(qǐng)求是放在這個(gè)里面的）
問(wèn)了一下前同事：“需要使用 bool get wantKeepAlive => true;”，于是網(wǎng)上搜了一下這個(gè)玩意兒，以及其他解決方案蝠嘉。
首先說(shuō)說(shuō)使用wantKeepAlive的方案：這是Flutter官方提供并推薦的最疆，源自于AutomaticKeepAliveClientMixin用于自定義保存狀態(tài)。
先看看實(shí)現(xiàn)Tab的代碼(有幾種實(shí)現(xiàn)Tab的方式蚤告，后續(xù)博客更新)：
class _TabPageState extends State<TabPage> with SingleTickerProviderStateMixin {
//屬性
int _tabindex;
PageController _pageController;
@override
void initState() {
print("tabController");
super.initState();
_pageController = new PageController();
_tabindex = 0;
}
//當(dāng)整個(gè)頁(yè)面dispose時(shí)努酸，記得把控制器也dispose掉，釋放內(nèi)存
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
print("tabIndex $_tabindex");
return Scaffold(
body: new PageView(
children: [new ListPage(), new AppletPage()],
controller: _pageController,
physics: new NeverScrollableScrollPhysics(),
onPageChanged: onPageChanged,
),
bottomNavigationBar: new BottomNavigationBar(
onTap: navigationTapped,
currentIndex: _tabindex,
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: new Icon(Icons.brightness_5), title: new Text("工具鏈")),
new BottomNavigationBarItem(
icon: new Icon(Icons.map), title: new Text("小程序"))
],
),
);
}
void navigationTapped(int page) {
//Animating Page
_pageController.jumpToPage(page);
}
void onPageChanged(int page) {
setState(() {
this._tabindex = page;
});
}
}
根據(jù)官網(wǎng)的要求：
-
PageView的children需要繼承自StatefulWidget -
PageView的children的State需要繼承自?AutomaticKeepAliveClientMixin
具體實(shí)現(xiàn)如下：
import 'package:flutter/material.dart';
class AppletPage extends StatefulWidget {
//構(gòu)造函數(shù)
AppletPage({Key key}) : super(key: key);
@override
_AppletPageState createState() => _AppletPageState();
}
class _AppletPageState extends State<AppletPage>
with AutomaticKeepAliveClientMixin {
@override
bool get wantKeepAlive => true; // 返回true
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text("小程序"),
backgroundColor: Colors.blue, //設(shè)置appbar背景顏色
centerTitle: true, //設(shè)置標(biāo)題是否局中
),
body: new Center(
child: new Text('敬請(qǐng)期待'),
),
),
);
}
}
