修改好友列表页

lib/contact_data_page.dart

@@ -17,6 +17,7 @@ class ContactDataPage {
 
 List<ContactDataPage> contactData = [
   new ContactDataPage(seationKey: 'A',name: 'A张三',avatarUrl: 'http://blogimages.jspang.com/blogtouxiang1.jpg'),
+  new ContactDataPage(seationKey: 'A',name: 'A李四',avatarUrl: 'http://blogimages.jspang.com/blogtouxiang1.jpg'),
   new ContactDataPage(seationKey: 'B',name: 'B张三',avatarUrl: 'http://blogimages.jspang.com/blogtouxiang1.jpg'),
   new ContactDataPage(seationKey: 'C',name: 'C张三',avatarUrl: 'http://blogimages.jspang.com/blogtouxiang1.jpg'),
   new ContactDataPage(seationKey: 'D',name: 'D张三',avatarUrl: 'http://blogimages.jspang.com/blogtouxiang1.jpg'),

lib/contact_header_page.dart

@@ -9,10 +9,10 @@ class ContactHeaderPage extends StatelessWidget {
   Widget build(BuildContext context) {
     return Column(
       children: <Widget>[
-        ContactItemPage(titleName: '新的朋友',imageName: '',),
-        ContactItemPage(titleName: '群聊',imageName: '',),
-        ContactItemPage(titleName: '标签',imageName: '',),
-        ContactItemPage(titleName: '公众号',imageName: '',)
+        ContactItemPage(titleName: '新的朋友',imageName: 'assets/images/ic_new_friend.png',),
+        ContactItemPage(titleName: '群聊',imageName: 'assets/images/ic_group.png',),
+        ContactItemPage(titleName: '标签',imageName: 'assets/images/ic_label.png',),
+        ContactItemPage(titleName: '公众号',imageName: 'assets/images/ic_tencent.png',)
       ],
     );
   }

lib/contact_item_page.dart

@@ -38,18 +38,21 @@ class ContactItemPage extends StatelessWidget {
           crossAxisAlignment: CrossAxisAlignment.center,
           children: <Widget>[
             //展示图像或者图片
-            //imageName !=null ? Image.network( item.avatarUrl):Image.asset(''),
-            Image.network('http://blogimages.jspang.com/blogtouxiang1.jpg'),
+            imageName ==null ? Image.network( item.avatarUrl != '' ? item.avatarUrl : 'http://blogimages.jspang.com/blogtouxiang1.jpg',width: 25.0,height: 25.0,scale: 0.9, ): Image.asset(imageName,width: 25.0,height: 25.0,),
+            //Image.network('http://blogimages.jspang.com/blogtouxiang1.jpg'),
+            SizedBox(width: 20),
+
             //展示名称或标题
             Container(
               margin: const EdgeInsets.only(left: 12.0),
               child: Text(
-                //titleName == null ? titleName:"暂时",
-                "海阔天空",
+                titleName == null ? item.name ?? '暂时':titleName,
+                //'海阔天空',
                 style: TextStyle(
-                  fontSize: 18.0,
-                  color: Color(0xFF353535)
+                  fontSize: 16.0,
+                  color: Color(0xFF353535),
                 ),
+                maxLines: 1,
               ),
             )
           ],

lib/contact_list_page.dart

@@ -75,7 +75,7 @@ class _ContactListPageState extends State<ContactListPage> {
           return Container(
             color: Colors.white,
             alignment: Alignment.centerLeft,
-            child: ContactItemPage(),
+            child: ContactItemPage(item: contactData[index],),
           );
         },
         //字母构造器

lib/contact_sider_list_page.dart

@@ -38,22 +38,24 @@ class _ContactSiderListPageState extends State<ContactSiderListPage> {
   }
 
   //判断并显示头部视图,或者容器
-  _isShowHeaderView(index){
-    if(index == 0 && widget.headerBuilder !=null){
+  _isShowHeaderView(index) {
+    if (index == 0 && widget.headerBuilder != null) {
       return Offstage(
         offstage: false,
-        child: widget.headerBuilder(context,index),
+        child: widget.headerBuilder(context, index),
       );
     }
+    return Container();
   }
 
-
   //根据定位判断是否显示好友列表头
-  bool _shouldShowHeader(int position){
-    if(position<= 0 ){
+  bool _shouldShowHeader(int position) {
+    if (position <= 0) {
       return false;
     }
-    if(position != 0 && widget.items[position].seationKey !=widget.items[position-1].seationKey){
+    if (position != 0 &&
+        widget.items[position].seationKey !=
+            widget.items[position - 1].seationKey) {
       return false;
     }
     return true;
@@ -61,9 +63,6 @@ class _ContactSiderListPageState extends State<ContactSiderListPage> {
 
   @override
   Widget build(BuildContext context) {
-
-
-
     return Scaffold(
       body: Stack(
         children: <Widget>[
@@ -72,12 +71,12 @@ class _ContactSiderListPageState extends State<ContactSiderListPage> {
             onNotification: _onNotification,
             child: ListView.builder(
               //滚动控制器
-              controller:  _scrollController,
+              controller: _scrollController,
               //列表里的内容不足一屏幕时也可以滑动
               physics: const AlwaysScrollableScrollPhysics(),
               //列表长度
-              itemCount:  widget.items.length,
-              itemBuilder: (BuildContext context,int index){
+              itemCount: widget.items.length,
+              itemBuilder: (BuildContext context, int index) {
                 //列表项容器
                 return Container(
                   alignment: Alignment.centerLeft,
@@ -88,13 +87,11 @@ class _ContactSiderListPageState extends State<ContactSiderListPage> {
                       //用offstage 组件控制是否显示英文字母
                       Offstage(
                         offstage: _shouldShowHeader(index),
-                        child: widget.sectionBuilder(context,index),
+                        child: widget.sectionBuilder(context, index),
                       ),
                       //显示列表项
                       Column(
-                        children: <Widget>[
-                          widget.itemBuilder(context,index)
-                        ],
+                        children: <Widget>[widget.itemBuilder(context, index)],
                       )
                     ],
                   ),

pubspec.yaml

@@ -64,6 +64,10 @@ flutter:
     - assets/images/ic_friends_add.png
     - assets/images/ic_applet.png
     - assets/images/ic_default_avatar.png
+    - assets/images/ic_tencent.png
+    - assets/images/ic_new_friend.png
+    - assets/images/ic_label.png
+    - assets/images/ic_group.png
     - assets/images/icon_right.png
 
   fonts: