上一篇: Flutter 实现钉钉消息列表效果(二)

依赖
  1. flutter_slidable: ^0.5.5 # 包裹 ListView Item 实现可以左右滑动的扩展操作

实现效果如图

Flutter 实现钉钉消息列表效果(三) - 图1

修改整体的 DTMessageScreen 布局
  • 使用 SingleChildScrollView + Column
  1. @override
  2.   Widget build(BuildContext context) {
  3.     return Scaffold(
  4.       backgroundColor: Colors.white,
  5.       appBar: buildAppBar(context),
  6.       body: SingleChildScrollView(
  7.           controller: _scrollController,
  8.           child: Column(
  9.               children: <Widget>[
  10.                   DTMessageSearchDecoration(),
  11.                   DTMessageTopQuick(),
  12.                   DTMessageTopMask(),
  13.                   DTMessageListView(),
  14.               ],
  15.           ),
  16.       )
  17.     );
  18.   }

实现一个 DTMessageListView 消息列表
  • ListView.builder 来构建出 ListView
  • 视图显示根据数据模型来显示不同的 Item
  • 创建 DTMessageModel 数据模型

  • 第三方 Slidable 添加扩展操作 (删除、取消置顶)

    • ListView 设置

      • shrinkWrap: true 适应父容器
      • physics: NeverScrollableScrollPhysics() ，禁止 ListView 自身的滚动效果，使用父组件的滚动，因为父组件是 SingleChildScrollView
  1. @override
  2.   Widget build(BuildContext context) {
  3.     return ListView.builder(
  4.       itemCount: _messageList.length,
  5.       itemBuilder: (BuildContext context, int index) {
  6.         DTMessageModel model = _messageList[index];
  7.         return Slidable(
  8.           actionPane: SlidableDrawerActionPane(),
  9.           actionExtentRatio: 0.25,
  10.           secondaryActions: <Widget>[
  11.             IconSlideAction(
  12.               caption: '取消置顶',
  13.               color: Colors.black45,
  14.               icon: Icons.more_horiz,
  15.               onTap: () => _showSnackBar('More'),
  16.             ),
  17.             IconSlideAction(
  18.               caption: '删除',
  19.               color: Colors.redAccent,
  20.               icon: Icons.delete,
  21.               onTap: () => _showSnackBar('Delete'),
  22.             ),
  23.           ],
  24.           child: Padding(
  25.             padding:
  26.             EdgeInsets.only(left: kSize36, bottom: kSize20, top: kSize20),
  27.             child: Row(
  28.               crossAxisAlignment: CrossAxisAlignment.start,
  29.               children: <Widget>[
  30.                 Expanded(child: DTMessageItem(messageModel: model)),
  31.                 model.isStick
  32.                     ? Container(
  33.                   width: kSize48,
  34.                   height: kSize48,
  35.                   margin: EdgeInsets.only(top: kSize10, right: kSize10),
  36.                   child:
  37.                   SvgPicture.asset('assets/icons/icon_triangle.svg'),
  38.                 )
  39.                     : Padding(
  40.                   padding: EdgeInsets.symmetric(horizontal: kSize24),
  41.                 )
  42.               ],
  43.             ),
  44.           ),
  45.         );
  46.       },
  47.       shrinkWrap: true,
  48.       physics: NeverScrollableScrollPhysics(),
  49.     );
  50.   }

