簡介
在應(yīng)用程序開發(fā)中志群，加載時間是不可避免的。從用戶體驗(yàn) (UX) 的角度來看欧漱，最重要的是向用戶展示正在加載退唠。向用戶傳達(dá)數(shù)據(jù)正在加載的一種流行方法是在近似加載的內(nèi)容類型的形狀上顯示帶有微光動畫的鍍鉻顏色。
Shimmer 用于在應(yīng)用程序中從服務(wù)器加載內(nèi)容時添加精彩的動畫窜醉。這使 UI 看起來更具響應(yīng)性宪萄。它可以很好地被利用，而不是傳統(tǒng)的 ProgressBar 或 Flutter 結(jié)構(gòu)中可訪問的常見loading酱虎。
適用場景
商品列表雨膨、我的收藏、預(yù)售活動读串、商品詳情等類似頁面聊记。
效果圖
商品列表頁 我的收藏
微光動畫效果屬性介紹
|
屬性
|
描述
|
|
baseColor
|
顯示在 Widget 上的 Shimmer 的基本顏色
|
|
highlightColor
|
提供微光般效果的顏色。這種顏色繼續(xù)在子小部件上波動恢暖，并產(chǎn)生微光效果
|
|
child
|
創(chuàng)建 ShimmerEffect 所需的任何小部件
|
|
direction
|
調(diào)整微光高光顏色的方向排监。從左到右、從右到左杰捂、從開始到結(jié)束或從底到頂
|
|
period
|
控制微光效果的速度舆床。默認(rèn)1500毫秒
|
具體實(shí)現(xiàn)
1.添加依賴-pubspec.yaml
shimmer: ^2.0.0
2.創(chuàng)建微光動畫Widget-ShimmerLoading
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
/// @author: niumenglin
/// @time: 2021/11/29-2:40 下午
/// @Email: menglin.nml@ncarzone.com
/// @desc:Flutter 微光動畫效果
class ShimmerLoading extends StatelessWidget {
final double width;
final double height;
final ShapeBorder shapeBorder;
///方形
const ShimmerLoading.rectangular(
{this.width = double.infinity, required this.height})
: this.shapeBorder = const RoundedRectangleBorder();
///圓形
const ShimmerLoading.circular(
{this.width = double.infinity,
required this.height,
this.shapeBorder = const CircleBorder()});
@override
Widget build(BuildContext context) => Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
period: Duration(seconds: 2),
child: Container(
width: width,
height: height,
decoration: ShapeDecoration(
color: Colors.grey[400]!,
shape: shapeBorder,
),
),
);
}
3.創(chuàng)建通用商品Item微光加載Widget
備注：如果通用的Widget與某個頁面完全不一致，需要單獨(dú)定義一套嫁佳。將原有item布局的組件統(tǒng)一替換成ShimmerLoading.rectangular或ShimmerLoading.circular即可挨队。
import 'package:flutter/material.dart';
import 'package:flutter_yonline/widget/shimmer/shimmer_loading.dart';
/// @author: niumenglin
/// @time: 2021/11/29-2:45 下午
/// @Email: menglin.nml@ncarzone.com
/// @desc:通用商品Item 微光加載布局
class CommonProductItemShimmer extends StatefulWidget {
const CommonProductItemShimmer({Key? key}) : super(key: key);
@override
_CommonProductItemShimmerState createState() =>
_CommonProductItemShimmerState();
}
class _CommonProductItemShimmerState extends State<CommonProductItemShimmer> {
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ShimmerLoading.rectangular(width: 85, height: 85),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ShimmerLoading.rectangular(height: 16),
SizedBox(
height: 10,
),
Container(
margin: EdgeInsets.only(top: 10),
child:
ShimmerLoading.rectangular(width: 140, height: 14),
),
SizedBox(
height: 10,
),
ShimmerLoading.rectangular(width: 80, height: 18),
SizedBox(
height: 10,
),
ShimmerLoading.rectangular(height: 12),
]),
))
],
),
),
Divider(
height: 10,
indent: 10,
color: Color(0xffD8D8D8),
)
],
);
}
}
4.定義一個全局bool值，是否是初始化加載標(biāo)識
比如：bool _initLoading=true蒿往。默認(rèn)為true盛垦；網(wǎng)絡(luò)請求回調(diào)后，將其置為false瓤漏。
5.build繪制列表頁時處理
5.1 _initLoading = true 場景
- 設(shè)置ListView的itemCount屬性腾夯，itemCount>=一個屏幕的可見數(shù)量;
- 設(shè)置itemBuilder 即通用的微光加載布局。
if (_initLoading) { return CommonProductItemShimmer();}
5.2 _initLoading = false 場景
- 設(shè)置ListView的itemCount屬性蔬充，xxxList集合長度
- 設(shè)置itemBuilder 即你原本創(chuàng)建的item布局蝶俱。
NCZListView(
.....
itemCount: _initLoading ? 10 : model.products.length,
itemBuilder: (_, index) {
if (_initLoading) {
return CommonProductItemShimmer();
}else {
return _buildYourItem();
}
}),
