[移动开发] 【Flutter】微信项目实战【05】通讯录界面搭建(上)

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 【Flutter】微信项目实战【05】通讯录界面搭建(上) -> 正文阅读

[移动开发]【Flutter】微信项目实战【05】通讯录界面搭建(上)

1. 写在前面

在上篇文章中已经对微信发现界面进行了界面的布局搭建代码实现，那么今天就继续来写微信实战项目的通讯录界面！

GitHub项目地址

通讯录最终效果

2. 通讯录

2.1 导航栏

先来设置一下导航栏，导航栏右边是一个可以点击的按钮，点击跳转。

appBar: AppBar(
        elevation: 0.0, //导航栏底部边栏，这样设置就没有底部的黑线了
        backgroundColor: GlobalThemeColor,
        title: const Text('通讯录',style: TextStyle(color: Colors.black),),
        actions:  [
          //手势
          GestureDetector(
            //点击回调方法
            onTap: (){
            //跳转页面
              Navigator.of(context).push(
                  MaterialPageRoute(builder: (BuildContext context)=>DiscoverChildPage(title: "添加好友",))
              );
            },
            child: Container(
              margin:const EdgeInsets.only(right: 10),
              child:const Image(image: AssetImage("images/icon_friends_add.png"),width: 25,),
            ),
          )
        ],
      )

在导航栏上面是一个actions可以添加多个按钮，这是一个数组。
Navigator.of(context).push: 跳转页面方法，可以直接写需要跳转到哪个页面去。

2.2 通讯录头部

我们先来实现一下通讯录的头部，头部的 cell 和列表的 cell 是可以公用的。

通讯录的页面大致可以分为三大部分：

头部部分
列表部分
索引条部分

通讯录页面

自定义 cell

class _FriendCell extends StatelessWidget {
  final String? imageUrl;//图片 URL
  final String? name;//昵称
  final String? groupTitle;//组头标题
  final String? imageAssets;//本地图片地址
  
  //cell 的构造方法
  const _FriendCell({this.imageUrl,this.name,this.groupTitle,this.imageAssets});

@override
  Widget build(BuildContext context) {
//具体代码写这里
}
  
}

cell 的布局分析

cell 包括图片、文字，组的 cell 只有文字；cell 的左边是头像，右边是昵称，可以采用 Row 来左右布局。为了达到复用的效果，可以采用上下布局，上面是组头，下面是 cell。通过判断是否显示组头。

代码布局

cell 代码布局

cell代码

@override
  Widget build(BuildContext context) {

    return Column(
      children: [
        Container(
          alignment:Alignment.centerLeft,
          padding: const EdgeInsets.only(left: 10),
          height: groupTitle!=null?30:0,
          color: GlobalThemeColor,
          child: groupTitle!=null?Text(groupTitle!,style: const TextStyle(color: Colors.grey),):null,
        ),
        Container(
          color: Colors.white,
          child: Row(
              children:[
                Container(
                    margin: const EdgeInsets.all(10),
                    width: 34,
                    height: 34,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(6.0),
                        image: DecorationImage(
                          image:getImage(),
                        )
                    )
                ),//图片
                // ignore: avoid_unnecessary_containers
                Container(
                    width: screenWidth(context)-54,
                    child: Column(
                      children: [
                        Container(
                          alignment:Alignment.centerLeft,
                          height: 53.5,
                          child:Text(
                            name!,
                            style: const TextStyle(fontSize: 18,color: Colors.black),
                          ),
                        ),
                        Container(
                          height: 0.5,
                          color: GlobalThemeColor,
                        ),//下划线
                      ],
                    )

                ),//昵称

              ]
          ),
        ),
      ],
    );
  }

  ImageProvider  getImage(){
    if(imageUrl == null){
      return AssetImage(imageAssets!);
    }
    return NetworkImage(imageUrl!);
  }