Jason/zh-chat-flutter
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

基础页面

Browse Source
This commit is contained in:
Jason.Chen
2022-10-20 14:21:39 +08:00
parent 49ad269c2b
commit 42ba10ec61
62 changed files with 5132 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
lib/views/home/index_page.dart
View File

@@ -1,19 +1,219 @@
import 'package:chat/configs/app_colors.dart';
import 'package:chat/routes/app_routes.dart';
import 'package:chat/routes/contact_routes.dart';
import 'package:chat/routes/user_routes.dart';
import 'package:chat/services/tim/conversation_service.dart';
import 'package:chat/views/home/widgets/conversation_item.dart';
import 'package:chat/widgets/custom_easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:get/get.dart';
import 'package:permission_handler/permission_handler.dart';
class HomePage extends StatefulWidget {
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('消息'),
backgroundColor: AppColors.white,
appBar: _appBar(),
body: EasyRefresh(
header: CustomEasyRefresh.header,
// firstRefresh: true,
onRefresh: () async {
await TimConversationService.to.fetchList();
},
child: GetX<TimConversationService>(
builder: (_) {
return _.conversationList.isEmpty
? CustomEasyRefresh.empty()
: ListView.separated(
shrinkWrap: true,
physics: const ClampingScrollPhysics(),
itemCount: _.conversationList.length,
itemBuilder: (context, index) {
return ConversationItem(_.conversationList[index]!);
},
separatorBuilder: (context, index) {
return const Divider(
height: 0,
indent: 72,
);
},
);
},
),
),
);
}
PreferredSizeWidget _appBar() {
return AppBar(
title: const Text('聊聊'),
actions: [
IconButton(
onPressed: () {
Get.toNamed(AppRoutes.search);
},
icon: const Icon(Icons.search_outlined),
),
PopupMenuButton<String>(
onSelected: (String value) {
switch (value) {
case 'A':
Get.toNamed(UserRoutes.qrCode);
break;
case 'B':
Get.toNamed(ContactRoutes.groupCreate);
break;
case 'C':
Get.toNamed(ContactRoutes.friendSearch);
break;
case 'D':
Permission.camera.request().isGranted.then((value) {
if (value) {
Get.toNamed(AppRoutes.scan);
}
});
break;
}
},
tooltip: '',
offset: const Offset(0, 56),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
icon: const Icon(
Icons.add,
),
itemBuilder: (_) {
return [
_popupMenuItem('我的二维码', 'A', Icons.qr_code_outlined),
_popupMenuItem('发起群聊', 'B', Icons.textsms),
_popupMenuItem('添加朋友', 'C', Icons.person_add_alt),
_popupMenuItem('扫一扫', 'D', Icons.photo_camera),
];
},
)
],
);
}
/// 右上角弹出菜单
PopupMenuItem<String> _popupMenuItem(
String text,
String value,
IconData icon,
) {
return PopupMenuItem(
value: value,
child: Row(
children: [
Icon(
icon,
color: AppColors.primary,
size: 18,
),
const SizedBox(width: 8),
Text(
text,
style: const TextStyle(
fontSize: 14,
),
),
],
),
);
}
// /// 左侧抽题
// Widget _drawer() {
// return Drawer(
// child: ListView(
// children: [
// GetX<UserController>(builder: (_) {
// return DrawerHeader(
// child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// CustomCircleAvatar(
// _.userInfo.value!.avatar,
// size: 72,
// ),
// const SizedBox(height: 8),
// Text(
// _.userInfo.value!.nickname,
// style: const TextStyle(
// fontSize: 24,
// fontWeight: FontWeight.bold,
// ),
// ),
// ],
// ),
// );
// }),
// ListTile(
// onTap: () {
// Get.back();
// Get.toNamed(UserRoutes.info);
// },
// leading: const Icon(Icons.info_outlined),
// title: const Text('修改资料'),
// ),
// const Divider(height: 0),
// ListTile(
// onTap: () {
// Get.back();
// Get.toNamed(
// ImRoutes.friend,
// arguments: {
// 'name_card': false,
// },
// );
// },
// leading: const Icon(Icons.person_outlined),
// title: const Text('我的好友'),
// ),
// const Divider(height: 0),
// ListTile(
// onTap: () {
// Get.back();
// Get.toNamed(ImRoutes.group);
// },
// leading: const Icon(Icons.group_outlined),
// title: const Text('我的群组'),
// ),
// const Divider(height: 0),
// ListTile(
// onTap: () {
// Get.back();
// Get.toNamed(ImRoutes.blcok);
// },
// leading: const Icon(Icons.block_flipped),
// title: const Text('黑名单'),
// ),
// const Divider(height: 0),
// ListTile(
// onTap: () {
// Get.back();
// Get.toNamed(ImRoutes.friendRequest);
// },
// leading: const Icon(Icons.person_add_alt_outlined),
// title: const Text('好友申请'),
// ),
// const Divider(height: 0),
// ListTile(
// onTap: () {
// Get.back();
// Get.toNamed(ImRoutes.setting);
// },
// leading: const Icon(Icons.settings_outlined),
// title: const Text('消息设置'),
// ),
// const Divider(height: 0),
// ],
// ),
// );
// }
}

