【Flutter】微信项目实战【05】 通讯录界面搭建(上)

「这是我参与11月更文应战的第11天，活动详情查看：2021最后一次更文应战」

【Flutter】学习养成记，【程序员必备技能】

【Flutter】微信项目实战！

1. 写在前面

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

• 【根底语法合集】

【Flutter】Dart中的var、final 和 const基本使用

【Flutter】Dart数据类型之num

【Flutter】Dart数据类型之String

【Flutter】Dart的数据类型list&Map(数组和字典)

【Flutter】Dart的办法与箭头函数

【Flutter】Dart的办法中的可选参数、办法作为参数传递

【Flutter】Dart中的匿名函数、闭包

【Flutter】Dart中的类和目标

【Flutter】Dart中的结构函数

【Flutter】Dart的工厂结构办法&单例目标&初始化列表

【Flutter】Dart的类办法和目标操作符

【Flutter】Dart中的继承

【Flutter】Dart中的抽象类和接口

【Flutter】Dart中的Mixins混入你知道是什么吗？

• [根底组件合集]

【Flutter】根底组件【01】Text

【Flutter】根底组件【02】Container

【Flutter】根底组件【03】Scaffold

【Flutter】根底组件【04】Row/Column

【Flutter】根底组件【05】Image

【Flutter】根底组件【06】Icon

【Flutter】根底组件【07】Appbar

【Flutter】根底组件【08】BottomNavigationBar

【Flutter】根底组件【09】Button

• [项目实战合集]

【Flutter】微信项目实战【01】基本框架建立

【Flutter】微信项目实战【02】我的界面建立(上)

【Flutter】微信项目实战【03】我的界面建立(下)

【Flutter】微信项目实战【04】发现界面建立

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代码

@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!);
  }

• 列表头部

• 作用如下：

3. 写在后面

重视我，更多内容继续输出

• CSDN
• 简书

喜欢就点个赞吧

觉得有收获的，能够来一波 保藏+重视，避免你下次找不到我

欢迎大家留言交流，批评指正，转发请注明出处，谢谢支持！