Flutter重叠头像显示插件overapped_avatars的使用
Flutter重叠头像显示插件overapped_avatars的使用
overapped_avatars
插件可以用于在 Flutter 应用程序中显示重叠的头像。此插件提供了多种布局方式,使头像列表看起来更加自然。
示例
预览图
完整示例代码
import 'package:overapped_avatars/overapped_avatars.dart';
import 'package:overapped_avatars/avatar_list_item.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Overlapped Avatars Demo'),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
AvatarListLeading leading = AvatarListLeading.tight;
bool expanded = false;
[@override](/user/override)
Widget build(BuildContext context) {
var items = expanded
? List.generate(49, (index) => index + 1)
: List.generate(4, (index) => index + 1);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 10),
width: double.infinity,
height: 120,
child: GestureDetector(
onTap: () {
changeState();
},
child: AvatarList(
leading: AvatarListLeading.none,
avatars: List.generate(49, (index) => index + 1)
.map(generateAvatarListItem)
.toList(),
),
),
),
FittedBox(
child: Container(
padding: const EdgeInsets.symmetric(vertical: 10),
height: 120,
child: GestureDetector(
onTap: () {
changeState();
},
child: Flex(
direction: Axis.horizontal,
children: [
AvatarList(
leading: AvatarListLeading.tight,
avatars: List.generate(4, (index) => index + 1)
.map(generateAvatarListItem)
.toList(),
),
SizedBox(width: 60),
Expanded(
flex: 0,
child: Container(
alignment: Alignment.centerRight,
child: Text(
'+40',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40, fontWeight: FontWeight.bold),
),
),
),
],
),
),
),
),
SizedBox(height: 20),
GestureDetector(
onTap: () {
setState(() {
expanded = !expanded;
});
},
child: Container(
padding: const EdgeInsets.symmetric(vertical: 10),
width: double.infinity,
height: 120,
child: AvatarList(
leading: expanded
? AvatarListLeading.none
: AvatarListLeading.tight,
avatars: items.map(generateAvatarListItem).toList(),
),
),
),
SizedBox(height: 20),
Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
elevation: 20.0,
borderOnForeground: true,
child: Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.symmetric(
horizontal: 16, vertical: 16),
child: Text(
'Buy the milk.',
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold),
),
),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 4,
),
margin: const EdgeInsets.only(bottom: 16),
child: Text(
'2021-07-16',
style: TextStyle(
fontSize: 14, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16, vertical: 16),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 0),
width: double.infinity,
height: 40,
child: AvatarList(
leading: AvatarListLeading.loose,
avatars: List.generate(4, (index) => index + 1)
.map((index) =>
generateAvatarListItemWithRadius(
index, 20.0))
.toList(),
),
),
)
],
),
),
),
),
SizedBox(height: 20),
],
),
),
);
}
AvatarListItem generateAvatarListItem(index) {
var name = index > 9 ? '0$index.jpg' : '00$index.jpg';
return AvatarListItem(
imageProvider: AssetImage('images/$name'),
radius: 50,
);
}
AvatarListItem generateAvatarListItemWithRadius(index, radius) {
var name = index > 9 ? '0$index.jpg' : '00$index.jpg';
return AvatarListItem(
imageProvider: AssetImage('images/$name'),
radius: radius,
);
}
void changeState() {
var nextState;
switch (leading) {
case AvatarListLeading.tight:
nextState = AvatarListLeading.none;
break;
case AvatarListLeading.none:
nextState = AvatarListLeading.tight;
break;
default:
break;
}
if (nextState != null) {
setState(() => leading = nextState);
}
}
}
更多关于Flutter重叠头像显示插件overapped_avatars的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter重叠头像显示插件overapped_avatars的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
在 Flutter 中,如果你想实现重叠头像的效果(例如,多个用户的头像重叠显示),可以使用 overlapped_avatars
插件。这个插件可以帮助你轻松地实现这种视觉效果。
安装插件
首先,你需要在 pubspec.yaml
文件中添加 overlapped_avatars
依赖:
dependencies:
flutter:
sdk: flutter
overlapped_avatars: ^1.0.0 # 请确保使用最新版本
然后运行 flutter pub get
来安装依赖。
使用 OverlappedAvatars
OverlappedAvatars
组件允许你将多个头像重叠在一起。你可以通过传递一个 List<Widget>
(通常是 CircleAvatar
)来构造重叠头像。
以下是一个简单的示例:
import 'package:flutter/material.dart';
import 'package:overlapped_avatars/overlapped_avatars.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Overlapped Avatars Example'),
),
body: Center(
child: OverlappedAvatars(
avatars: [
CircleAvatar(
backgroundImage: AssetImage('assets/avatar1.png'),
),
CircleAvatar(
backgroundImage: AssetImage('assets/avatar2.png'),
),
CircleAvatar(
backgroundImage: AssetImage('assets/avatar3.png'),
),
],
overlapFraction: 0.5, // 重叠的比例,默认是 0.5
reverse: false, // 是否反向重叠,默认是 false
),
),
),
);
}
}
参数说明
avatars
: 一个List<Widget>
,通常包含多个CircleAvatar
,表示要重叠的头像。overlapFraction
: 头像之间的重叠比例,取值范围在0.0
到1.0
之间。默认值是0.5
,表示头像之间重叠一半。reverse
: 是否反向重叠。如果设置为true
,头像的显示顺序将反转。
自定义头像
你可以使用 CircleAvatar
来显示本地图片、网络图片或文本。例如:
CircleAvatar(
backgroundImage: NetworkImage('https://example.com/avatar.png'),
),
CircleAvatar(
backgroundColor: Colors.blue,
child: Text('A'),
),