diff --git a/lib/ui/views/TIMUIKitGroupProfile/widgets/tim_uikit_group_member_title.dart b/lib/ui/views/TIMUIKitGroupProfile/widgets/tim_uikit_group_member_title.dart index aadaad3..aa1ff6a 100644 --- a/lib/ui/views/TIMUIKitGroupProfile/widgets/tim_uikit_group_member_title.dart +++ b/lib/ui/views/TIMUIKitGroupProfile/widgets/tim_uikit_group_member_title.dart @@ -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, ), ), ),