TIMUIKitContact-Implementation

Introduction

The list of the contacts or friends.

Parameter details

Code examples

emptyBuilder

EmptyBuilder determines the style of the friends list page when the user's friends list is empty..

The following example code shows to use emptyBuilder to show page styles that have no friends yet.

/// @title:"EmptyBuilder determines the style of the friends list page when the user's friends list is empty.."
/// @title:"The following example code shows to use emptyBuilder to  show page styles that have no friends yet."
/// @picture:"https://qcloudimg.tencent-cloud.cn/raw/96b0f12b6d4f38e1f836a032d7d92675.png"
@override
Widget build(BuildContext context) {
  return TIMUIKitContact(
    emptyBuilder: (context) => Center(
      child: Text("No contacts"),
    ),
  );
}

isShowOnlineStatus

IsShowOnlineStatus is the setting of whether to display the online status of friends in the friends list.

The following example code shows to use isShowOnlineStatus to display the online status of friends in the friends list..

/// @title:"IsShowOnlineStatus is the setting of whether to display the online status of friends in the friends list."
/// @title:"The following example code shows to use isShowOnlineStatus to  display the online status of friends in the friends list.."
/// @picture:"https://qcloudimg.tencent-cloud.cn/raw/90d68c06e2035997438a8c36149c82d2.png"
@override
Widget build(BuildContext context) {
  return TIMUIKitContact(
    isShowOnlineStatus: true,
    onTapItem: (item) {
      Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => UserProfile(userID: item.userID),
          ));
    },
    emptyBuilder: (context) => Center(
      child: Text("No contacts"),
    ),
  );
}

lifeCycle

LifeCycle is the hook function triggered when the friend list is operated.

The following example code shows to use friendListWillMount to add a robot to the friends list..

/// @title:"LifeCycle is the hook function triggered when the friend list is operated."
/// @title:"The following example code shows to use friendListWillMount to add a robot to the friends list.."
/// @picture:"https://qcloudimg.tencent-cloud.cn/raw/b28ec6c5078d527bcf4926598235ed29.png"
@override
Widget build(BuildContext context) {
  final LocalSetting localSetting = Provider.of<LocalSetting>(context);
  FriendListLifeCycle lifeCycle = FriendListLifeCycle(
    friendListWillMount: (List<V2TimFriendInfo> friendList) async {
      V2TimFriendInfo robot = V2TimFriendInfo(userID: 'robot');
      friendList.insertAll(0, [robot]);
      return friendList;
    },
  );
  return TIMUIKitContact(
    lifeCycle: lifeCycle,
    isShowOnlineStatus: localSetting.isShowOnlineStatus,
    onTapItem: (item) {
      Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => UserProfile(userID: item.userID),
          ));
    },
    emptyBuilder: (context) => Center(
      child: Text("No contacts"),
    ),
  );
}

onTapItem

OnTapItem is the function triggered when the user module is clicked..

The following example code shows to use onTapItem to enter the friend information page when clicking the friend module..

/// @title:"OnTapItem is the function triggered when the user module is clicked.."
/// @title:"The following example code shows to use onTapItem to enter the friend information page when clicking the friend module.."
/// @picture:"https://tuikit-1251787278.cos.ap-guangzhou.myqcloud.com/onTapItem.gif"
@override
Widget build(BuildContext context) {
  final LocalSetting localSetting = Provider.of<LocalSetting>(context);
  return TIMUIKitContact(
    isShowOnlineStatus: localSetting.isShowOnlineStatus,
    onTapItem: (item) {
      Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => UserProfile(userID: item.userID),
          ));
    },
    emptyBuilder: (context) => Center(
      child: Text("No contacts"),
    ),
  );
}

topListAndtopListItemBuilder

The topList determines the attributes and order of the modules on the top function bar of the friends list.

The following example code shows to use topList and topListItemBuilder to display new contacts, group lists, and blacklists on the top of the friends list page..

/// @title:"The topList determines the attributes and order of the modules on the top function bar of the friends list."
/// @title:"The following example code shows to use topList and topListItemBuilder to display new contacts, group lists, and blacklists on the top of the friends list page.."
/// @picture:"https://qcloudimg.tencent-cloud.cn/raw/360abe95641f9aa1d848f7bd47666dfe.png"
@override
Widget build(BuildContext context) {
  final LocalSetting localSetting = Provider.of<LocalSetting>(context);
  _topListItemTap(String id) {
    switch (id) {
      case "newContact":
        Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const NewContact(),
            ));
        break;
      case "groupList":
        Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => GroupList(),
            ));
        break;
      case "blackList":
        Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const BlackList(),
            ));
    }
  }

  String _getImagePathByID(String id) {
    final themeTypeSubfix = Provider.of<DefaultThemeData>(context)
        .currentThemeType
        .toString()
        .replaceFirst('ThemeType.', '');
    switch (id) {
      case "newContact":
        return "assets/newContact_$themeTypeSubfix.png";
      case "groupList":
        return "assets/groupList_$themeTypeSubfix.png";
      case "blackList":
        return "assets/blackList_$themeTypeSubfix.png";
      default:
        return "";
    }
  }

  Widget? _topListBuilder(TopListItem item) {
    final showName = item.name;
    return InkWell(
      onTap: () {
        _topListItemTap(item.id);
      },
      child: Container(
        padding: const EdgeInsets.only(top: 10, left: 16),
        child: Row(
          children: [
            Container(
              height: 40,
              width: 40,
              margin: const EdgeInsets.only(right: 12),
              child: Avatar(
                faceUrl: _getImagePathByID(item.id),
                showName: showName,
                isFromLocal: true,
              ),
            ),
            Expanded(
                child: Container(
              padding: const EdgeInsets.only(top: 10, bottom: 19),
              decoration: BoxDecoration(
                  border:
                      Border(bottom: BorderSide(color: hexToColor("DBDBDB")))),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    showName,
                    style: TextStyle(color: hexToColor("111111"), fontSize: 18),
                  ),
                  Expanded(child: Container()),
                  const TIMUIKitUnreadCount(),
                  Container(
                    margin: const EdgeInsets.only(right: 16),
                    child: Icon(
                      Icons.keyboard_arrow_right,
                      color: hexToColor('BBBBBB'),
                    ),
                  )
                ],
              ),
            ))
          ],
        ),
      ),
    );
  }

  return TIMUIKitContact(
    isShowOnlineStatus: localSetting.isShowOnlineStatus,
    topList: [
      TopListItem(
        name: "New contacts",
        id: "newContact",
        icon: Image.asset(_getImagePathByID("newContact")),
      ),
      TopListItem(
        name: "My groups",
        id: "groupList",
        icon: Image.asset(_getImagePathByID("groupList")),
      ),
      TopListItem(
        name: "blacklist",
        id: "blackList",
        icon: Image.asset(_getImagePathByID("blackList")),
      )
    ],
    topListItemBuilder: _topListBuilder,
    onTapItem: (item) {
      Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => UserProfile(userID: item.userID),
          ));
    },
    emptyBuilder: (context) => Center(
      child: Text("No contacts"),
    ),
  );
}