构建数据模型
  1. enum DTMessageType { text, image, file, location, video, voice }
  3. class DTMessageModel {
  4.   DTMessageModel({@required this.chatId,
  5.     @required this.userId,
  6.     @required this.userName,
  7.     @required this.chatName,
  8.     @required this.message,
  9.     this.messageType = DTMessageType.text,
  10.     this.time,
  11.     this.unReadCount = 0,
  12.     this.isSingle = false,
  13.     this.avatar,
  14.     this.isGroup = false,
  15.     this.groupAvatars,
  16.     this.isDisturbing = false,
  17.     this.isSpecialAttention = false,
  18.     this.isAtYou = false,
  19.     this.isAtAll = false,
  20.     this.isStick = false});
  22.   /// 聊天 Id
  23.   String chatId;
  25.   /// 用户名称
  26.   String userName;
  28.   /// 用户Id
  29.   String userId;
  31.   /// 聊天名称
  32.   String chatName;
  34.   /// 消息体
  35.   String message;
  37.   /// message type
  38.   DTMessageType messageType;
  40.   /// 时间
  41.   int time;
  43.   /// 未读数量
  44.   int unReadCount;
  46.   /// 单聊
  47.   bool isSingle;
  48.   String avatar;
  50.   /// 群聊信息
  51.   bool isGroup;
  52.   List<String> groupAvatars;
  54.   /// 消息免打扰
  55.   bool isDisturbing;
  57.   /// 是否为置顶
  58.   bool isStick;
  60.   /// 特别关注
  61.   bool isSpecialAttention;
  63.   /// 是否 @ 你
  64.   bool isAtYou;
  66.   /// 是否 @ 全部
  67.   bool isAtAll;
  68. }