39
lib/views/home/widgets/action_button.dart Normal file
View File

@@ -0,0 +1,39 @@
import 'package:chat/configs/app_colors.dart';
import 'package:flutter/material.dart';
class ActionButton extends StatelessWidget {
final String text;
final Color color;
final VoidCallback? onTap;
const ActionButton(
this.text, {
this.color = AppColors.red,
this.onTap,
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
onTap?.call();
},
child: Container(
color: AppColors.white,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Center(
child: Text(
text,
style: TextStyle(
fontWeight: FontWeight.w500,
color: color,
),
),
),
),
),
);
}
}

76
lib/views/home/widgets/action_item.dart Normal file
View File

@@ -0,0 +1,76 @@
import 'package:chat/configs/app_colors.dart';
import 'package:flutter/material.dart';
class ActionItem extends StatelessWidget {
final String title;
final String? extend;
final Widget? rightWidget;
final String? bottom;
final VoidCallback? onTap;
const ActionItem(
this.title, {
this.extend,
this.rightWidget,
this.bottom,
this.onTap,
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
onTap?.call();
},
child: Container(
color: AppColors.white,
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
title,
style: const TextStyle(
fontSize: 16,
),
),
Expanded(child: Container()),
if (extend != null)
Text(
extend!,
style: const TextStyle(
color: AppColors.unactive,
),
),
rightWidget ??
const Icon(
Icons.arrow_forward_ios,
size: 16,
color: AppColors.unactive,
),
],
),
if (bottom != null && bottom!.isNotEmpty)
Padding(
padding: const EdgeInsets.only(top: 4),
child: Text(
bottom!,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.unactive,
fontSize: 12,
),
),
),
],
),
),
);
}
}

212
lib/views/home/widgets/conversation_item.dart Normal file
View File

