style(group): 优化群组信息页成员头像区布局，使其根据宽度自动充满每行空间以减少右侧空白
This commit is contained in:
parent
5f677c5caa
commit
5972a3aa77
|
|
@ -50,12 +50,14 @@ class GroupMemberTitle extends TIMUIKitStatelessWidget {
|
||||||
TUITheme theme,
|
TUITheme theme,
|
||||||
TUIGroupProfileModel model,
|
TUIGroupProfileModel model,
|
||||||
int showRange,
|
int showRange,
|
||||||
|
double itemSize,
|
||||||
) {
|
) {
|
||||||
final isDesktopScreen =
|
final isDesktopScreen =
|
||||||
TUIKitScreenUtils.getFormFactor() == DeviceType.Desktop;
|
TUIKitScreenUtils.getFormFactor() == DeviceType.Desktop;
|
||||||
return _getMemberList(memberList, showRange).map((element) {
|
return _getMemberList(memberList, showRange).map((element) {
|
||||||
final faceUrl = element?.faceUrl ?? "";
|
final faceUrl = element?.faceUrl ?? "";
|
||||||
final showName = _getShowName(element);
|
final showName = _getShowName(element);
|
||||||
|
final double avatarBoxSize = isDesktopScreen ? itemSize : (itemSize - 10);
|
||||||
return InkWell(
|
return InkWell(
|
||||||
onTapDown: (details) {
|
onTapDown: (details) {
|
||||||
if (model.onClickUser != null && element?.userID != null) {
|
if (model.onClickUser != null && element?.userID != null) {
|
||||||
|
|
@ -63,17 +65,17 @@ class GroupMemberTitle extends TIMUIKitStatelessWidget {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
child: SizedBox(
|
child: SizedBox(
|
||||||
width: isDesktopScreen ? 36 : 60,
|
width: itemSize,
|
||||||
height: isDesktopScreen ? 36 : 76,
|
height: isDesktopScreen ? itemSize : (avatarBoxSize + 26),
|
||||||
child: Column(
|
child: Column(
|
||||||
crossAxisAlignment: CrossAxisAlignment.center,
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
children: [
|
children: [
|
||||||
SizedBox(
|
SizedBox(
|
||||||
width: isDesktopScreen ? 36 : 50,
|
width: avatarBoxSize,
|
||||||
height: isDesktopScreen ? 36 : 50,
|
height: avatarBoxSize,
|
||||||
child: Avatar(
|
child: Avatar(
|
||||||
borderRadius: isDesktopScreen
|
borderRadius: isDesktopScreen
|
||||||
? BorderRadius.circular(18)
|
? BorderRadius.circular(itemSize / 2)
|
||||||
: null,
|
: null,
|
||||||
faceUrl: faceUrl,
|
faceUrl: faceUrl,
|
||||||
showName: showName,
|
showName: showName,
|
||||||
|
|
@ -158,6 +160,17 @@ class GroupMemberTitle extends TIMUIKitStatelessWidget {
|
||||||
showRange--;
|
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(
|
return Container(
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||||
color: Colors.white,
|
color: Colors.white,
|
||||||
|
|
@ -251,106 +264,130 @@ class GroupMemberTitle extends TIMUIKitStatelessWidget {
|
||||||
// height: 90,
|
// height: 90,
|
||||||
padding: const EdgeInsets.only(top: 12),
|
padding: const EdgeInsets.only(top: 12),
|
||||||
child: Wrap(
|
child: Wrap(
|
||||||
spacing: isDesktopScreen ? 10 : 20,
|
spacing: spacingValue,
|
||||||
runSpacing: 10,
|
runSpacing: 10,
|
||||||
alignment: WrapAlignment.start,
|
alignment: WrapAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
..._groupMemberListBuilder(memberList, theme, model, showRange),
|
..._groupMemberListBuilder(
|
||||||
|
memberList,
|
||||||
|
theme,
|
||||||
|
model,
|
||||||
|
showRange,
|
||||||
|
itemSize,
|
||||||
|
),
|
||||||
if (isCanInviteMember)
|
if (isCanInviteMember)
|
||||||
DottedBorder(
|
SizedBox(
|
||||||
borderType: BorderType.RRect,
|
width: itemSize,
|
||||||
radius: Radius.circular(isDesktopScreen ? 18 : 4.5),
|
child: Center(
|
||||||
color: theme.weakTextColor!,
|
child: DottedBorder(
|
||||||
dashPattern: const [6, 3],
|
borderType: BorderType.RRect,
|
||||||
child: SizedBox(
|
radius: Radius.circular(
|
||||||
width: isDesktopScreen ? 32 : 48,
|
isDesktopScreen ? (itemSize / 2) : 4.5),
|
||||||
height: isDesktopScreen ? 32 : 48,
|
color: theme.weakTextColor!,
|
||||||
child: IconButton(
|
dashPattern: const [6, 3],
|
||||||
onPressed: () {
|
child: SizedBox(
|
||||||
if (onAddMemberPressed != null) {
|
width:
|
||||||
onAddMemberPressed!();
|
isDesktopScreen ? itemSize : (itemSize - 10),
|
||||||
} else {
|
height:
|
||||||
if (isDesktopScreen) {
|
isDesktopScreen ? itemSize : (itemSize - 10),
|
||||||
TUIKitWidePopup.showPopupWindow(
|
child: IconButton(
|
||||||
context: context,
|
onPressed: () {
|
||||||
operationKey:
|
if (onAddMemberPressed != null) {
|
||||||
TUIKitWideModalOperationKey.addGroupMembers,
|
onAddMemberPressed!();
|
||||||
width: 350,
|
} else {
|
||||||
title: TIM_t("添加群成员"),
|
if (isDesktopScreen) {
|
||||||
height: 460,
|
TUIKitWidePopup.showPopupWindow(
|
||||||
onSubmit: () {
|
context: context,
|
||||||
addGroupMemberKey.currentState?.submitAdd();
|
operationKey: TUIKitWideModalOperationKey
|
||||||
},
|
.addGroupMembers,
|
||||||
child: (onClose) => AddGroupMemberPage(
|
width: 350,
|
||||||
model: model,
|
title: TIM_t("添加群成员"),
|
||||||
onClose: onClose,
|
height: 460,
|
||||||
key: addGroupMemberKey,
|
onSubmit: () {
|
||||||
),
|
addGroupMemberKey.currentState
|
||||||
);
|
?.submitAdd();
|
||||||
} else {
|
},
|
||||||
Navigator.push(
|
child: (onClose) => AddGroupMemberPage(
|
||||||
context,
|
model: model,
|
||||||
MaterialPageRoute(
|
onClose: onClose,
|
||||||
builder: (context) =>
|
key: addGroupMemberKey,
|
||||||
AddGroupMemberPage(model: model),
|
),
|
||||||
),
|
);
|
||||||
);
|
} else {
|
||||||
}
|
Navigator.push(
|
||||||
}
|
context,
|
||||||
},
|
MaterialPageRoute(
|
||||||
icon: Icon(Icons.add, size: isDesktopScreen ? 16 : 18),
|
builder: (context) => AddGroupMemberPage(
|
||||||
color: theme.weakTextColor,
|
model: model),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
icon: Icon(Icons.add,
|
||||||
|
size: isDesktopScreen ? 16 : 18),
|
||||||
|
color: theme.weakTextColor,
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
if (isCanKickOffMember)
|
if (isCanKickOffMember)
|
||||||
DottedBorder(
|
SizedBox(
|
||||||
borderType: BorderType.RRect,
|
width: itemSize,
|
||||||
radius: Radius.circular(isDesktopScreen ? 18 : 4.5),
|
child: Center(
|
||||||
color: theme.weakTextColor!,
|
child: DottedBorder(
|
||||||
dashPattern: const [6, 3],
|
borderType: BorderType.RRect,
|
||||||
child: SizedBox(
|
radius: Radius.circular(
|
||||||
width: isDesktopScreen ? 32 : 48,
|
isDesktopScreen ? (itemSize / 2) : 4.5),
|
||||||
height: isDesktopScreen ? 32 : 48,
|
color: theme.weakTextColor!,
|
||||||
child: IconButton(
|
dashPattern: const [6, 3],
|
||||||
onPressed: () {
|
child: SizedBox(
|
||||||
if (onRemoveMemberPressed != null) {
|
width:
|
||||||
onRemoveMemberPressed!();
|
isDesktopScreen ? itemSize : (itemSize - 10),
|
||||||
} else {
|
height:
|
||||||
if (isDesktopScreen) {
|
isDesktopScreen ? itemSize : (itemSize - 10),
|
||||||
TUIKitWidePopup.showPopupWindow(
|
child: IconButton(
|
||||||
operationKey: TUIKitWideModalOperationKey
|
onPressed: () {
|
||||||
.kickOffGroupMembers,
|
if (onRemoveMemberPressed != null) {
|
||||||
context: context,
|
onRemoveMemberPressed!();
|
||||||
width: 350,
|
} else {
|
||||||
title: TIM_t("删除群成员"),
|
if (isDesktopScreen) {
|
||||||
height: 460,
|
TUIKitWidePopup.showPopupWindow(
|
||||||
onSubmit: () {
|
operationKey: TUIKitWideModalOperationKey
|
||||||
deleteGroupMemberKey.currentState
|
.kickOffGroupMembers,
|
||||||
?.submitDelete();
|
context: context,
|
||||||
},
|
width: 350,
|
||||||
child: (onClose) => DeleteGroupMemberPage(
|
title: TIM_t("删除群成员"),
|
||||||
model: model,
|
height: 460,
|
||||||
onClose: onClose,
|
onSubmit: () {
|
||||||
key: deleteGroupMemberKey,
|
deleteGroupMemberKey.currentState
|
||||||
),
|
?.submitDelete();
|
||||||
);
|
},
|
||||||
} else {
|
child: (onClose) => DeleteGroupMemberPage(
|
||||||
Navigator.push(
|
model: model,
|
||||||
context,
|
onClose: onClose,
|
||||||
MaterialPageRoute(
|
key: deleteGroupMemberKey,
|
||||||
builder: (context) =>
|
),
|
||||||
DeleteGroupMemberPage(model: model),
|
);
|
||||||
),
|
} else {
|
||||||
);
|
Navigator.push(
|
||||||
}
|
context,
|
||||||
}
|
MaterialPageRoute(
|
||||||
},
|
builder: (context) =>
|
||||||
icon: Icon(
|
DeleteGroupMemberPage(model: model),
|
||||||
Icons.remove,
|
),
|
||||||
size: isDesktopScreen ? 16 : 18,
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
icon: Icon(
|
||||||
|
Icons.remove,
|
||||||
|
size: isDesktopScreen ? 16 : 18,
|
||||||
|
),
|
||||||
|
color: theme.weakTextColor,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
color: theme.weakTextColor,
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue