上一篇中我記錄了基於Flutter的開源中國客戶端的整體佈局框架的搭建，本篇記錄的是每個頁面的靜態實現，關於具體的資料載入和儲存，放在下一篇中記錄，希望自己在溫故知新的同時，能給Flutter初學者一些幫助。
在基於Flutter的開源中國客戶端中，使用得最多的就是ListView元件了，基本上80%的頁面都需要用列表展示，下面分別說明每個頁面的實現過程。
側滑選單頁面的實現
上一篇中我們僅僅在側滑選單中放置了一個Center元件並顯示了一行文字，這一篇中需要實現的側滑選單效果如下圖：
側滑選單的頭部是一個封面圖，下面是一個選單列表，我們可以將封面圖和各個選單都當作ListView的Item，所以這裡涉及到了ListView的子Item的多佈局。
上一篇的程式碼裡我們是直接為MaterialApp新增了一個drawer引數並new了一個Drawer物件，為了合理組織程式碼，這裡我們在lib/目錄下新建一個widgets/目錄，用於存放我們自定義的一些元件，並新建dart檔案MyDrawer.dart，由於該頁面不需要重新整理，所以我們在MyDrawer.dart中定義無狀態的元件MyDrawer，在該元件中定義需要用到的如下幾個變數：
class MyDrawer extends StatelessWidget {
// 選單文字前面的圖示大小
static const double IMAGE_ICON_WIDTH = 30.0;
// 選單後面的箭頭的圖示大小
static const double ARROW_ICON_WIDTH = 16.0;
// 選單後面的箭頭圖片
var rightArrowIcon = new Image.asset(
'images/ic_arrow_right.png',
width: ARROW_ICON_WIDTH,
height: ARROW_ICON_WIDTH,
);
// 選單的文字
List menuTitles = ['釋出動彈', '動彈小黑屋', '關於', '設定'];
// 選單文字前面的圖示
List menuIcons = [
'./images/leftmenu/ic_fabu.png',
'./images/leftmenu/ic_xiaoheiwu.png',
'./images/leftmenu/ic_about.png',
'./images/leftmenu/ic_settings.png'
];
// 選單文字的樣式
TextStyle menuStyle = new TextStyle(
fontSize: 15.0,
);
// 省略後續程式碼
// ...
}
複製程式碼在MyDrawer類的build方法中，返回一個ListView元件即可：
@override
Widget build(BuildContext context) {
return new ConstrainedBox(
constraints: const BoxConstraints.expand(width: 304.0),
child: new Material(
elevation: 16.0,
child: new Container(
decoration: new BoxDecoration(
color: const Color(0xFFFFFFFF),
),
child: new ListView.builder(
itemCount: menuTitles.length * 2 + 1,
itemBuilder: renderRow,
),
),
),
);
}
複製程式碼build方法中的ConstraintedBox元件和Material元件都是直接參考的Drawer類的原始碼，constraints引數指定了側滑選單的寬度，elevation引數控制的是Drawer後面的陰影的大小，預設值就是16（所以這裡可以不指定elevation引數），最主要的是ListView的命名構造方法build，itemCount引數代表item的個數，這裡之所以是menuTitles.length * 2 + 1，其中的*2是將分割線算入到item中了，+1則是把頂部的封面圖算入到item中了。下面是關鍵的renderRow方法：
Widget renderRow(BuildContext context, int index) {
if (index == 0) {
// render cover image
var img = new Image.asset(
'images/cover_img.jpg',
width: 304.0,
height: 304.0,
);
return new Container(
width: 304.0,
height: 304.0,
margin: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 10.0),
child: img,
);
}
// 捨去之前的封面圖
index -= 1;
// 如果是奇數則渲染分割線
if (index.isOdd) {
return new Divider();
}
// 偶數，就除2取整，然後渲染選單item
index = index ~/ 2;
// 選單item元件
var listItemContent = new Padding(
// 設定item的外邊距
padding: const EdgeInsets.fromLTRB(10.0, 15.0, 10.0, 15.0),
// Row元件構成item的一行
child: new Row(
children: <Widget>[
// 選單item的圖示
getIconImage(menuIcons[index]),
// 選單item的文字
new Expanded(
child: new Text(
menuTitles[index],
style: menuStyle,
)
),
rightArrowIcon
],
),
);
return new InkWell(
child: listItemContent,
onTap: () {
print("click list item $index");
},
);
}
複製程式碼renderRow方法體較長，主要是因為涉及到3個不同佈局的渲染：頭部封面圖、分割線、選單item。以上程式碼中已有相關注釋，其中有幾點需要注意：
- 在渲染選單item文字時用到了Expanded元件，該元件類似於在Android中佈局時新增android:layout_weight="1"屬性，上面使用Expanded包裹的Text元件在水平方向上會佔據除icon和箭頭圖示外的剩餘的所有空間；
- 最後返回了一個InkWell元件，用於給選單item新增點選事件，但是在Drawer中點選選單時並沒有水波紋擴散的效果（不知道是什麼原因）。
資訊列表頁面的實現
本篇要實現的資訊列表頁面如下圖所示：
資訊列表的頭部是一個輪播圖，可以左右滑動切換不同的資訊，下面是一個列表，顯示了資訊的標題，釋出時間，評論數，資訊圖等資訊。
輪播圖的實現
輪播圖主要使用了Flutter內建的TabBarView元件，該元件類似於Android中的ViewPager，可以左右滑動切換頁面。為了合理組織程式碼，我們將輪播圖單獨抽出來作為一個自定義元件，在widgets/目錄下新建SlideView.dart檔案並新增如下程式碼：
import 'package:flutter/material.dart';
class SlideView extends StatefulWidget {
var data;
// data表示輪播圖中的資料
SlideView(data) {
this.data = data;
}
@override
State<StatefulWidget> createState() {
// 可以在構造方法中傳參供SlideViewState使用
// 或者也可以不傳引數，直接在SlideViewState中通過this.widget.data訪問SlideView中的data變數
return new SlideViewState(data);
}
}
class SlideViewState extends State<SlideView> with SingleTickerProviderStateMixin {
// TabController為TabBarView元件的控制器
TabController tabController;
List slideData;
SlideViewState(data) {
slideData = data;
}
@override
void initState() {
super.initState();
// 初始化控制器
tabController = new TabController(length: slideData == null ? 0 : slideData.length, vsync: this);
}
@override
void dispose() {
// 銷燬
tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
List<Widget> items = [];
if (slideData != null && slideData.length > 0) {
for (var i = 0; i < slideData.length; i++) {
var item = slideData[i];
// 圖片URL
var imgUrl = item['imgUrl'];
// 資訊標題
var title = item['title'];
// 資訊詳情URL
var detailUrl = item['detailUrl'];
items.add(new GestureDetector(
onTap: () {
// 點選頁面跳轉到詳情
},
child: new Stack( // Stack元件用於將資訊標題文字放置到圖片上面
children: <Widget>[
// 載入網路圖片
new Image.network(imgUrl),
new Container(
// 標題容器寬度跟螢幕寬度一致
width: MediaQuery.of(context).size.width,
// 背景為黑色，加入透明度
color: const Color(0x50000000),
// 標題文字加入內邊距
child: new Padding(
padding: const EdgeInsets.all(6.0),
// 字型大小為15，顏色為白色
child: new Text(title, style: new TextStyle(color: Colors.white, fontSize: 15.0)),
)
)
],
),
));
}
}
return new TabBarView(
controller: tabController,
children: items,
);
}
}
複製程式碼TabBarView元件主要的引數是controller和children，controller代表這個TabBarView的控制器，children表示這個元件中的各個頁面。SliderView中的data是在new這個物件時通過構造方法傳入的，data是一個map陣列，map中包含imgUrl title detailUrl3個欄位。
注意：本專案的輪播圖裡沒有加入小圓點頁面指示器，小夥伴們可自行新增相關程式碼。
輪播圖和列表的組合
上面實現了自定義的輪播圖元件，下面就需要將這個元件和列表組合起來。
由於資訊列表的item佈局稍微有些複雜，所以這裡有必要進行拆分，整體上可以將item分為左右兩部分，左邊展示了資訊標題，時間，評論數等資訊，右邊展示了資訊的圖片。所以整體是一個Row元件，而左邊又是一個Column元件，Column元件的第一列是標題，第二列又是一個Row元件，其中有時間、作者頭像、評論數等資訊。下面直接上NewsListPage.dart的程式碼，在程式碼中做詳細的註釋：
import 'package:flutter/material.dart';
import 'package:flutter_osc/widgets/SlideView.dart';
// 資訊列表頁面
class NewsListPage extends StatelessWidget {
// 輪播圖的資料
var slideData = [];
// 列表的資料（輪播圖資料和列表資料分開，但是實際上輪播圖和列表中的item同屬於ListView的item）
var listData = [];
// 列表中資訊標題的樣式
TextStyle titleTextStyle = new TextStyle(fontSize: 15.0);
// 時間文字的樣式
TextStyle subtitleStyle = new TextStyle(color: const Color(0xFFB5BDC0), fontSize: 12.0);
NewsListPage() {
// 這裡做資料初始化，加入一些測試資料
for (int i = 0; i < 3; i++) {
Map map = new Map();
// 輪播圖的資訊標題
map['title'] = 'Python 之父透露退位隱情，與核心開發團隊產生隔閡';
// 輪播圖的詳情URL
map['detailUrl'] = 'https://www.oschina.net/news/98455/guido-van-rossum-resigns';
// 輪播圖的圖片URL
map['imgUrl'] = 'https://static.oschina.net/uploads/img/201807/30113144_1SRR.png';
slideData.add(map);
}
for (int i = 0; i < 30; i++) {
Map map = new Map();
// 列表item的標題
map['title'] = 'J2Cache 2.3.23 釋出，支援 memcached 二級快取';
// 列表item的作者頭像URL
map['authorImg'] = 'https://static.oschina.net/uploads/user/0/12_50.jpg?t=1421200584000';
// 列表item的時間文字
map['timeStr'] = '2018/7/30';
// 列表item的資訊圖片
map['thumb'] = 'https://static.oschina.net/uploads/logo/j2cache_N3NcX.png';
// 列表item的評論數
map['commCount'] = 5;
listData.add(map);
}
}
@override
Widget build(BuildContext context) {
return new ListView.builder(
// 這裡itemCount是將輪播圖元件、分割線和列表items都作為ListView的item算了
itemCount: listData.length * 2 + 1,
itemBuilder: (context, i) => renderRow(i)
);
}
// 渲染列表item
Widget renderRow(i) {
// i為0時渲染輪播圖
if (i == 0) {
return new Container(
height: 180.0,
child: new SlideView(slideData),
);
}
// i > 0時
i -= 1;
// i為奇數，渲染分割線
if (i.isOdd) {
return new Divider(height: 1.0);
}
// 將i取整
i = i ~/ 2;
// 得到列表item的資料
var itemData = listData[i];
// 代表列表item中的標題這一行
var titleRow = new Row(
children: <Widget>[
// 標題充滿一整行，所以用Expanded元件包裹
new Expanded(
child: new Text(itemData['title'], style: titleTextStyle),
)
],
);
// 時間這一行包含了作者頭像、時間、評論數這幾個
var timeRow = new Row(
children: <Widget>[
// 這是作者頭像，使用了圓形頭像
new Container(
width: 20.0,
height: 20.0,
decoration: new BoxDecoration(
// 通過指定shape屬性設定圖片為圓形
shape: BoxShape.circle,
color: const Color(0xFFECECEC),
image: new DecorationImage(
image: new NetworkImage(itemData['authorImg']), fit: BoxFit.cover),
border: new Border.all(
color: const Color(0xFFECECEC),
width: 2.0,
),
),
),
// 這是時間文字
new Padding(
padding: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
child: new Text(
itemData['timeStr'],
style: subtitleStyle,
),
),
// 這是評論數，評論數由一個評論圖示和具體的評論數構成，所以是一個Row元件
new Expanded(
flex: 1,
child: new Row(
// 為了讓評論數顯示在最右側，所以需要外面的Expanded和這裡的MainAxisAlignment.end
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new Text("${itemData['commCount']}", style: subtitleStyle),
new Image.asset('./images/ic_comment.png', width: 16.0, height: 16.0),
],
),
)
],
);
var thumbImgUrl = itemData['thumb'];
// 這是item右側的資訊圖片，先設定一個預設的圖片
var thumbImg = new Container(
margin: const EdgeInsets.all(10.0),
width: 60.0,
height: 60.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: const Color(0xFFECECEC),
image: new DecorationImage(
image: new ExactAssetImage('./images/ic_img_default.jpg'),
fit: BoxFit.cover),
border: new Border.all(
color: const Color(0xFFECECEC),
width: 2.0,
),
),
);
// 如果上面的thumbImgUrl不為空，就把之前thumbImg預設的圖片替換成網路圖片
if (thumbImgUrl != null && thumbImgUrl.length > 0) {
thumbImg = new Container(
margin: const EdgeInsets.all(10.0),
width: 60.0,
height: 60.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: const Color(0xFFECECEC),
image: new DecorationImage(
image: new NetworkImage(thumbImgUrl), fit: BoxFit.cover),
border: new Border.all(
color: const Color(0xFFECECEC),
width: 2.0,
),
),
);
}
// 這裡的row代表了一個ListItem的一行
var row = new Row(
children: <Widget>[
// 左邊是標題，時間，評論數等資訊
new Expanded(
flex: 1,
child: new Padding(
padding: const EdgeInsets.all(10.0),
child: new Column(
children: <Widget>[
titleRow,
new Padding(
padding: const EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 0.0),
child: timeRow,
)
],
),
),
),
// 右邊是資訊圖片
new Padding(
padding: const EdgeInsets.all(6.0),
child: new Container(
width: 100.0,
height: 80.0,
color: const Color(0xFFECECEC),
child: new Center(
child: thumbImg,
),
),
)
],
);
// 用InkWell包裹row，讓row可以點選
return new InkWell(
child: row,
onTap: () {
},
);
}
}
複製程式碼動彈列表頁面的實現
動彈列表要實現的效果如下圖：
為了區分普通的動彈和熱門動彈，需要使用兩個Tab來分別展示不同的頁面，這裡使用的是Flutter提供的DefaultTabController元件，該元件的用法也比較簡單，下面是TweetsList.dart的build方法的程式碼：
@override
Widget build(BuildContext context) {
// 獲取螢幕寬度
screenWidth = MediaQuery.of(context).size.width;
return new DefaultTabController(
length: 2,
child: new Scaffold(
appBar: new TabBar(
tabs: <Widget>[
new Tab(text: "動彈列表"),
new Tab(text: "熱門動彈")
],
),
body: new TabBarView(
children: <Widget>[getNormalListView(), getHotListView()],
)),
);
}
// 獲取普通動彈列表
Widget getNormalListView() {
return new ListView.builder(
itemCount: normalTweetsList.length * 2 - 1,
itemBuilder: (context, i) => renderNormalRow(i)
);
}
// 獲取熱門動彈列表
Widget getHotListView() {
return new ListView.builder(
itemCount: hotTweetsList.length * 2 - 1,
itemBuilder: (context, i) => renderHotRow(i),
);
}
// 渲染普通動彈列表Item
renderHotRow(i) {
if (i.isOdd) {
return new Divider(
height: 1.0,
);
} else {
i = i ~/ 2;
return getRowWidget(hotTweetsList[i]);
}
}
// 渲染熱門動彈列表Item
renderNormalRow(i) {
if (i.isOdd) {
return new Divider(
height: 1.0,
);
} else {
i = i ~/ 2;
return getRowWidget(normalTweetsList[i]);
}
}
複製程式碼在TabBarView中，children引數是一個陣列，代表不同的頁面，這裡使用兩個方法分別返回普通的動彈列表和熱門動彈列表，編碼實現動彈列表前，先定義如下一些變數供後面使用，並在TweetsList類的構造方法中初始化這些變數：
import 'package:flutter/material.dart';
// 動彈列表頁面
class TweetsListPage extends StatelessWidget {
// 熱門動彈資料
List hotTweetsList = [];
// 普通動彈資料
List normalTweetsList = [];
// 動彈作者文字樣式
TextStyle authorTextStyle;
// 動彈時間文字樣式
TextStyle subtitleStyle;
// 螢幕寬度
double screenWidth;
// 構造方法中做資料初始化
TweetsListPage() {
authorTextStyle = new TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold);
subtitleStyle = new TextStyle(fontSize: 12.0, color: const Color(0xFFB5BDC0));
// 新增測試資料
for (int i = 0; i < 20; i++) {
Map<String, dynamic> map = new Map();
// 動彈釋出時間
map['pubDate'] = '2018-7-30';
// 動彈文字內容
map['body'] = '早上七點十分起床，四十出門，花二十多分鐘到公司，必須在八點半之前打卡；下午一點上班到六點，然後加班兩個小時；八點左右離開公司，呼呼登自行車到健身房鍛鍊一個多小時。到家已經十點多，然後準備第二天的午飯，接著收拾廚房，然後洗澡，吹頭髮，等能坐下來吹頭髮時已經快十二點了。感覺很累。';
// 動彈作者暱稱
map['author'] = '紅薯';
// 動彈評論數
map['commentCount'] = 10;
// 動彈作者頭像URL
map['portrait'] = 'https://static.oschina.net/uploads/user/0/12_50.jpg?t=1421200584000';
// 動彈中的圖片，多張圖片用英文逗號隔開
map['imgSmall'] = 'https://b-ssl.duitang.com/uploads/item/201508/27/20150827135810_hGjQ8.thumb.700_0.jpeg,https://b-ssl.duitang.com/uploads/item/201508/27/20150827135810_hGjQ8.thumb.700_0.jpeg,https://b-ssl.duitang.com/uploads/item/201508/27/20150827135810_hGjQ8.thumb.700_0.jpeg,https://b-ssl.duitang.com/uploads/item/201508/27/20150827135810_hGjQ8.thumb.700_0.jpeg';
hotTweetsList.add(map);
normalTweetsList.add(map);
}
}
}
複製程式碼有了測試資料，下面最主要的是實現列表的展示，而列表展示最為麻煩的，是列表item的渲染。每個item中要展示使用者頭像，使用者暱稱，動彈釋出時間，動彈評論數，如果動彈中有圖片，還需要以九宮格的方式顯示圖片。簡單分析下動彈列表的item，應該是用Column元件展示，Column元件的第一行顯示使用者頭像、暱稱、釋出動彈的時間，第二行應該顯示動彈的內容，第三行是可展示可不展示的九宮格，如果動彈中有圖片，則顯示，否則不限時，第四行是動彈評論數，顯示在右下角。下面分小步來實現列表item的渲染：
第一行，顯示使用者頭像，暱稱和釋出時間
這一行用個Row元件展示即可，程式碼如下：
// 列表item的第一行，顯示動彈作者頭像、暱稱、評論數
var authorRow = new Row(
children: <Widget>[
// 使用者頭像
new Container(
width: 35.0,
height: 35.0,
decoration: new BoxDecoration(
// 頭像顯示為圓形
shape: BoxShape.circle,
color: Colors.transparent,
image: new DecorationImage(
image: new NetworkImage(listItem['portrait']),
fit: BoxFit.cover),
// 頭像邊框
border: new Border.all(
color: Colors.white,
width: 2.0,
),
),
),
// 動彈作者的暱稱
new Padding(
padding: const EdgeInsets.fromLTRB(6.0, 0.0, 0.0, 0.0),
child: new Text(
listItem['author'],
style: new TextStyle(fontSize: 16.0)
)
),
// 動彈評論數，顯示在最右邊
new Expanded(
child: new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new Text(
'${listItem['commentCount']}',
style: subtitleStyle,
),
new Image.asset(
'./images/ic_comment.png',
width: 16.0,
height: 16.0,
)
],
),
)
],
);
複製程式碼第二行，顯示動彈內容
這一行僅僅是一段文字，所以程式碼比較簡單：
// 動彈內容，純文字展示
var _body = listItem['body'];
var contentRow = new Row(
children: <Widget>[
new Expanded(child: new Text(_body))
],
);
複製程式碼第三行，顯示動彈中的圖片，沒有圖片則不展示這一行
以九宮格的形式顯示圖片稍微麻煩些，這也是為什麼之前我們要在build方法中獲取螢幕的寬度，因為要根據這個寬度來計算九宮格中圖片的寬度。另外，九宮格中的圖片URL是以字串形式給出的，以英文逗號隔開的，所以需要對圖片URL做分割處理。如果動彈中有圖片，可能有1～9張，下面用一個方法來確定用九宮格顯示時，總共有幾行：
// 獲取行數，n表示圖片的張數
// 如果n取餘不為0，則行數為n取整+1，否則n取整就是行數
int getRow(int n) {
int a = n % 3; // 取餘
int b = n ~/ 3; // 取整
if (a != 0) {
return b + 1;
}
return b;
}
複製程式碼比如一共有9張圖片，9 % 3為0，則一共有9 ~/3 = 3行，如果一共有5張圖片，5 % 3 != 0，則行數為5 ~/ 3再+1即兩行。
下面是生成九宮格圖片的程式碼：
// 動彈中的圖片資料，字串，多張圖片以英文逗號分隔
String imgSmall = listItem['imgSmall'];
if (imgSmall != null && imgSmall.length > 0) {
// 動彈中有圖片
List<String> list = imgSmall.split(",");
List<String> imgUrlList = new List<String>();
// 開源中國的openapi給出的圖片，有可能是相對地址，所以用下面的程式碼將相對地址補全
for (String s in list) {
if (s.startsWith("http")) {
imgUrlList.add(s);
} else {
imgUrlList.add("https://static.oschina.net/uploads/space/" + s);
}
}
List<Widget> imgList = [];
List<List<Widget>> rows = [];
num len = imgUrlList.length;
// 通過雙重for迴圈，生成每一張圖片元件
for (var row = 0; row < getRow(len); row++) { // row表示九宮格的行數，可能有1行2行或3行
List<Widget> rowArr = [];
for (var col = 0; col < 3; col++) { // col為列數，固定有3列
num index = row * 3 + col;
double cellWidth = (screenWidth - 100) / 3;
if (index < len) {
rowArr.add(new Padding(
padding: const EdgeInsets.all(2.0),
child: new Image.network(imgUrlList[index],
width: cellWidth, height: cellWidth),
));
}
}
rows.add(rowArr);
}
for (var row in rows) {
imgList.add(new Row(
children: row,
));
}
columns.add(new Padding(
padding: const EdgeInsets.fromLTRB(52.0, 5.0, 10.0, 0.0),
child: new Column(
children: imgList,
),
));
}
複製程式碼上面程式碼的最後有個columns變數，代表的是整個item的一個列布局，在生成九宮格佈局前，已經將第一行和第二行新增到columns中：
var columns = <Widget>[
// 這是item中第一行
new Padding(
padding: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 2.0),
child: authorRow,
),
// 這是item中第二行
new Padding(
padding: const EdgeInsets.fromLTRB(52.0, 0.0, 10.0, 0.0),
child: contentRow,
),
];
複製程式碼如果動彈中有圖片，則columns中還要新增九宮格圖片元件。
第四行，顯示動彈釋出時間 這一行佈局比較簡單：
var timeRow = new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new Text(
listItem['pubDate'],
style: subtitleStyle,
)
],
);
columns.add(new Padding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 10.0, 6.0),
child: timeRow,
));
複製程式碼最後返回一個用一個InkWell元件包裹的columns即可：
return new InkWell(
child: new Column(
children: columns,
),
onTap: () {
// 跳轉到動彈詳情
}
);
複製程式碼“發現”頁面的實現
本篇要實現的發現頁面效果圖如下：
該頁面就是一個簡單的ListView，但是稍微有些不同的是，ListView中的分割線有的長，有的短，有的分割線之間還有空白區域分隔，為了實現這個佈局，我用了一種方法是將長短不同的分割線，或者兩條分割線間的空白區域，都用不同的字串來標記，在渲染列表的時候，根據不同的字串來渲染不同的元件，程式碼很容易理解，所以這裡直接放原始碼連結了：原始碼，原始碼中已有詳細註釋。
“我的”頁面的實現
本篇要實現的我的頁面效果圖如下：
這個頁面也比較簡單，頭部的綠色區域也屬於ListView的一部分，也是ListView的多佈局，具體實現方式就不細說了，直接放程式碼：原始碼。
原始碼
本篇相關的所有原始碼都在GitHub上demo-flutter-osc專案的v0.2分支。
後記
本篇主要記錄的是基於Flutter的開源中國客戶端各個靜態頁面的實現，僅限於UI，具體的網路請求，資料儲存和其他邏輯在下一篇中做記錄。
我的開源專案
- 基於Google Flutter的開源中國客戶端，希望大家給個Star支援一下，原始碼：
- 基於Flutter的俄羅斯方塊小遊戲，希望大家給個Star支援一下，原始碼：
| 上一篇 | 下一篇 |
|---|---|
| 從0開始寫一個基於Flutter的開源中國客戶端（5） ——App整體佈局框架搭建 |
從0開始寫一個基於Flutter的開源中國客戶端（7）—— App網路請求和資料儲存 |