@@ -0,0 +1,212 @@
import 'package:chat/configs/app_colors.dart';
import 'package:chat/routes/conversation_routes.dart';
import 'package:chat/services/tim/conversation_service.dart';
import 'package:chat/utils/convert.dart';
import 'package:chat/views/home/widgets/group_avatar.dart';
import 'package:chat/views/home/widgets/message_preview_widget.dart';
import 'package:chat/views/home/widgets/pop_menu_item.dart';
import 'package:chat/widgets/custom_avatar.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:tencent_im_sdk_plugin/enum/conversation_type.dart';
import 'package:tencent_im_sdk_plugin/models/v2_tim_conversation.dart';
class ConversationItem extends StatelessWidget {
final V2TimConversation conversation;
const ConversationItem(this.conversation, {Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: 68,
decoration: BoxDecoration(
color: conversation.isPinned! ? AppColors.page : null,
),
padding: const EdgeInsets.only(
left: 16,
right: 16,
top: 12,
bottom: 12,
),
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
Get.toNamed(
ConversationRoutes.index,
arguments: {
'conversation': conversation,
},
);
},
onLongPress: () async {
await _showLongPressMenu();
},
child: Row(
children: [
Stack(
clipBehavior: Clip.none,
children: [
conversation.type == ConversationType.V2TIM_C2C
? CustomAvatar(
conversation.faceUrl,
)
: GroupAvatar(conversation.groupID!),
Visibility(
visible: conversation.recvOpt == 0 &&
conversation.unreadCount! > 0,
child: Positioned(
right: -5,
top: -5,
child: Container(
width: 18,
height: 18,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(18),
color: AppColors.red,
),
alignment: Alignment.center,
child: Center(
child: Text(
conversation.unreadCount! > 99
? '99+'
: conversation.unreadCount.toString(),
style: const TextStyle(
fontSize: 10,
color: AppColors.white,
),
),
),
),
),
),
Visibility(
visible: conversation.recvOpt == 1 &&
conversation.unreadCount! > 0,
child: const Positioned(
right: -3,
top: -3,
child: Icon(
Icons.circle_rounded,
color: AppColors.red,
size: 8,
),
),
)
],
),
const SizedBox(width: 16),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
conversation.showName!,
style: const TextStyle(
fontSize: 16,
),
),
MessagePreviewWidget(conversation.lastMessage),
],
),
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
conversation.lastMessage == null
? ''
: Convert.timeFormat(
conversation.lastMessage!.timestamp!,
format: 'MM/dd HH:mm',
),
style: const TextStyle(
fontSize: 12,
color: Colors.grey,
),
),
if (conversation.recvOpt == 1)
const Icon(
Icons.notifications_off_outlined,
size: 14,
color: AppColors.unactive,
),
],
),
],
),
),
);
}
Future<void> _showLongPressMenu() async {
showModalBottomSheet(
context: Get.context!,
isScrollControlled: true,
backgroundColor: AppColors.white,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(8)),
),
builder: (context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
PopMenuItem(
conversation.isPinned! ? '取消置顶' : '聊天置顶',
onTap: () {
TimConversationService.to.setOnTop(conversation);
Get.back();
},
),
const Divider(height: 0),
PopMenuItem(
conversation.recvOpt == 1 ? '取消免打扰' : '消息免打扰',
onTap: () {
TimConversationService.to.setReceiveOpt(conversation);
Get.back();
},
),
const Divider(height: 0),
PopMenuItem(
'清空聊天记录',
onTap: () {
TimConversationService.to.clearHistoryMessage(conversation);
Get.back();
},
),
const Divider(height: 0),
PopMenuItem(
'标为已读',
onTap: () {
TimConversationService.to.markAsRead(conversation);
Get.back();
},
),
const Divider(height: 0),
PopMenuItem(
'删除该聊天',
onTap: () {
TimConversationService.to.delete(conversation);
Get.back();
},
),
const Divider(height: 0.4),
Container(
color: AppColors.page,
height: 8,
),
const Divider(height: 0.4),
PopMenuItem(
'取消',
onTap: () {
Get.back();
},
),
],
);
},
);
}
}

140
lib/views/home/widgets/friend_selector.dart Normal file
View File

