第七章：Flutter之wechatDemo（通讯录页面上）

前言：上节课为大家介绍了‘我的页面’的简单构造。本节将为大家搭建简单的‘通讯录页面’

先上效果图：

25.png

1.添加右上角‘添加’朋友按钮

这次我们不需要隐藏NavBar，我们直接在bar上面添加按钮,并且添加点击事件

appBar: AppBar(
        title: Text('通讯录'),
        backgroundColor: wechatThemeColor,
        actions: [
          GestureDetector(
            onTap: (){
              Navigator.of(context).push(MaterialPageRoute(builder: (context) => DiscoverChildPage(headTitle: '添加朋友',)));
            },
            child: Container(
              padding: EdgeInsets.only(right: 10),
              child: Image.asset('images/添加朋友.png',width: 25,),
            ),
          )
        ],
      ),

2.创建FriendsModel

class Friends{
  final String  imageUrl;//网络图片url
  final String locationImageUrl;//本地图标路径
  final String name;//名字
  final String indexChar;//分组的字母（暂定.....预留）

  //构造函数
  Friends({
    this.imageUrl,this.locationImageUrl, this.name, this.indexChar,
  });
}

3.创建通讯录cell

class FriendsCell extends StatelessWidget {
  final String locationImageUrl;//网络图片
  final String imageUrl;//本地图片
  final String name;//名称
  //构造函数
  FriendsCell({
    this.imageUrl,this.locationImageUrl, this.name,
  });
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60,
      color: Colors.white,
      child: Column(
        children: [
          Container(
            height: 59.5,
            child: Row(
              children: [
                Container(
                  margin: EdgeInsets.only(left: 10),
                  width: 40,
                  height: 40,
                  child: (imageUrl != null) ? NetworkImage(imageUrl) : Image.asset(locationImageUrl,width: 30,height: 30,),
                ),
                Container(
                  margin: EdgeInsets.only(left: 10),
                  child: Text(name,style: TextStyle(fontSize: 16,color: Colors.black),),
                ),],),),
          //分割线
          Container( height: 0.5,color: Color.fromRGBO(220, 220, 220, 1), child: Row(children: [Container(width: 50,color: Colors.white,),],),),
        ],
      ));}
}

4.为page创建data数组

头部数组 + 通讯录数组

class _State extends State<FriendsPage> {
  final List<Friends> _headDatas = [
    Friends(locationImageUrl: 'images/新的朋友.png',name: '新的朋友'),
    Friends(locationImageUrl: 'images/群聊.png',name: '群聊'),
    Friends(locationImageUrl: 'images/标签.png',name: '标签'),
    Friends(locationImageUrl: 'images/公众号.png',name: '公众号'),
  ];
  final List<Friends> _friendsDatas = [
    Friends(locationImageUrl: 'images/ice.png',name: '张三'),
    Friends(locationImageUrl: 'images/ice.png',name: '李四'),
    Friends(locationImageUrl: 'images/ice.png',name: '王二'),
    Friends(locationImageUrl: 'images/ice.png',name: '麻子'),
  ];
  Widget _cellForRow(BuildContext context , int index){
    if(index < _headDatas.length){
      return FriendsCell(locationImageUrl: _headDatas[index].locationImageUrl,name: _headDatas[index].name,);
    }else{
      return FriendsCell(locationImageUrl: _friendsDatas[index-_headDatas.length].locationImageUrl,name: _friendsDatas[index-_headDatas.length].name,);
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('通讯录'),
        backgroundColor: wechatThemeColor,
        actions: [
          GestureDetector(
            onTap: (){
              Navigator.of(context).push(MaterialPageRoute(builder: (context) => DiscoverChildPage(headTitle: '添加朋友',)));
            },
            child: Container(
              padding: EdgeInsets.only(right: 10),
              child: Image.asset('images/添加朋友.png',width: 25,),
            ),
          )
        ],
      ),
      body:ListView.builder(itemBuilder: _cellForRow,itemCount: _headDatas.length + _friendsDatas.length,),
    );
  }
}

run

25.png

注意：！！！朋友的datas，我们不应该放在State里面，而是应该拿出来，因为这些数据都是后面要用网络请求获取到的，不宜放在state里面，这里楼主偷懒了😜

总结：熟练掌握listView复用的cell功能。完结✿✿ヽ(°▽°)ノ✿