Flutter實現(xiàn)仿微信群頭像功能
需求
在Flutter項目中，實現(xiàn)一個類似于微信群頭像的控件预麸。該控件能夠顯示多個頭像圖片侣姆，并且根據(jù)圖片的數(shù)量生真，自動調(diào)整布局，確保每個圖片都是正方形捺宗，且有統(tǒng)一的邊框和間距柱蟀。
效果
image.png
該控件能夠?qū)崿F(xiàn)以下效果：
- 根據(jù)圖片數(shù)量，動態(tài)調(diào)整圖片布局蚜厉。
- 每個圖片都有統(tǒng)一的邊框和間距长已。
- 圖片顯示為正方形，并支持圓角效果。
- 使用網(wǎng)絡(luò)圖片术瓮，并支持緩存和占位符康聂。
實現(xiàn)思路
-
控件設(shè)計：創(chuàng)建一個
AvatarGroup控件，接受圖片URL列表和一些布局參數(shù)胞四。 - 布局計算：根據(jù)圖片數(shù)量恬汁，動態(tài)計算每個圖片的尺寸和位置。
-
圖片顯示：使用
CachedNetworkImage加載網(wǎng)絡(luò)圖片撬讽，支持緩存蕊连、占位符和錯誤顯示。 -
邊框和圓角：使用
Container和BoxDecoration實現(xiàn)統(tǒng)一的邊框和圓角效果游昼。
實現(xiàn)代碼
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
class AvatarGroup extends StatelessWidget {
final List<String> imageUrls;
final double size;
final double space;
final Color color;
final Color borderColor;
final double borderWidth;
final double borderRadius;
const AvatarGroup({
Key? key,
required this.imageUrls,
this.size = 150.0,
this.space = 4.0,
this.color = Colors.grey,
this.borderWidth = 3.0,
this.borderColor = Colors.grey,
this.borderRadius = 4.0,
}) : super(key: key);
double get width {
return size - borderWidth * 2;
}
int get itemCount {
return imageUrls.length;
}
double get itemWidth {
if (itemCount == 1) {
return width;
} else if (itemCount >= 2 && itemCount <= 4) {
return (width - space) / 2;
} else {
return (width - 2 * space) / 3;
}
}
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: color,
border: Border.all(color: borderColor, width: borderWidth),
borderRadius: BorderRadius.circular(borderRadius),
),
width: size,
height: size,
child: Stack(
children: _buildAvatarStack(),
),
);
}
List<Widget> _buildAvatarStack() {
List<Widget> avatars = [];
for (int i = 0; i < imageUrls.length; i++) {
double left = 0;
double top = 0;
if (itemCount == 1) {
left = 0;
top = 0;
} else if (itemCount == 2) {
left = i * itemWidth + i * space;
top = (width - itemWidth) / 2;
} else if (itemCount == 3) {
if (i == 0) {
left = (width - itemWidth) / 2;
top = 0;
} else {
left = (i - 1) * itemWidth + (i - 1) * space;
top = itemWidth + space;
}
} else if (itemCount == 4) {
if (i == 0 || i == 1) {
left = i * itemWidth + i * space;
top = 0;
} else {
left = (i - 2) * itemWidth + (i - 2) * space;
top = itemWidth + space;
}
} else if (itemCount == 5) {
if (i == 0 || i == 1) {
left =
(width - itemWidth * 2 - space) / 2 + i * itemWidth + i * space;
top = (width - itemWidth * 2 - space) / 2;
} else {
left = (i - 2) * itemWidth + (i - 2) * space;
top = (width - itemWidth * 2 - space) / 2 + itemWidth + space;
}
} else if (itemCount == 6) {
var topOffset = (width - 2 * itemWidth - space) / 2;
left = (i % 3) * itemWidth + (i % 3) * space;
top = topOffset + (i / 3).floor() * itemWidth + (i / 3).floor() * space;
} else if (itemCount == 7) {
if (i == 0) {
left = (width - itemWidth) / 2;
top = 0;
} else {
left = ((i - 1) % 3) * itemWidth + ((i - 1) % 3) * space;
top = itemWidth +
space +
((i - 1) / 3).floor() * itemWidth +
((i - 1) / 3).floor() * space;
}
} else if (itemCount == 8) {
if (i == 0 || i == 1) {
left =
(width - itemWidth * 2 - space) / 2 + i * itemWidth + i * space;
top = 0;
} else {
left = ((i - 2) % 3) * itemWidth + ((i - 2) % 3) * space;
top = itemWidth +
space +
((i - 2) / 3).floor() * itemWidth +
((i - 2) / 3).floor() * space;
}
} else if (itemCount == 9) {
left = (i % 3) * itemWidth + (i % 3) * space;
top = (i / 3).floor() * itemWidth + (i / 3).floor() * space;
}
avatars.add(Positioned(
left: left,
top: top,
child: ClipRect(
child: CachedNetworkImage(
imageUrl: imageUrls[i],
placeholder: (context, url) => const CircularProgressIndicator(),
errorWidget: (context, url, error) => const Icon(Icons.error),
width: itemWidth,
height: itemWidth,
fit: BoxFit.cover,
),
),
));
}
return avatars;
}
}
使用
import 'package:flutter/material.dart';
import 'package:flutter_xy/xydemo/image/avatar/avatar_grid.dart';
import '../../../widgets/xy_app_bar.dart';
class AvatarGridPage extends StatelessWidget {
AvatarGridPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: XYAppBar(
title: "微信群頭像",
onBack: () {
Navigator.pop(context);
},
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 8.0,
mainAxisSpacing: 8.0,
),
itemCount: 9,
itemBuilder: (context, index) {
return LayoutBuilder(builder: (context, constraints) {
return AvatarGroup(
size: constraints.maxWidth,
color: Colors.grey.withAlpha(50),
borderColor: Colors.redAccent.withAlpha(80),
borderWidth: 2,
imageUrls: List.generate(
index + 1, (i) => _imageUrls[i % _imageUrls.length]),
);
});
},
),
),
);
}
final List<String> _imageUrls = [
'https://files.mdnice.com/user/34651/0d938792-603e-4945-a1d8-e53e605693d8.jpeg',
'https://files.mdnice.com/user/34651/a3b1fd72-ef80-4e31-8a33-2a57c4d115ce.jpeg',
'https://files.mdnice.com/user/34651/06de6046-bf3a-454c-a75b-6beeba78408b.jpeg',
'https://files.mdnice.com/user/34651/010ac7cb-9aa9-4a4d-93bb-14dc2cc0d994.jpeg',
'https://files.mdnice.com/user/34651/d88604e3-0dae-46f0-ab3f-d9e016516401.jpeg',
'https://files.mdnice.com/user/34651/91a53974-7bf7-47ba-a303-40d5fb61e31f.jpeg',
'https://files.mdnice.com/user/34651/6b7ca51c-65d0-4f35-b5c1-2c17ef494fd8.jpeg',
'https://files.mdnice.com/user/34651/0fbdd801-66d8-487c-bcdd-9afcaa611541.jpeg',
'https://files.mdnice.com/user/34651/0fbdd801-66d8-487c-bcdd-9afcaa611541.jpeg',
];
}
結(jié)束語
通過上述實現(xiàn)甘苍，我們成功地在Flutter中創(chuàng)建了一個仿微信群頭像的控件。這個控件不僅可以動態(tài)調(diào)整布局烘豌，還支持網(wǎng)絡(luò)圖片的緩存和占位符顯示载庭。希望這篇文章對你在Flutter項目中實現(xiàn)類似功能有所幫助。如果你有任何問題或建議廊佩，歡迎訪問我的GitHub項目:github.com/yixiaolunhui/flutter_xy與我交流囚聚。