@@ -0,0 +1,140 @@
import 'package:azlistview/azlistview.dart';
import 'package:chat/configs/app_colors.dart';
import 'package:chat/models/im/contact_info_model.dart';
import 'package:chat/services/tim/friend_service.dart';
import 'package:chat/utils/im_tools.dart';
import 'package:chat/widgets/custom_avatar.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:tencent_im_sdk_plugin/models/v2_tim_friend_info.dart';
import 'package:tencent_im_sdk_plugin/models/v2_tim_group_member_full_info.dart';
class FriendSelector extends StatefulWidget {
final Function(List<V2TimFriendInfo>) onChanged;
final List<V2TimGroupMemberFullInfo?>? lockedUsers;
const FriendSelector({
required this.onChanged,
this.lockedUsers,
Key? key,
}) : super(key: key);
@override
State<FriendSelector> createState() => _FriendSelectorState();
}
class _FriendSelectorState extends State<FriendSelector> {
/// 选中的好友列表
List<V2TimFriendInfo> selectList =
List<V2TimFriendInfo>.empty(growable: true);
/// 选择列表改变的事件，更新选中列表
_selectListChange(id) {
setState(() {
if (selectList.contains(id)) {
selectList.remove(id);
} else {
selectList.add(id);
}
});
widget.onChanged(selectList);
}
@override
Widget build(BuildContext context) {
return GetX<TimFriendService>(
builder: (_) {
return AzListView(
data: _.contacts,
itemCount: _.contacts.length,
itemBuilder: (BuildContext context, int index) {
ContactInfoModel info = _.contacts[index];
return _contactItem(info);
},
susItemBuilder: (BuildContext context, int index) {
ContactInfoModel model = _.contacts[index];
return ImTools.susItem(
context,
model.getSuspensionTag(),
susHeight: 32,
);
},
indexBarData: SuspensionUtil.getTagIndexList(_.contacts).toList(),
indexBarOptions: ImTools.indexBarOptions,
);
},
);
}
Widget _contactItem(
ContactInfoModel info,
) {
bool isDisable = widget.lockedUsers == null
? false
: widget.lockedUsers!
.where(
(e) => e!.userID == info.friendInfo!.userID,
)
.isNotEmpty;
return Column(
children: [
GestureDetector(
onTap: () {},
child: Container(
color: AppColors.white,
padding: const EdgeInsets.symmetric(vertical: 4),
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: isDisable
? null
: () {
setState(() {
_selectListChange(info.friendInfo);
});
},
child: Row(
children: [
Radio<V2TimFriendInfo>(
groupValue:
selectList.contains(info.friendInfo) || isDisable
? info.friendInfo
: null,
onChanged: isDisable
? null
: (value) {
setState(() {
_selectListChange(info.friendInfo);
});
},
value: info.friendInfo!,
toggleable: true,
),
CustomAvatar(
info.friendInfo!.userProfile!.faceUrl,
size: 32,
radius: 2,
),
const SizedBox(
width: 16,
),
Expanded(
child: Text(
info.name,
style: const TextStyle(
fontSize: 16,
),
),
),
],
),
),
),
),
const Divider(
height: 0,
indent: 92,
),
],
);
}
}

68
lib/views/home/widgets/group_avatar.dart Normal file
View File

@@ -0,0 +1,68 @@
import 'package:chat/configs/app_colors.dart';
import 'package:chat/services/tim/group_service.dart';
import 'package:chat/widgets/custom_avatar.dart';
import 'package:flutter/material.dart';
import 'package:tencent_im_sdk_plugin/models/v2_tim_group_member_full_info.dart';
class GroupAvatar extends StatefulWidget {
final String groupID;
final double size;
const GroupAvatar(
this.groupID, {
this.size = 44,
Key? key,
}) : super(key: key);
@override
State<GroupAvatar> createState() => _GroupAvatarState();
}
class _GroupAvatarState extends State<GroupAvatar> {
List<V2TimGroupMemberFullInfo?>? members;
@override
void initState() {
super.initState();
TimGroupService.to.members(widget.groupID, count: 9).then((value) {
setState(() {
members = value;
});
});
}
@override
Widget build(BuildContext context) {
return Container(
width: widget.size,
height: widget.size,
decoration: BoxDecoration(
border: Border.all(
color: AppColors.border,
width: 0.4,
),
borderRadius: BorderRadius.circular(4),
),
child: members == null
? CustomAvatar('')
: GridView.builder(
padding: const EdgeInsets.all(1),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount:
(members != null && members!.length > 4) ? 3 : 2,
childAspectRatio: 1,
crossAxisSpacing: 1,
mainAxisSpacing: 1,
),
itemCount: members!.length,
itemBuilder: (context, index) {
return CustomAvatar(
members![index]?.faceUrl,
size: widget.size / 3,
radius: 2,
);
},
),
);
}
}

