前言：為了更好的減小網(wǎng)絡(luò)的帶寬，使得列表更加流暢，我們需要了解懶加載dnf客戶端安全組件加載失敗 為更好的保障，也稱延遲加載。 面試真題：如何實(shí)現(xiàn)懶加載？
關(guān)于上一章的登錄界面，各位屬實(shí)難為我了，我也在求ui小姐姐，各位點(diǎn)點(diǎn)贊給我點(diǎn)動(dòng)力吧~
懶加載也叫延遲加載，指的是在長(zhǎng)網(wǎng)頁(yè)中延遲加載圖像，是一種很好優(yōu)化網(wǎng)頁(yè)性能的方式。用戶滾動(dòng)到它們之前，可視區(qū)域外的圖像不會(huì)加載。這與圖像預(yù)加載相反，在長(zhǎng)網(wǎng)頁(yè)上使用延遲加載將使網(wǎng)頁(yè)加載更快。在某些情況下，它還可以幫助減少服務(wù)器負(fù)載。常適用圖片很多，頁(yè)面很長(zhǎng)的電商網(wǎng)站場(chǎng)景中。
對(duì)優(yōu)化就那么幾點(diǎn)：（后面都會(huì)寫出來(lái)）:1. 加載圖片優(yōu)化(懶加載)2. 加載時(shí)使用圖片使用縮略圖，對(duì)圖片進(jìn)行緩存3. 減少build()的耗時(shí)本章dnf客戶端安全組件加載失敗 為更好的保障，我們會(huì)實(shí)現(xiàn)朋友圈的優(yōu)化功能，即當(dāng)頁(yè)面在滑動(dòng)時(shí)不加載圖片，在界面停止滑動(dòng)時(shí)加載圖片。效果圖：
1.了解通知監(jiān)聽:
屬性:
2.需要一個(gè)bool來(lái)控制是否加載
///加載圖片的標(biāo)識(shí)
bool isLoadingImage = true;3.編寫傳遞通知的方法，使其作用于
bool notificationFunction(Notification notification) {
?///通知類型
?switch (notification.runtimeType) {
? ?case ScrollStartNotification:
? ? ?print("開始滾動(dòng)");
?
? ? ?///在這里更新標(biāo)識(shí) 刷新頁(yè)面 不加載圖片
? ? ?isLoadingImage = false;
? ? ?break;
? ?case ScrollUpdateNotification:
? ? ?print("正在滾動(dòng)");
? ? ?break;
? ?case ScrollEndNotification:
? ? ?print("滾動(dòng)停止");
?
? ? ?///在這里更新標(biāo)識(shí) 刷新頁(yè)面 加載圖片
? ? ?setState(() {
? ? ? ?isLoadingImage = true;
? ? });
? ? ?break;
? ?case OverscrollNotification:
? ? ?print("滾動(dòng)到邊界");
? ? ?break;
}
?return true;
}4.根據(jù)bool值加載不同的組件
ListView buildListView() {
?return ListView.separated(
? ?itemCount: 1000, //子條目個(gè)數(shù)
? ?///構(gòu)建每個(gè)條目
? ?itemBuilder: (BuildContext context, int index) {
? ? ?if (isLoadingImage) {
? ? ? ?///這時(shí)將子條目單獨(dú)封裝在了一個(gè)StatefulWidget中
? ? ? ?return Image.network(
? ? ? ? ?netImageUrl,
? ? ? ? ?width: 100,
? ? ? ? ?height: 100,
? ? ? ? ?fit: BoxFit.fitHeight,
? ? ? );
? ? } else {
? ? ? ?return Container(
? ? ? ? ?height: 100,
? ? ? ? ?width: 100,
? ? ? ? ?child: Text("加載中..."),
? ? ? ); //占位
? ? }
? },
?
? ?///構(gòu)建每個(gè)子Item之間的間隔Widget
? ?separatorBuilder: (BuildContext context, int index) {
? ? ?return new Divider();
? },
);
}完整代碼：
class ScrollHomePageState extends State {
?///加載圖片的標(biāo)識(shí)
?bool isLoadingImage = true;
?
?///網(wǎng)絡(luò)圖片地址
?String netImageUrl =
? ? ?"https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a4ce25d48b8405cbf5444b6195928d4~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp";
?
?@override
?Widget build(BuildContext context) {
? ?return Scaffold(
? ? ?appBar: new AppBar(
? ? ? ?title: Text("詳情"),
? ? ),
? ? ?///列表
? ? ?body: NotificationListener(
? ? ? ?///子Widget中的滾動(dòng)組件滑動(dòng)時(shí)就會(huì)分發(fā)滾動(dòng)通知
? ? ? ?child: buildListView(),
? ? ? ?///每當(dāng)有滑動(dòng)通知時(shí)就會(huì)回調(diào)此方法
? ? ? ?onNotification: notificationFunction,
? ? ),
? );
}
?
?bool notificationFunction(Notification notification) {
? ?///通知類型
? ?switch (notification.runtimeType) {
? ? ?case ScrollStartNotification:
? ? ? ?print("開始滾動(dòng)");
?
? ? ? ?///在這里更新標(biāo)識(shí) 刷新頁(yè)面 不加載圖片
? ? ? ?isLoadingImage = false;
? ? ? ?break;
? ? ?case ScrollUpdateNotification:
? ? ? ?print("正在滾動(dòng)");
? ? ? ?break;
? ? ?case ScrollEndNotification:
? ? ? ?print("滾動(dòng)停止");
?
? ? ? ?///在這里更新標(biāo)識(shí) 刷新頁(yè)面 加載圖片
? ? ? ?setState(() {
? ? ? ? ?isLoadingImage = true;
? ? ? });
? ? ? ?break;
? ? ?case OverscrollNotification:
? ? ? ?print("滾動(dòng)到邊界");
? ? ? ?break;
? }
? ?return true;
}
?
?ListView buildListView() {
? ?return ListView.separated(
? ? ?itemCount: 1000, //子條目個(gè)數(shù)
? ? ?///構(gòu)建每個(gè)條目
? ? ?itemBuilder: (BuildContext context, int index) {
? ? ? ?if (isLoadingImage) {
? ? ? ? ?///這時(shí)將子條目單獨(dú)封裝在了一個(gè)StatefulWidget中
? ? ? ? ?return Image.network(
? ? ? ? ? ?netImageUrl,
? ? ? ? ? ?width: 100,
? ? ? ? ? ?height: 100,
? ? ? ? ? ?fit: BoxFit.fitHeight,
? ? ? ? );
? ? ? } else {
? ? ? ? ?return Container(
? ? ? ? ? ?height: 100,
? ? ? ? ? ?width: 100,
? ? ? ? ? ?child: Text("加載中..."),
? ? ? ? ); //占位
? ? ? }
? ? },
?
? ? ?///構(gòu)建每個(gè)子Item之間的間隔Widget
? ? ?separatorBuilder: (BuildContext context, int index) {
? ? ? ?return new Divider();
? ? },
? );
}
}是不是很簡(jiǎn)單，但是懶加載確實(shí)是面試真題，你了解了嗎？