Flutter 五 之Flutter滾動Widget
一. JSON讀取和解析
在開發中,我們經常會使用本地JSON或者從服務器請求數據後回去到JSON,拿到JSON後通常會將JSON轉成Model對象來進行後續的操作,因爲這樣操作更加的方便,也更加的安全。
所以學習JSON的相關操作以及讀取JSON後如何轉成Model對象對於Flutter開發也非常重要。
1.1. JSON資源配置
JSON也屬於一種資源,所以在使用之前需要先進行相關的配置
我們之前在學習使用Image組件時,用到了本地圖片,本地圖片必須在pubspec.yaml
中進行配置:
1.2. JSON讀取解析
JSON資源讀取
如果我們希望讀取JSON資源,可以使用package:flutter/services.dart
包中的rootBundle
。
在rootBundle
中有一個loadString
方法,可以去加載JSON資源
- 但是注意,查看該方法的源碼,你會發現這個操作是一個異步的。
- 關於Future和async,這裏就不再展開講解,可以去查看之前的dart語法。
Future<String> loadString(String key, { bool cache = true }) async {
...省略具體代碼,可以自行查看源碼
}
代碼如下:(不要試圖拷貝這個代碼去運行,是沒辦法運行的)
import'package:flutter/services.dart' show rootBundle;
// 打印讀取的結果是一個字符串
rootBundle.loadString("assets/yz.json").then((value) => print(value));
JSON字符串轉化
拿到JSON字符串後,我們需要將其轉成成我們熟悉的List和Map類型。
我們可以通過dart:convert
包中的json.decode
方法將其進行轉化
代碼如下:
// 1.讀取json文件
String jsonString = await rootBundle.loadString("assets/yz.json");
// 2.轉成List或Map類型
final jsonResult = json.decode(jsonString);
對象Model定義
將JSON轉成了List和Map類型後,就可以將List中的一個個Map轉成Model對象,所以我們需要定義自己的Model
class Anchor {
String nickname;
String roomName;
String imageUrl;
Anchor({
this.nickname,
this.roomName,
this.imageUrl
});
Anchor.withMap(Map<String, dynamic> parsedMap) {
this.nickname = parsedMap["nickname"];
this.roomName = parsedMap["roomName"];
this.imageUrl = parsedMap["roomSrc"];
}
}
1.3. JSON解析代碼
上面我們給出瞭解析的一個個步驟,下面我們給出完整的代碼邏輯
這裏我單獨創建了一個anchor.dart的文件,在其中定義了所有的相關代碼:
- 之後外界只需要調用我內部的getAnchors就可以獲取到解析後的數據了
import'package:flutter/services.dart' show rootBundle;
import'dart:convert';
import'dart:async';
class Anchor {
String nickname;
String roomName;
String imageUrl;
Anchor({
this.nickname,
this.roomName,
this.imageUrl
});
Anchor.withMap(Map<String, dynamic> parsedMap) {
this.nickname = parsedMap["nickname"];
this.roomName = parsedMap["roomName"];
this.imageUrl = parsedMap["roomSrc"];
}
}
Future<List<Anchor>> getAnchors() async {
// 1.讀取json文件
String jsonString = await rootBundle.loadString("assets/yz.json");
// 2.轉成List或Map類型
final jsonResult = json.decode(jsonString);
// 3.遍歷List,並且轉成Anchor對象放到另一個List中
List<Anchor> anchors = newList();
for (Map<String, dynamic> map in jsonResult) {
anchors.add(Anchor.withMap(map));
}
return anchors;
}
二. ListView組件
移動端數據量比較大時,我們都是通過列表來進行展示的,比如商品數據、聊天列表、通信錄、朋友圈等。
在Android中,我們可以使用ListView或RecyclerView來實現,在iOS中,我們可以通過UITableView來實現。
在Flutter中,我們也有對應的列表Widget,就是ListView。
2.1. ListView基礎
2.1.1 ListView基本使用
ListView可以沿一個方向(垂直或水平方向,默認是垂直方向)來排列其所有子Widget。
一種最簡單的使用方式是直接將所有需要排列的子Widget放在ListView的children屬性中即可。
我們來看一下直接使用ListView的代碼演練:
- 爲了讓文字之間有一些間距,我使用了Padding Widget
class MyHomeBody extends StatelessWidget {
final TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.redAccent);
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("人的一切痛苦,本質上都是對自己無能的憤怒。", style: textStyle),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("人活在世界上,不可以有偏差;而且多少要費點勁兒,才能把自己保持到理性的軌道上。", style: textStyle),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("我活在世上,無非想要明白些道理,遇見些有趣的事。", style: textStyle),
)
],
);
}
}
2.1.2. ListTile的使用
在開發中,我們經常見到一種列表,有一個圖標或圖片(Icon),有一個標題(Title),有一個子標題(Subtitle),還有尾部一個圖標(Icon)。
這個時候,我們可以使用ListTile來實現:
class MyHomeBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.people, size: 36,),
title: Text("聯繫人"),
subtitle: Text("聯繫人信息"),
trailing: Icon(Icons.arrow_forward_ios),
),
ListTile(
leading: Icon(Icons.email, size: 36,),
title: Text("郵箱"),
subtitle: Text("郵箱地址信息"),
trailing: Icon(Icons.arrow_forward_ios),
),
ListTile(
leading: Icon(Icons.message, size: 36,),
title: Text("消息"),
subtitle: Text("消息詳情信息"),
trailing: Icon(Icons.arrow_forward_ios),
),
ListTile(
leading: Icon(Icons.map, size: 36,),
title: Text("地址"),
subtitle: Text("地址詳情信息"),
trailing: Icon(Icons.arrow_forward_ios),
)
],
);
}
}
2.1.3. 垂直方向滾動
我們可以通過設置 scrollDirection
參數來控制視圖的滾動方向。
我們通過下面的代碼實現一個水平滾動的內容:
- 這裏需要注意,我們需要給Container設置width,否則它是沒有寬度的,就不能正常顯示。
- 或者我們也可以給ListView設置一個itemExtent,該屬性會設置滾動方向上每個item所佔據的寬度。
class MyHomeBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
scrollDirection: Axis.horizontal,
itemExtent: 200,
children: <Widget>[
Container(color: Colors.red, width: 200),
Container(color: Colors.green, width: 200),
Container(color: Colors.blue, width: 200),
Container(color: Colors.purple, width: 200),
Container(color: Colors.orange, width: 200),
],
);
}
}
2.2. ListView.builder
通過構造函數中的children傳入所有的子Widget有一個問題:默認會創建出所有的子Widget。
但是對於用戶來說,一次性構建出所有的Widget並不會有什麼差異,但是對於我們的程序來說會產生性能問題,而且會增加首屏的渲染時間。
我們可以ListView.builder來構建子Widget,提供性能。
2.2.1. ListView.builder基本使用
ListView.build適用於子Widget比較多的場景,該構造函數將創建子Widget交給了一個抽象的方法,交給ListView進行管理,ListView會在真正需要的時候去創建子Widget,而不是一開始就全部初始化好。
該方法有兩個重要參數:
- itemBuilder:列表項創建的方法。當列表滾動到對應位置的時候,ListView會自動調用該方法來創建對應的子Widget。類型是IndexedWidgetBuilder,是一個函數類型。
- itemCount:表示列表項的數量,如果爲空,則表示ListView爲無限列表。
我們還是通過一個簡單的案例來認識它:
class MyHomeBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 100,
itemExtent: 80,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text("標題$index"), subtitle: Text("詳情內容$index"));
}
);
}
}
2.2.2. ListView.builder動態數據
在之前,我們搞了一個yz.json數據,我們現在動態的來通過JSON數據展示一個列表。
思考:這個時候是否依然可以使用StatelessWidget
:
答案:不可以,因爲當前我們的數據是異步加載的,剛開始界面並不會展示數據(沒有數據),後面從JSON中加載出來數據(有數據)後,再次展示加載的數據。
這裏是有狀態的變化的,從無數據,到有數據的變化。
這個時候,我們需要使用StatefulWidget
來管理組件。
展示代碼如下:
import'model/anchor.dart';
...省略中間代碼
class MyHomeBody extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return MyHomeBodyState();
}
}
class MyHomeBodyState extends State<MyHomeBody> {
List<Anchor> anchors = [];
// 在初始化狀態的方法中加載數據
@override
void initState() {
getAnchors().then((anchors) {
setState(() {
this.anchors = anchors;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: EdgeInsets.all(8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Image.network(
anchors[index].imageUrl,
fit: BoxFit.fitWidth,
width: MediaQuery.of(context).size.width,
),
SizedBox(height: 8),
Text(anchors[index].nickname, style: TextStyle(fontSize: 20),),
SizedBox(height: 5),
Text(anchors[index].roomName)
],
),
);
},
);
}
}
2.2.3. ListView.separated
ListView.separated
可以生成列表項之間的分割器,它比ListView.builder
多了一個separatorBuilder
參數,該參數是一個分割器生成器。
下面我們看一個例子:奇數行添加一條藍色下劃線,偶數行添加一條紅色下劃線:
class MySeparatedDemo extends StatelessWidget {
Divider blueColor = Divider(color: Colors.blue);
Divider redColor = Divider(color: Colors.red);
@override
Widget build(BuildContext context) {
return ListView.separated(
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: Icon(Icons.people),
title: Text("聯繫人${index+1}"),
subtitle: Text("聯繫人電話${index+1}"),
);
},
separatorBuilder: (BuildContext context, int index) {
return index % 2 == 0 ? redColor : blueColor;
},
itemCount: 100
);
}
}
三. GridView組件
GridView用於展示多列的展示,在開發中也非常常見,比如直播App中的主播列表、電商中的商品列表等等。
在Flutter中我們可以使用GridView來實現,使用方式和ListView也比較相似。
3.1. GridView構造函數
我們先學習GridView構造函數的使用方法
一種使用GridView的方式就是使用構造函數來創建,和ListView對比有一個特殊的參數:gridDelegate
gridDelegate
用於控制交叉軸的item數量或者寬度,需要傳入的類型是SliverGridDelegate,但是它是一個抽象類,所以我們需要傳入它的子類:
SliverGridDelegateWithFixedCrossAxisCount
SliverGridDelegateWithFixedCrossAxisCount({
@required double crossAxisCount, // 交叉軸的item個數
double mainAxisSpacing = 0.0, // 主軸的間距
double crossAxisSpacing = 0.0, // 交叉軸的間距
double childAspectRatio = 1.0, // 子Widget的寬高比
})
代碼演練:
class MyGridCountDemo extends StatelessWidget {
List<Widget> getGridWidgets() {
returnList.generate(100, (index) {
return Container(
color: Colors.purple,
alignment: Alignment(0, 0),
child: Text("item$index", style: TextStyle(fontSize: 20, color: Colors.white)),
);
});
}
@override
Widget build(BuildContext context) {
return GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 1.0
),
children: getGridWidgets(),
);
}
}
SliverGridDelegateWithMaxCrossAxisExtent
SliverGridDelegateWithMaxCrossAxisExtent({
double maxCrossAxisExtent, // 交叉軸的item寬度
double mainAxisSpacing = 0.0, // 主軸的間距
double crossAxisSpacing = 0.0, // 交叉軸的間距
double childAspectRatio = 1.0, // 子Widget的寬高比
})
代碼演練:
class MyGridExtentDemo extends StatelessWidget {
List<Widget> getGridWidgets() {
returnList.generate(100, (index) {
return Container(
color: Colors.purple,
alignment: Alignment(0, 0),
child: Text("item$index", style: TextStyle(fontSize: 20, color: Colors.white)),
);
});
}
@override
Widget build(BuildContext context) {
return GridView(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 150,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 1.0
),
children: getGridWidgets(),
);
}
}
前面兩種方式也可以不設置delegate
可以分別使用:GridView.count
構造函數和GridView.extent
構造函數實現相同的效果,這裏不再贅述。
3.2. GridView.build
和ListView一樣,使用構造函數會一次性創建所有的子Widget,會帶來性能問題,所以我們可以使用GridView.build
來交給GridView自己管理需要創建的子Widget。
我們直接使用之前的數據來進行代碼演練:
class _GridViewBuildDemoState extends State<GridViewBuildDemo> {
List<Anchor> anchors = [];
@override
void initState() {
getAnchors().then((anchors) {
setState(() {
this.anchors = anchors;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: GridView.builder(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 1.2
),
itemCount: anchors.length,
itemBuilder: (BuildContext context, int index) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Image.network(anchors[index].imageUrl),
SizedBox(height: 5),
Text(anchors[index].nickname, style: TextStyle(fontSize: 16),),
Text(anchors[index].roomName, maxLines: 1, overflow: TextOverflow.ellipsis,)
],
),
);
}
),
);
}
}
四. Slivers
我們考慮一個這樣的佈局:一個滑動的視圖中包括一個標題視圖(HeaderView),一個列表視圖(ListView),一個網格視圖(GridView)。
我們怎麼可以讓它們做到統一的滑動效果呢?使用前面的滾動是很難做到的。
Flutter中有一個可以完成這樣滾動效果的Widget:CustomScrollView,可以統一管理多個滾動視圖。
在CustomScrollView中,每一個獨立的,可滾動的Widget被稱之爲Sliver。
補充:Sliver可以翻譯成裂片、薄片,你可以將每一個獨立的滾動視圖當做一個小裂片。
4.1. Slivers的基本使用
因爲我們需要把很多的Sliver放在一個CustomScrollView中,所以CustomScrollView有一個slivers屬性,裏面讓我們放對應的一些Sliver:
SliverList
:類似於我們之前使用過的ListView;SliverFixedExtentList
:類似於SliverList只是可以設置滾動的高度;SliverGrid
:類似於我們之前使用過的GridView;SliverPadding
:設置Sliver的內邊距,因爲可能要單獨給Sliver設置內邊距;SliverAppBar
:添加一個AppBar,通常用來作爲CustomScrollView的HeaderView;SliverSafeArea
:設置內容顯示在安全區域(比如不讓齊劉海擋住我們的內容)
我們簡單演示一下:SliverGrid+SliverPadding+SliverSafeArea的組合
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverSafeArea(
sliver: SliverPadding(
padding: EdgeInsets.all(8),
sliver: SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment(0, 0),
color: Colors.orange,
child: Text("item$index"),
);
},
childCount: 20
),
),
),
)
],
);
}
}
4.2. Slivers的組合使用
這裏我使用官方的示例程序,將SliverAppBar
+ SliverGrid
+ SliverFixedExtentList
做出如下界面:
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return showCustomScrollView();
}
Widget showCustomScrollView() {
return CustomScrollView(
slivers: <Widget>[
const SliverAppBar(
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('Coderwhy Demo'),
background: Image(
image: NetworkImage(
"https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg",
),
fit: BoxFit.cover,
),
),
),
SliverGrid(
gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
returnnew Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: new Text('grid item $index'),
);
},
childCount: 10,
),
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
returnnew Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: new Text('list item $index'),
);
},
childCount: 20
),
),
],
);
}
}
五. 監聽滾動事件
對於滾動的視圖,我們經常需要監聽它的一些滾動事件,在監聽到的時候去做對應的一些事情。
比如視圖滾動到底部時,我們可能希望做上拉加載更多;
比如滾動到一定位置時顯示一個回到頂部的按鈕,點擊回到頂部的按鈕,回到頂部;
比如監聽滾動什麼時候開始,什麼時候結束;
在Flutter中監聽滾動相關的內容由兩部分組成:ScrollController和ScrollNotification。
5.1. ScrollController
在Flutter中,Widget並不是最終渲染到屏幕上的元素(真正渲染的是RenderObject),因此通常這種監聽事件以及相關的信息並不能直接從Widget中獲取,而是必須通過對應的Widget的Controller來實現。
ListView、GridView的組件控制器是ScrollController,我們可以通過它來獲取視圖的滾動信息,並且可以調用裏面的方法來更新視圖的滾動位置。
另外,通常情況下,我們會根據滾動的位置來改變一些Widget的狀態信息,所以ScrollController通常會和StatefulWidget一起來使用,並且會在其中控制它的初始化、監聽、銷燬等事件。
我們來做一個案例,當滾動到1000位置的時候,顯示一個回到頂部的按鈕:
jumpTo(double offset)
、animateTo(double offset,...)
:這兩個方法用於跳轉到指定的位置,它們不同之處在於,後者在跳轉時會執行一個動畫,而前者不會。- ScrollController間接繼承自Listenable,我們可以根據ScrollController來監聽滾動事件。
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() => MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
ScrollController _controller;
bool _isShowTop = false;
@override
void initState() {
// 初始化ScrollController
_controller = ScrollController();
// 監聽滾動
_controller.addListener(() {
var tempSsShowTop = _controller.offset >= 1000;
if (tempSsShowTop != _isShowTop) {
setState(() {
_isShowTop = tempSsShowTop;
});
}
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ListView展示"),
),
body: ListView.builder(
itemCount: 100,
itemExtent: 60,
controller: _controller,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text("item$index"));
}
),
floatingActionButton: !_isShowTop ? null : FloatingActionButton(
child: Icon(Icons.arrow_upward),
onPressed: () {
_controller.animateTo(0, duration: Duration(milliseconds: 1000), curve: Curves.ease);
},
),
);
}
}
5.2. NotificationListener
如果我們希望監聽什麼時候開始滾動,什麼時候結束滾動,這個時候我們可以通過NotificationListener
。
- NotificationListener是一個Widget,模板參數T是想監聽的通知類型,如果省略,則所有類型通知都會被監聽,如果指定特定類型,則只有該類型的通知會被監聽。
- NotificationListener需要一個onNotification回調函數,用於實現監聽處理邏輯。
- 該回調可以返回一個布爾值,代表是否阻止該事件繼續向上冒泡,如果爲
true
時,則冒泡終止,事件停止向上傳播,如果不返回或者返回值爲false
時,則冒泡繼續。
案例: 列表滾動, 並且在中間顯示滾動進度
class MyHomeNotificationDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() => MyHomeNotificationDemoState();
}
class MyHomeNotificationDemoState extends State<MyHomeNotificationDemo> {
int _progress = 0;
@override
Widget build(BuildContext context) {
return NotificationListener(
onNotification: (ScrollNotification notification) {
// 1.判斷監聽事件的類型
if (notification is ScrollStartNotification) {
print("開始滾動.....");
} elseif (notification is ScrollUpdateNotification) {
// 當前滾動的位置和總長度
final currentPixel = notification.metrics.pixels;
final totalPixel = notification.metrics.maxScrollExtent;
double progress = currentPixel / totalPixel;
setState(() {
_progress = (progress * 100).toInt();
});
print("正在滾動:${notification.metrics.pixels} - ${notification.metrics.maxScrollExtent}");
} elseif (notification is ScrollEndNotification) {
print("結束滾動....");
}
returnfalse;
},
child: Stack(
alignment: Alignment(.9, .9),
children: <Widget>[
ListView.builder(
itemCount: 100,
itemExtent: 60,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text("item$index"));
}
),
CircleAvatar(
radius: 30,
child: Text("$_progress%"),
backgroundColor: Colors.black54,
)
],
),
);
}
}