wangyang
/
tencent_cloud_chat_uikit_flutter
1
0
Fork 0
Code Pull Requests Actions Releases Activity

style(group): 优化群组信息页成员头像区布局，使其根据宽度自动充满每行空间以减少右侧空白

This commit is contained in:
Zeew 2025-08-19 14:10:09 +08:00
parent 5f677c5caa
commit 5972a3aa77
1 changed files with 133 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

229
lib/ui/views/TIMUIKitGroupProfile/widgets/tim_uikit_group_member_title.dart
View File

@ -50,12 +50,14 @@ class GroupMemberTitle extends TIMUIKitStatelessWidget {
TUITheme theme,
TUIGroupProfileModel model,
int showRange,
double itemSize,
) {
final isDesktopScreen =
TUIKitScreenUtils.getFormFactor() == DeviceType.Desktop;
return _getMemberList(memberList, showRange).map((element) {
final faceUrl = element?.faceUrl ?? "";
final showName = _getShowName(element);
final double avatarBoxSize = isDesktopScreen ? itemSize : (itemSize - 10);
return InkWell(
onTapDown: (details) {
if (model.onClickUser != null && element?.userID != null) {
@ -63,17 +65,17 @@ class GroupMemberTitle extends TIMUIKitStatelessWidget {
}
},
child: SizedBox(
width: isDesktopScreen ? 36 : 60,
height: isDesktopScreen ? 36 : 76,
width: itemSize,
height: isDesktopScreen ? itemSize : (avatarBoxSize + 26),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
width: isDesktopScreen ? 36 : 50,
height: isDesktopScreen ? 36 : 50,
width: avatarBoxSize,
height: avatarBoxSize,
child: Avatar(
borderRadius: isDesktopScreen
? BorderRadius.circular(18)
? BorderRadius.circular(itemSize / 2)
: null,
faceUrl: faceUrl,
showName: showName,
@ -158,6 +160,17 @@ class GroupMemberTitle extends TIMUIKitStatelessWidget {
showRange--;
}
// 动态计算每行最多元素数 n 与平均 item 尺寸
final double containerHorizontalPadding = 16.0; // Container 左右边距
final double availableWidth =
MediaQuery.of(context).size.width - containerHorizontalPadding * 2;
final double spacingValue = isDesktopScreen ? 10.0 : 20.0; // Wrap 的水平间距
final double sizePre = isDesktopScreen ? 36.0 : 60.0; // 预设尺寸
int n = ((availableWidth + spacingValue) / (sizePre + spacingValue)).floor();
if (n < 1) n = 1;
final double itemSize =
(availableWidth - spacingValue * (n - 1)) / n; // 平均后的单项宽度
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
color: Colors.white,
@ -251,106 +264,130 @@ class GroupMemberTitle extends TIMUIKitStatelessWidget {
// height: 90,
padding: const EdgeInsets.only(top: 12),
child: Wrap(
spacing: isDesktopScreen ? 10 : 20,
spacing: spacingValue,
runSpacing: 10,
alignment: WrapAlignment.start,
children: [
..._groupMemberListBuilder(memberList, theme, model, showRange),
..._groupMemberListBuilder(
memberList,
theme,
model,
showRange,
itemSize,
),
if (isCanInviteMember)
DottedBorder(
borderType: BorderType.RRect,
radius: Radius.circular(isDesktopScreen ? 18 : 4.5),
color: theme.weakTextColor!,
dashPattern: const [6, 3],
child: SizedBox(
width: isDesktopScreen ? 32 : 48,
height: isDesktopScreen ? 32 : 48,
child: IconButton(
onPressed: () {
if (onAddMemberPressed != null) {
onAddMemberPressed!();
} else {
if (isDesktopScreen) {
TUIKitWidePopup.showPopupWindow(
context: context,
operationKey:
TUIKitWideModalOperationKey.addGroupMembers,
width: 350,
title: TIM_t("添加群成员"),
height: 460,
onSubmit: () {
addGroupMemberKey.currentState?.submitAdd();
},
child: (onClose) => AddGroupMemberPage(
model: model,
onClose: onClose,
key: addGroupMemberKey,
),
);
} else {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
AddGroupMemberPage(model: model),
),
);
}
}
},
icon: Icon(Icons.add, size: isDesktopScreen ? 16 : 18),
color: theme.weakTextColor,
SizedBox(
width: itemSize,
child: Center(
child: DottedBorder(
borderType: BorderType.RRect,
radius: Radius.circular(
isDesktopScreen ? (itemSize / 2) : 4.5),
color: theme.weakTextColor!,
dashPattern: const [6, 3],
child: SizedBox(
width:
isDesktopScreen ? itemSize : (itemSize - 10),
height:
isDesktopScreen ? itemSize : (itemSize - 10),
child: IconButton(
onPressed: () {
if (onAddMemberPressed != null) {
onAddMemberPressed!();
} else {
if (isDesktopScreen) {
TUIKitWidePopup.showPopupWindow(
context: context,
operationKey: TUIKitWideModalOperationKey
.addGroupMembers,
width: 350,
title: TIM_t("添加群成员"),
height: 460,
onSubmit: () {
addGroupMemberKey.currentState
?.submitAdd();
},
child: (onClose) => AddGroupMemberPage(
model: model,
onClose: onClose,
key: addGroupMemberKey,
),
);
} else {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AddGroupMemberPage(
model: model),
),
);
}
}
},
icon: Icon(Icons.add,
size: isDesktopScreen ? 16 : 18),
color: theme.weakTextColor,
),
),
),
),
),
if (isCanKickOffMember)
DottedBorder(
borderType: BorderType.RRect,
radius: Radius.circular(isDesktopScreen ? 18 : 4.5),
color: theme.weakTextColor!,
dashPattern: const [6, 3],
child: SizedBox(
width: isDesktopScreen ? 32 : 48,
height: isDesktopScreen ? 32 : 48,
child: IconButton(
onPressed: () {
if (onRemoveMemberPressed != null) {
onRemoveMemberPressed!();
} else {
if (isDesktopScreen) {
TUIKitWidePopup.showPopupWindow(
operationKey: TUIKitWideModalOperationKey
.kickOffGroupMembers,
context: context,
width: 350,
title: TIM_t("删除群成员"),
height: 460,
onSubmit: () {
deleteGroupMemberKey.currentState
?.submitDelete();
},
child: (onClose) => DeleteGroupMemberPage(
model: model,
onClose: onClose,
key: deleteGroupMemberKey,
),
);
} else {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
DeleteGroupMemberPage(model: model),
),
);
}
}
},
icon: Icon(
Icons.remove,
size: isDesktopScreen ? 16 : 18,
SizedBox(
width: itemSize,
child: Center(
child: DottedBorder(
borderType: BorderType.RRect,
radius: Radius.circular(
isDesktopScreen ? (itemSize / 2) : 4.5),
color: theme.weakTextColor!,
dashPattern: const [6, 3],
child: SizedBox(
width:
isDesktopScreen ? itemSize : (itemSize - 10),
height:
isDesktopScreen ? itemSize : (itemSize - 10),
child: IconButton(
onPressed: () {
if (onRemoveMemberPressed != null) {
onRemoveMemberPressed!();
} else {
if (isDesktopScreen) {
TUIKitWidePopup.showPopupWindow(
operationKey: TUIKitWideModalOperationKey
.kickOffGroupMembers,
context: context,
width: 350,
title: TIM_t("删除群成员"),
height: 460,
onSubmit: () {
deleteGroupMemberKey.currentState
?.submitDelete();
},
child: (onClose) => DeleteGroupMemberPage(
model: model,
onClose: onClose,
key: deleteGroupMemberKey,
),
);
} else {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
DeleteGroupMemberPage(model: model),
),
);
}
}
},
icon: Icon(
Icons.remove,
size: isDesktopScreen ? 16 : 18,
),
color: theme.weakTextColor,
),
),
color: theme.weakTextColor,
),
),
),