在 Flutter 中实现一个自定义头像组件,可以接收 size
、src
(网络地址)和圆角大小作为参数,你可以创建一个新的 StatefulWidget 或 StatelessWidget。下面是一个 StatelessWidget 的示例:
import 'package:flutter/material.dart';
class Avatar extends StatelessWidget {
final double size;
final String src;
final double borderRadius;
const Avatar({
Key? key,
required this.size,
required this.src,
this.borderRadius = 6.0,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(borderRadius),
child: Image.network(
src,
width: size,
height: size,
fit: BoxFit.cover,
errorBuilder:
(BuildContext context, Object exception, StackTrace? stackTrace) {
// If the image fails to load, you can display a placeholder or an error widget
return Container(
color: Colors.grey[300],
width: size,
height: size,
child: Icon(Icons.person, size: size / 2),
);
},
),
);
}
}
使用该组件的示例:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Avatar Component',
home: Scaffold(
appBar: AppBar(
title: Text('Custom Avatar Component'),
),
body: Center(
child: Avatar(
size: 100.0,
src: 'https://example.com/user_avatar.png', // 替换为你的图片网络地址
borderRadius: 6.0,
),
),
),
);
}
}
这个 Avatar
组件接收三个参数:size
确定头像的宽度和高度,src
是头像图片的网络地址,borderRadius
确定头像的圆角大小。如果图片加载失败,使用了 errorBuilder
函数来提供一个备用的 placeholder 方案。
确保替换 'https://example.com/user_avatar.png'
为你实际的网络图片地址。如果网络地址无效或者因为任何原因导致图片加载失败,errorBuilder
会提供一个灰色背景的容器,其中包含一个人形图标,表示用户头像。
在实际的Flutter应用中,你可能还需要考虑图片的缓存策略以及加载时的占位符显示。为了改进上面的示例,我们可以使用CachedNetworkImage
包代替Image.network
来进行图片的缓存,并在图片加载的过程中显示一个圆形的进度指示器。下面是改进后的代码示例:
首先,你需要在pubspec.yaml
文件中添加cached_network_image
包的依赖:
dependencies:
flutter:
sdk: flutter
cached_network_image: ^3.0.0 # 请检查并使用最新版本
安装依赖后,在 Dart 代码中使用这个包:
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
class Avatar extends StatelessWidget {
final double size;
final String src;
final double borderRadius;
const Avatar({
Key? key,
required this.size,
required this.src,
this.borderRadius = 6.0,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(borderRadius),
child: CachedNetworkImage(
imageUrl: src,
width: size,
height: size,
fit: BoxFit.cover,
placeholder: (context, url) => CircularProgressIndicator(), // 加载时显示进度圈
errorWidget: (context, url, error) => Container(
color: Colors.grey[300],
width: size,
height: size,
child: Icon(Icons.person, size: size / 2),
),
),
);
}
}
在这个改进的版本中,CachedNetworkImage
组件会处理图片的加载及缓存,并提供了图片加载过程中的placeholder
和加载失败时的errorWidget
。CircularProgressIndicator
会在图片加载过程中展示一个圆形的加载动画,而当加载失败时,将同样显示一个带有用户图标的容器作为错误提示。这里的 CircularProgressIndicator
是内置的进度指示器,其大小和颜色可以根据需要进行调整。
完整代码示例可以像这样使用:
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Avatar Component',
home: Scaffold(
appBar: AppBar(
title: Text('Custom Avatar Component'),
),
body: Center(
child: Avatar(
size: 100.0,
src: 'https://example.com/user_avatar.png', // 替换为你的图片网络地址
borderRadius: 6.0,
),
),
),
);
}
}
class Avatar extends StatelessWidget {
final double size;
final String src;
final double borderRadius;
const Avatar({
Key? key,
required this.size,
required this.src,
this.borderRadius = 6.0,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(borderRadius),
child: CachedNetworkImage(
imageUrl: src,
width: size,
height: size,
fit: BoxFit.cover,
placeholder: (context, url) => SizedBox(
width: size,
height: size,
child: Center(child: CircularProgressIndicator()),
),
errorWidget: (context, url, error) => Container(
color: Colors.grey[300],
width: size,
height: size,
child: Icon(Icons.person, size: size / 2),
),
),
);
}
}
请确保替换 'https://example.com/user_avatar.png'
为一个有效的图片URL以正确显示网络图像。
此外,你还可以进一步定制进度指示器,为它添加颜色或动画。对于CircularProgressIndicator
,你可以设置valueColor
属性来改变颜色。例如:
CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).primaryColor),
),
这里是如何为 CircularProgressIndicator
设置颜色的示例:
// ...
placeholder: (context, url) => SizedBox(
width: size,
height: size,
child: Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).primaryColor),
),
),
),
// ...
在上述代码中,我们使用 Theme.of(context).primaryColor
来获取当前主题的主色调,并将其应用到 CircularProgressIndicator
,使得加载动画与应用的主题色保持一致。此外,AlwaysStoppedAnimation
包裹颜色值,使得该动画值在动画期间保持不变。
如需进一步定制,还可以调整加载指示器的大小、宽度等属性。例如,要设置不同的进度指示器大小,你可以使用 Container
或 SizedBox
来限制其大小:
placeholder: (context, url) => SizedBox(
width: size,
height: size,
child: Center(
child: CircularProgressIndicator(
strokeWidth: 2.0, // 设置进度指示器的线条宽度
valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).primaryColor),
),
),
),
在这里,strokeWidth
属性决定了 CircularProgressIndicator
的线条宽度。你可以根据自己的设计需求来调整这个值。
通过以上的讲解和代码示例,你现在应该能够在 Flutter 应用中创建一个带有网络图片、圆角、大小定制,并且在加载过程中有进度指示器的头像组件了。记得始终在使用第三方资源时审查其许可协议,确保你的应用遵循了所有必要的法律指导原则。
问题
该组件好像用作背景图的缓存时,有问题:
stackoverflow.com/questions/7…
原文链接:https://juejin.cn/post/7344002850320121896 作者:Struggle_zhu