diff --git a/assets/images/camera.png b/assets/images/camera.png new file mode 100644 index 0000000..7670c55 Binary files /dev/null and b/assets/images/camera.png differ diff --git a/assets/images/photo.png b/assets/images/photo.png new file mode 100644 index 0000000..1b12978 Binary files /dev/null and b/assets/images/photo.png differ diff --git a/lib/generated/assets.dart b/lib/generated/assets.dart index 6589aef..e9e4e03 100644 --- a/lib/generated/assets.dart +++ b/lib/generated/assets.dart @@ -10,6 +10,7 @@ class Assets { static const String imagesBgEditAvatars = 'assets/images/bg_edit_avatars.png'; static const String imagesBgInformation = 'assets/images/bg_information.png'; static const String imagesBtnBgIcon = 'assets/images/btn_bg_icon.png'; + static const String imagesCamera = 'assets/images/camera.png'; static const String imagesDiscoverNol = 'assets/images/discover_nol.png'; static const String imagesDiscoverPre = 'assets/images/discover_pre.png'; static const String imagesEditAvatarsIcon = 'assets/images/edit_avatars_icon.png'; @@ -31,6 +32,7 @@ class Assets { static const String imagesMore = 'assets/images/more.png'; static const String imagesMoreIcon = 'assets/images/more_icon.png'; static const String imagesOnlineIcon = 'assets/images/online_icon.png'; + static const String imagesPhoto = 'assets/images/photo.png'; static const String imagesPlayIcon = 'assets/images/play_icon.png'; static const String imagesSearch = 'assets/images/search.png'; static const String imagesSendMessageIcon = 'assets/images/send_message_icon.png'; diff --git a/lib/widget/message/chat_input_bar.dart b/lib/widget/message/chat_input_bar.dart index ec219eb..c3e69cc 100644 --- a/lib/widget/message/chat_input_bar.dart +++ b/lib/widget/message/chat_input_bar.dart @@ -16,6 +16,7 @@ class ChatInputBar extends StatefulWidget { class _ChatInputBarState extends State { final TextEditingController _textController = TextEditingController(); + bool _isMoreOptionsVisible = false; void _handleSendMessage() { if (_textController.text.isNotEmpty) { @@ -28,73 +29,161 @@ class _ChatInputBarState extends State { } } + // 切换更多选项的显示状态 + void _toggleMoreOptions() { + setState(() { + _isMoreOptionsVisible = !_isMoreOptionsVisible; + // 收起键盘 + FocusManager.instance.primaryFocus?.unfocus(); + }); + } + @override Widget build(BuildContext context) { - return Container( - padding: EdgeInsets.only(left: 16.w, right: 16.w, bottom: 16.w), - color: Colors.white, - child: Column( - children: [ - SizedBox(height: 10.h), - Row( + return Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + padding: EdgeInsets.only(left: 16.w, right: 16.w, bottom: 16.w), + color: Colors.white, + child: Column( children: [ - Expanded( - child: Container( - height: 40.h, - decoration: BoxDecoration( - color: Color(0xffF5F5F5), - borderRadius: BorderRadius.circular(5.h), - ), - padding: EdgeInsets.symmetric(horizontal: 16.w), - child: TextField( - controller: _textController, - decoration: InputDecoration( - border: InputBorder.none, - hintText: "请输入聊天内容~", - hintStyle: TextStyle(fontSize: 14.sp, color: Colors.grey), + SizedBox(height: 10.h), + Row( + children: [ + Expanded( + child: Container( + height: 40.h, + decoration: BoxDecoration( + color: Color(0xffF5F5F5), + borderRadius: BorderRadius.circular(5.h), + ), + padding: EdgeInsets.symmetric(horizontal: 16.w), + child: TextField( + controller: _textController, + decoration: InputDecoration( + border: InputBorder.none, + hintText: "请输入聊天内容~", + hintStyle: TextStyle(fontSize: 14.sp, color: Colors.grey), + ), + style: TextStyle(fontSize: 14.sp, color: Colors.black), + ), ), - style: TextStyle(fontSize: 14.sp, color: Colors.black), ), - ), + SizedBox(width: 12.w), + // 发送按钮 + Container( + padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h), + decoration: BoxDecoration( + color: Colors.blue, + borderRadius: BorderRadius.circular(5.h), + ), + child: Text( + "发送", + style: TextStyle( + fontSize: 14.sp, + color: Colors.white, + fontWeight: FontWeight.w500, + ), + ), + ).onTap(_handleSendMessage), + ], + ), + SizedBox(height: 12.h), + // 底部工具栏 + Row( + mainAxisAlignment: MainAxisAlignment.spaceAround, + children: [ + // 语音按钮 + Image.asset(Assets.imagesAudio, width: 24.w, height: 24.w), + // 视频按钮 + Image.asset(Assets.imagesVideo, width: 24.w, height: 24.w), + // 礼物按钮 + Image.asset(Assets.imagesGift, width: 24.w, height: 24.w), + // 表情按钮 + Image.asset(Assets.imagesEmoji, width: 24.w, height: 24.w), + // 更多按钮 + Image.asset(Assets.imagesAdd, width: 24.w, height: 24.w).onTap(_toggleMoreOptions), + ], ), - SizedBox(width: 12.w), - // 发送按钮 - Container( - padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h), - decoration: BoxDecoration( - color: Colors.blue, - borderRadius: BorderRadius.circular(5.h), - ), - child: Text( - "发送", - style: TextStyle( - fontSize: 14.sp, - color: Colors.white, - fontWeight: FontWeight.w500, - ), - ), - ).onTap(_handleSendMessage), - ], - ), - SizedBox(height: 12.h), - // 底部工具栏 - Row( - mainAxisAlignment: MainAxisAlignment.spaceAround, - children: [ - // 语音按钮 - Image.asset(Assets.imagesAudio, width: 24.w, height: 24.w), - // 视频按钮 - Image.asset(Assets.imagesVideo, width: 24.w, height: 24.w), - // 礼物按钮 - Image.asset(Assets.imagesGift, width: 24.w, height: 24.w), - // 表情按钮 - Image.asset(Assets.imagesEmoji, width: 24.w, height: 24.w), - // 更多按钮 - Image.asset(Assets.imagesAdd, width: 24.w, height: 24.w), ], ), - ], - ), + ), + // 更多选项展开视图 + _buildMoreOptionsView(), + ], + ); + } + + // 构建更多选项展开视图 + Widget _buildMoreOptionsView() { + return AnimatedContainer( + duration: Duration(milliseconds: 300), + height: _isMoreOptionsVisible ? 180.h : 0, + color: Colors.white, + child: _isMoreOptionsVisible + ? Container( + padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 20.h), + child: Column( + children: [ + SizedBox(height: 10.h), + // 第一行选项 + Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + // 图片选项 + Column( + children: [ + Container( + width: 60.w, + height: 60.w, + decoration: BoxDecoration( + color: Color(0xffF0F5FF), + borderRadius: BorderRadius.circular(8.w), + ), + padding: EdgeInsets.all(10.w), + child: Image.asset(Assets.imagesPhoto, width: 40.w, height: 40.w), + ), + SizedBox(height: 8.h), + Text( + "图片", + style: TextStyle( + fontSize: 12.sp, + color: Colors.black, + ), + ), + ], + ), + SizedBox(width: 40.w), + // 相机选项 + Column( + children: [ + Container( + width: 60.w, + height: 60.w, + decoration: BoxDecoration( + color: Color(0xffF0F5FF), + borderRadius: BorderRadius.circular(8.w), + ), + padding: EdgeInsets.all(10.w), + child: Image.asset(Assets.imagesCamera, width: 40.w, height: 40.w), + ), + SizedBox(height: 8.h), + Text( + "相机", + style: TextStyle( + fontSize: 12.sp, + color: Colors.black, + ), + ), + ], + ), + ], + ), + ], + ), + ) + : null, ); } }