111
lib/views/home/widgets/group_user_selector.dart Normal file
View File

@@ -0,0 +1,111 @@
import 'package:chat/configs/app_colors.dart';
import 'package:chat/widgets/custom_avatar.dart';
import 'package:flutter/material.dart';
import 'package:tencent_im_sdk_plugin/models/v2_tim_group_member_full_info.dart';
class GroupUserSelector extends StatefulWidget {
final Function(List<V2TimGroupMemberFullInfo>) onChanged;
final List<V2TimGroupMemberFullInfo> selectedList;
final List<V2TimGroupMemberFullInfo?> originalList;
const GroupUserSelector({
required this.onChanged,
required this.selectedList,
required this.originalList,
Key? key,
}) : super(key: key);
@override
State<GroupUserSelector> createState() => _GroupUserSelectorState();
}
class _GroupUserSelectorState extends State<GroupUserSelector> {
/// 选中的好友列表
List<V2TimGroupMemberFullInfo> selectList =
List<V2TimGroupMemberFullInfo>.empty(growable: true);
/// 选择列表改变的事件，更新选中列表
_selectListChange(id) {
setState(() {
if (selectList.contains(id)) {
selectList.remove(id);
} else {
selectList.add(id);
}
});
widget.onChanged(selectList);
}
@override
Widget build(BuildContext context) {
return ListView.separated(
itemBuilder: (_, index) {
return _contactItem(widget.originalList[index]!);
},
separatorBuilder: (_, index) {
return const Divider(
height: 0,
);
},
itemCount: widget.originalList.length,
);
}
Widget _contactItem(
V2TimGroupMemberFullInfo info,
) {
return Column(
children: [
GestureDetector(
onTap: () {},
child: Container(
color: AppColors.white,
padding: const EdgeInsets.symmetric(vertical: 4),
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
setState(() {
_selectListChange(info);
});
},
child: Row(
children: [
Radio<V2TimGroupMemberFullInfo>(
groupValue: selectList.contains(info) ? info : null,
onChanged: (value) {
setState(() {
_selectListChange(info);
});
},
value: info,
toggleable: true,
),
CustomAvatar(
info.faceUrl,
size: 32,
radius: 2,
),
const SizedBox(
width: 16,
),
Expanded(
child: Text(
info.nickName!,
style: const TextStyle(
fontSize: 16,
),
),
),
],
),
),
),
),
const Divider(
height: 0,
indent: 92,
),
],
);
}
}

26
lib/views/home/widgets/message_preview_widget.dart Normal file
View File

@@ -0,0 +1,26 @@
import 'package:chat/configs/app_colors.dart';
import 'package:chat/utils/im_tools.dart';
import 'package:flutter/material.dart';
import 'package:tencent_im_sdk_plugin/models/v2_tim_message.dart';
class MessagePreviewWidget extends StatelessWidget {
final V2TimMessage? message;
const MessagePreviewWidget(this.message, {Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
if (message == null) {
return const Text('');
}
return Text(
ImTools.parseMessage(message),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.unactive,
fontSize: 14,
),
);
}
}

29
lib/views/home/widgets/pop_menu_item.dart Normal file
View File

@@ -0,0 +1,29 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class PopMenuItem extends StatelessWidget {
final String text;
final VoidCallback? onTap;
const PopMenuItem(
this.text, {
this.onTap,
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
onTap?.call();
},
child: Container(
height: 52,
width: Get.width,
alignment: Alignment.center,
child: Text(text),
),
);
}
}