簡介
在應用程序開發中，加載時間是不可避免的。從用戶體驗 (UX) 的角度來看，最重要的是向用戶展示正在加載。向用戶傳達數據正在加載的一種流行方法是在近似加載的內容類型的形狀上顯示帶有微光動畫的鍍鉻顏色。
Shimmer 用于在應用程序中從服務器加載內容時添加精彩的動畫。這使 UI 看起來更具響應性。它可以很好地被利用，而不是傳統的 ProgressBar 或 Flutter 結構中可訪問的常見loading。
適用場景
商品列表、我的收藏、預售活動、商品詳情等類似頁面。
效果圖
商品列表頁 我的收藏
微光動畫效果屬性介紹
|
屬性
|
描述
|
|
baseColor
|
顯示在 Widget 上的 Shimmer 的基本顏色
|
|
highlightColor
|
提供微光般效果的顏色。這種顏色繼續在子小部件上波動，并產生微光效果
|
|
child
|
創建 ShimmerEffect 所需的任何小部件
|
|
direction
|
調整微光高光顏色的方向。從左到右、從右到左、從開始到結束或從底到頂
|
|
period
|
控制微光效果的速度。默認1500毫秒
|
具體實現
1.添加依賴-pubspec.yaml
shimmer: ^2.0.0
2.創建微光動畫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.創建通用商品Item微光加載Widget
備注：如果通用的Widget與某個頁面完全不一致，需要單獨定義一套。將原有item布局的組件統一替換成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值，是否是初始化加載標識
比如：bool _initLoading=true。默認為true；網絡請求回調后，將其置為false。
5.build繪制列表頁時處理
5.1 _initLoading = true 場景
- 設置ListView的itemCount屬性，itemCount>=一個屏幕的可見數量;
- 設置itemBuilder 即通用的微光加載布局。
if (_initLoading) { return CommonProductItemShimmer();}
5.2 _initLoading = false 場景
- 設置ListView的itemCount屬性，xxxList集合長度
- 設置itemBuilder 即你原本創建的item布局。
NCZListView(
.....
itemCount: _initLoading ? 10 : model.products.length,
itemBuilder: (_, index) {
if (_initLoading) {
return CommonProductItemShimmer();
}else {
return _buildYourItem();
}
}),
