- 简介
- 定义下载的状态
- 定义DownloadButton的属性
- 让DownloadButton的属性可以动态变化
- 定义downloadController
- 定义DownloadButton的细节
- 总结
简介
一起来看看吧。
定义下载的状态
enum DownloadStatus {
notDownloaded,
fetchingDownload,
downloading,
downloaded,
}
基本上有4个状态，分别是没有下载，准备下载但是还没有获取到下载的资源链接，获取到下载资源正在下载中，最后是下载完毕。
定义DownloadButton的属性
我们需要根据下载状态来指定DownloadButton的样式，所以需要一个status属性。下载过程中还有一个下载的进度条，所以我们需要一个downloadProgress属性。
最后因为是一个动画组件，所以还需要一个动画的持续时间属性transitionDuration。
class DownloadButton extends StatelessWidget {
...
const DownloadButton({
super.key,
required this.status,
this.downloadProgress = 0.0,
required this.onDownload,
required this.onCancel,
required this.onOpen,
this.transitionDuration = const Duration(milliseconds: 500),
});
让DownloadButton的属性可以动态变化
上面提到了DownloadButton是一个StatelessWidget，所有的属性都是由外部传入的，但是对于一个动画的DownloadButton来说，status,downloadProgress这些信息都是会动态变化的，那么怎么才能让变化的属性传到DownloadButton中进行组件的重绘呢？
AnimatedBuilder是AnimatedWidget的子类，它有两个必须的参数，分别是animation和builder。
AnimatedBuilder会通过监听animation的变动情况，来重新构建builder中的组件。buidler方法可以从animation中获取对应的变动属性。
如下所示：
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('下载按钮')),
body: Center(
child: SizedBox(
width: 96,
child: AnimatedBuilder(
animation: _downloadController,
builder: (context, child) {
return DownloadButton(
status: _downloadController.downloadStatus,
downloadProgress: _downloadController.progress,
onDownload: _downloadController.startDownload,
onCancel: _downloadController.stopDownload,
onOpen: _downloadController.openDownload,
);
},
),
),
),
);
}
定义downloadController
downloadController是一个Listenable对象,这里我们让他实现ChangeNotifier接口,并且定义了两个获取下载状态和下载进度的方法，同时也定义了三个点击触发事件：
abstract class DownloadController implements ChangeNotifier {
DownloadStatus get downloadStatus;
double get progress;
void startDownload();
void stopDownload();
void openDownload();
}
接下来我们来实现这个抽象方法：
class MyDownloadController extends DownloadController
with ChangeNotifier {
MyDownloadController({
DownloadStatus downloadStatus = DownloadStatus.notDownloaded,
double progress = 0.0,
required VoidCallback onOpenDownload,
}) : _downloadStatus = downloadStatus,
_progress = progress,
_onOpenDownload = onOpenDownload;
startDownload,stopDownload这两个方法是跟下载状态和下载进度相关的，先看下stopDownload：
void stopDownload() {
if (_isDownloading) {
_isDownloading = false;
_downloadStatus = DownloadStatus.notDownloaded;
_progress = 0.0;
notifyListeners();
}
}
可以看到这个方法最后需要调用notifyListeners来通知AnimatedBuilder来进行组件的重绘。
Future<void> _doDownload() async {
_isDownloading = true;
_downloadStatus = DownloadStatus.fetchingDownload;
notifyListeners();
// fetch耗时1秒钟
await Future<void>.delayed(const Duration(seconds: 1));
if (!_isDownloading) {
return;
}
// 转换到下载的状态
_downloadStatus = DownloadStatus.downloading;
notifyListeners();
const downloadProgressStops = [0.0, 0.15, 0.45, 0.8, 1.0];
for (final progress in downloadProgressStops) {
await Future<void>.delayed(const Duration(seconds: 1));
if (!_isDownloading) {
return;
}
//更新progress
_progress = progress;
notifyListeners();
}
await Future<void>.delayed(const Duration(seconds: 1));
if (!_isDownloading) {
return;
}
//切换到下载完毕状态
_downloadStatus = DownloadStatus.downloaded;
_isDownloading = false;
notifyListeners();
}
}
因为下载是一个比较长的过程，所以这里用的是异步方法，在异步方法中进行通知。
定义DownloadButton的细节
在未开始下载之前，我们希望downloadButton是一个长条形的按钮，按钮上的文字显示GET,下载过程中希望是一个类似CircularProgressIndicator的动画，可以根据下载进度来动态变化。
因为动画比较复杂，所以我们将动画组件分成两部分，第一部分就是展示和隐藏长条形的按钮，这里我们使用AnimatedOpacity来实现文字的淡入淡出的效果，并将AnimatedOpacity封装在AnimatedContainer中，实现decoration的动画效果：
return AnimatedContainer(
duration: transitionDuration,
curve: Curves.ease,
width: double.infinity,
decoration: shape,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 6),
child: AnimatedOpacity(
duration: transitionDuration,
opacity: isDownloading || isFetching ? 0.0 : 1.0,
curve: Curves.ease,
child: Text(
isDownloaded ? 'OPEN' : 'GET',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.button?.copyWith(
fontWeight: FontWeight.bold,
color: CupertinoColors.activeBlue,
),
),
),
),
);
实现效果如下所示：
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1,
child: TweenAnimationBuilder<double>(
tween: Tween(begin: 0, end: downloadProgress),
duration: const Duration(milliseconds: 200),
builder: (context, progress, child) {
return CircularProgressIndicator(
backgroundColor: isDownloading
? CupertinoColors.lightBackgroundGray
: Colors.white.withOpacity(0),
valueColor: AlwaysStoppedAnimation(isFetching
? CupertinoColors.lightBackgroundGray
: CupertinoColors.activeBlue),
strokeWidth: 2,
value: isFetching ? null : progress,
);
},
),
);
}
这里使用的是TweenAnimationBuilder来实现CircularProgressIndicator根据不同progress的动画效果。
Positioned.fill(
child: AnimatedOpacity(
duration: transitionDuration,
opacity: _isDownloading || _isFetching ? 1.0 : 0.0,
curve: Curves.ease,
child: Stack(
alignment: Alignment.center,
children: [
ProgressIndicatorWidget(
downloadProgress: downloadProgress,
isDownloading: _isDownloading,
isFetching: _isFetching,
),
if (_isDownloading)
const Icon(
Icons.stop,
size: 14,
color: CupertinoColors.activeBlue,
),
],
),
),
总结
这样，我们一个动画的下载按钮就制作完成了，效果如下：
本文的例子：https://github.com/ddean2009/learn-flutter.git