创建 DTMessageItem 视图

  • 根据数据模型数据来显示

    1. class DTMessageItem extends StatelessWidget {
    2. final DTMessageModel messageModel;
    4. DTMessageItem({@required this.messageModel});
    6. @override
    7. Widget build(BuildContext context) {
    8.   return Row(
    9.     mainAxisAlignment: MainAxisAlignment.spaceBetween,
    10.     children: <Widget>[
    11.       DTMessageAvatar(messageModel: messageModel),
    12.       Expanded(
    13.         child: Column(
    14.           children: <Widget>[
    15.             Padding(
    16.               padding: EdgeInsets.symmetric(vertical: kSize8),
    17.               child: Row(
    18.                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
    19.                 children: <Widget>[
    20.                   Expanded(
    21.                     child: Text(
    22.                       messageModel?.chatName ?? "",
    23.                       style: TextStyle(color: kColor33, fontSize: kSize34),
    24.                       overflow: TextOverflow.ellipsis,
    25.                     ),
    26.                   ),
    27.                   Text(
    28.                     _formatDate(),
    29.                     style: TextStyle(color: kColor99, fontSize: kSize26),
    30.                     overflow: TextOverflow.ellipsis,
    31.                   ),
    32.                 ],
    33.               ),
    34.             ),
    35.             Row(
    36.               mainAxisAlignment: MainAxisAlignment.spaceBetween,
    37.               children: <Widget>[
    38.                 Expanded(
    39.                   child: RichText(
    40.                     text: TextSpan(children: [
    41.                       TextSpan(
    42.                         text: messageModel.isAtYou ? "[@你]" : "",
    43.                         style:
    44.                         TextStyle(color: kColorF1A33A, fontSize: kSize28),
    45.                       ),
    46.                       TextSpan(
    47.                         text: messageModel.isSpecialAttention ? "[特别关注]" : "",
    48.                         style:
    49.                         TextStyle(color: kColorF1A33A, fontSize: kSize28),
    50.                       ),
    51.                       TextSpan(
    52.                         text: messageModel.isAtAll ? "[@所有人]" : "",
    53.                         style:
    54.                         TextStyle(color: kColorF1A33A, fontSize: kSize28),
    55.                       ),
    56.                       TextSpan(
    57.                         text: messageModel?.message ?? "",
    58.                         style: TextStyle(color: kColor99, fontSize: kSize28),
    59.                       )
    60.                     ]),
    61.                     overflow: TextOverflow.ellipsis,
    62.                   ),
    63.                 ),
    64.                 (messageModel.unReadCount != null &&
    65.                     messageModel.unReadCount > 0 &&
    66.                     !messageModel.isDisturbing)
    67.                     ? Container(
    68.                     width: kSize32,
    69.                     height: kSize32,
    70.                     alignment: Alignment.center,
    71.                     decoration: BoxDecoration(
    72.                         color: kColorE86A3E,
    73.                         borderRadius: BorderRadius.circular(kSize20)),
    74.                     child: Text(
    75.                       messageModel.unReadCount.toString(),
    76.                       style: TextStyle(
    77.                           color: Colors.white, fontSize: kSize26),
    78.                     ))
    79.                     : Container(),
    80.                 messageModel.isDisturbing
    81.                     ? Row(
    82.                   children: <Widget>[
    83.                     SvgPicture.asset(
    84.                       'assets/icons/icon_disturbing.svg',
    85.                       width: kSize36,
    86.                       color: kColorECEDED,
    87.                     ),
    88.                     messageModel.unReadCount != null &&
    89.                         messageModel.unReadCount > 0
    90.                         ? SvgPicture.asset(
    91.                       'assets/icons/icon_red_dot.svg',
    92.                       width: kSize36,
    93.                     )
    94.                         : Container()
    95.                   ],
    96.                 )
    97.                     : Container()
    98.               ],
    99.             )
    100.           ],
    101.         ),
    102.       )
    103.     ],
    104.   );
    105. }
    107. String _formatDate() {
    108.   DateTime dateTime =
    109.   DateTime.fromMillisecondsSinceEpoch(messageModel?.time ?? 0);
    110.   return formatDate(dateTime, [HH, ':', nn]) ?? "";
    111. }
    112. }

  • 构建头像

    • 区分个人头像还是群组头像
    • 群组头像使用 NineGridView 组件来显示 ```dart class DTMessageAvatar extends StatelessWidget { final DTMessageModel messageModel;

    DTMessageAvatar({this.messageModel});

    @override Widget build(BuildContext context) { return messageModel.isSingle ? _buildSingleAvatar() : _buildGroupAvatar(); }

    Widget _buildSingleAvatar() { return Container(

    1. margin: EdgeInsets.only(right: kSize24),
    2. child: (messageModel.isSingle && messageModel.chatName != null)
    3.     ? CircleAvatar(
    4.   radius: kSize50,
    5.   child: Text(
    6.     _getChatName(),
    7.     style: TextStyle(color: Colors.white, fontSize: kSize32),
    8.   ),
    9.   backgroundColor: kPrimaryColor,
    10. )
    11.     : Image.asset('assets/images/track_icon_attend.png',
    12.     fit: BoxFit.cover),

    ); }

    String _getChatName() { String chatName = messageModel.chatName; if (chatName == null || chatName.isEmpty) {

    1. return "(^_^)";

    }

    chatName = chatName.replaceAll(‘\（’, “”).replaceAll(‘\）’, “”);

    /// RegExp regExp = RegExp(r’\（｜\）’); /// chatName = chatName.replaceAll(regExp, “”); /// print(chatName);

    if (chatName.length == 2) {

    1. return chatName;

    }

    if (chatName.length > 2) {

    1. return chatName.substring(chatName.length - 2, chatName.length);

    } return “”; }

    Widget _buildGroupAvatar() { List groupAvatars = messageModel.groupAvatars; if (groupAvatars.length >= 4) {

    1. groupAvatars = groupAvatars.sublist(0, 4);

    } return NineGridView(

    1. width: kSize100,
    2. height: kSize100,
    3. type: NineGridType.dingTalkGp,
    4. itemCount: groupAvatars.length,
    5. space: kSizeDot5,
    6. margin: EdgeInsets.only(right: kSize24),
    7. itemBuilder: (BuildContext context, int index) {
    8.   String userName = groupAvatars[index];
    9.   return Container(
    10.     color: kPrimaryColor,
    11.     /// TODO: position ???
    12.     alignment: Alignment.center,
    13.     child: Container(
    14.       margin: EdgeInsets.symmetric(horizontal: kSize6),
    15.       child: Text(
    16.         userName.length >= 2 ? userName.substring(1, 2) : userName,
    17.         style: TextStyle(color: Colors.white),
    18.       ),
    19.     ),
    20.   );
    21. },

    ); } } ```

代码地址： https://gitee.com/shizidada/flutter_dingtalk/blob/master/lib/ui/screens/message/message_screen.dart

列表 Mock 数据: https://gitee.com/shizidada/flutter_dingtalk/blob/master/lib/mock/mock_message.dart