From 468bead526d1e4e7a81811efef543901f414638b Mon Sep 17 00:00:00 2001 From: zhangmeng1334717033 Date: Mon, 8 Jun 2020 18:23:58 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=A5=BD=E5=8F=8B=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/contact_data_page.dart | 26 ++++++++ lib/contact_header_page.dart | 19 ++++++ lib/contact_item_page.dart | 60 +++++++++++++++++ lib/contact_list_page.dart | 101 ++++++++++++++++++++++++++++ lib/contact_sider_list_page.dart | 109 +++++++++++++++++++++++++++++++ 5 files changed, 315 insertions(+) create mode 100644 lib/contact_data_page.dart create mode 100644 lib/contact_header_page.dart create mode 100644 lib/contact_item_page.dart create mode 100644 lib/contact_list_page.dart create mode 100644 lib/contact_sider_list_page.dart diff --git a/lib/contact_data_page.dart b/lib/contact_data_page.dart new file mode 100644 index 0000000..af23ca4 --- /dev/null +++ b/lib/contact_data_page.dart @@ -0,0 +1,26 @@ +import 'package:flutter/material.dart'; + +//好友列表数据 + +class ContactDataPage { + //字母排列值 + String seationKey; + + //名称 + String name; + + //头像 + String avatarUrl; + + ContactDataPage({@required this.seationKey, this.name, this.avatarUrl}); +} + +List contactData = [ + 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'), + new ContactDataPage(seationKey: 'E',name: 'E张三',avatarUrl: 'http://blogimages.jspang.com/blogtouxiang1.jpg'), + new ContactDataPage(seationKey: 'F',name: 'F张三',avatarUrl: 'http://blogimages.jspang.com/blogtouxiang1.jpg'), + new ContactDataPage(seationKey: 'G',name: 'G张三',avatarUrl: 'http://blogimages.jspang.com/blogtouxiang1.jpg'), +]; diff --git a/lib/contact_header_page.dart b/lib/contact_header_page.dart new file mode 100644 index 0000000..8c37b1b --- /dev/null +++ b/lib/contact_header_page.dart @@ -0,0 +1,19 @@ +import 'package:flutter/material.dart'; +import 'package:chatting/contact_item_page.dart'; + +//好友列表的头部内容 +class ContactHeaderPage extends StatelessWidget { + Color WechatThemeColor = Colors.white; + + @override + Widget build(BuildContext context) { + return Column( + children: [ + ContactItemPage(titleName: '新的朋友',imageName: '',), + ContactItemPage(titleName: '群聊',imageName: '',), + ContactItemPage(titleName: '标签',imageName: '',), + ContactItemPage(titleName: '公众号',imageName: '',) + ], + ); + } +} diff --git a/lib/contact_item_page.dart b/lib/contact_item_page.dart new file mode 100644 index 0000000..7f8e3e4 --- /dev/null +++ b/lib/contact_item_page.dart @@ -0,0 +1,60 @@ +import 'package:chatting/contact_data_page.dart'; +import 'package:flutter/material.dart'; +import 'package:chatting/chatting_data_page.dart'; + +//好友列表项 + +class ContactItemPage extends StatelessWidget { + + //好友数据 + final ContactDataPage item; + + //标题名 + final String titleName; + + //图片路径 + final String imageName; + + //构造方法 + ContactItemPage({this.item, this.titleName, this.imageName}); + + + @override + Widget build(BuildContext context) { + //列表项容器 + return Container( + decoration: BoxDecoration( + color: Colors.white, + //每一条列表加一个边框 + border: Border( + bottom: BorderSide(width: 0.5,color: Color(0xFFd9d9d9)) + ), + + ), + height: 52.0, + child: FlatButton( + onPressed: (){}, + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + //展示图像或者图片 + //imageName !=null ? Image.network( item.avatarUrl):Image.asset(''), + Image.network('http://blogimages.jspang.com/blogtouxiang1.jpg'), + //展示名称或标题 + Container( + margin: const EdgeInsets.only(left: 12.0), + child: Text( + //titleName == null ? titleName:"暂时", + "海阔天空", + style: TextStyle( + fontSize: 18.0, + color: Color(0xFF353535) + ), + ), + ) + ], + ), + ), + ); + } +} diff --git a/lib/contact_list_page.dart b/lib/contact_list_page.dart new file mode 100644 index 0000000..7db862b --- /dev/null +++ b/lib/contact_list_page.dart @@ -0,0 +1,101 @@ +import 'package:flutter/material.dart'; +import 'package:chatting/contact_data_page.dart'; +import 'package:chatting/contact_header_page.dart'; +import 'package:chatting/contact_item_page.dart'; +import 'package:chatting/contact_sider_list_page.dart'; + +//好友列表页 + +class ContactListPage extends StatefulWidget { + @override + _ContactListPageState createState() => _ContactListPageState(); +} + +class _ContactListPageState extends State { + + Color WechatThemeColor = Colors.white; + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text("通讯录"), + centerTitle: true, + leading: GestureDetector( + child: Container( + margin: EdgeInsets.only(left: 15, top: 15), + child: Text( + '更多', + style: TextStyle( + fontSize: 20 + ), + ), + ), + onTap: () { + Navigator.of(context) + .push(MaterialPageRoute(builder: (BuildContext context) { + return null; + })); + }, + ), + //又按钮 + actions: [ + GestureDetector( + child: Container( + margin: EdgeInsets.only(right: 15), + child: Image( + color: Colors.white, + image: AssetImage('assets/images/ic_friends_add.png'), + width: 28, + height: 25, + ), + ), + onTap: () { + Navigator.of(context) + .push(MaterialPageRoute(builder: (BuildContext context) { + return null; + })); + }, + ) + ],//左按钮 + ), + //主体的实现 + body: ContactSiderListPage( + //好友列表数据 + items: contactData, + //好友列表头构造器 + headerBuilder: (BuildContext context,int index){ + return Container( + //好友列表头 + child: ContactHeaderPage(), + ); + }, + //好友列表项构造器 + itemBuilder: (BuildContext context,int index){ + return Container( + color: Colors.white, + alignment: Alignment.centerLeft, + child: ContactItemPage(), + ); + }, + //字母构造器 + sectionBuilder: (BuildContext context,int index){ + return Container( + height: 32.0, + padding: const EdgeInsets.only(left: 14.0), + color: Colors.grey[300], + alignment: Alignment.centerLeft, + //显示字母 + child: Text( + contactData[index].seationKey, + style: TextStyle( + fontSize: 14.0, + color: Color(0xff909090) + ), + ), + ); + }, + ), + ); + } +} diff --git a/lib/contact_sider_list_page.dart b/lib/contact_sider_list_page.dart new file mode 100644 index 0000000..d93a8bc --- /dev/null +++ b/lib/contact_sider_list_page.dart @@ -0,0 +1,109 @@ +import 'package:chatting/contact_data_page.dart'; +import 'package:flutter/material.dart'; + +//好友列表渲染 +//好友 具体实 类需要 个构造器及 表数 +class ContactSiderListPage extends StatefulWidget { + //好友列表项数据 + final List items; + + //好友列表头构造器 + final IndexedWidgetBuilder headerBuilder; + + //好友列表项构造器 + final IndexedWidgetBuilder itemBuilder; + + //字母构造器 + final IndexedWidgetBuilder sectionBuilder; + + //构造方法 + const ContactSiderListPage( + {Key key, + @required this.items, + this.headerBuilder, + @required this.itemBuilder, + @required this.sectionBuilder}) + : super(key: key); + + @override + _ContactSiderListPageState createState() => _ContactSiderListPageState(); +} + +class _ContactSiderListPageState extends State { + //列表滚动控制器 + final ScrollController _scrollController = new ScrollController(); + + bool _onNotification(ScrollNotification notification) { + return true; + } + + //判断并显示头部视图,或者容器 + _isShowHeaderView(index){ + if(index == 0 && widget.headerBuilder !=null){ + return Offstage( + offstage: false, + child: widget.headerBuilder(context,index), + ); + } + } + + + //根据定位判断是否显示好友列表头 + bool _shouldShowHeader(int position){ + if(position<= 0 ){ + return false; + } + if(position != 0 && widget.items[position].seationKey !=widget.items[position-1].seationKey){ + return false; + } + return true; + } + + @override + Widget build(BuildContext context) { + + + + return Scaffold( + body: Stack( + children: [ + //列表加载更多 + NotificationListener( + onNotification: _onNotification, + child: ListView.builder( + //滚动控制器 + controller: _scrollController, + //列表里的内容不足一屏幕时也可以滑动 + physics: const AlwaysScrollableScrollPhysics(), + //列表长度 + itemCount: widget.items.length, + itemBuilder: (BuildContext context,int index){ + //列表项容器 + return Container( + alignment: Alignment.centerLeft, + child: Column( + children: [ + //显示列表列头 + _isShowHeaderView(index), + //用offstage 组件控制是否显示英文字母 + Offstage( + offstage: _shouldShowHeader(index), + child: widget.sectionBuilder(context,index), + ), + //显示列表项 + Column( + children: [ + widget.itemBuilder(context,index) + ], + ) + ], + ), + ); + }, + ), + ) + ], + ), + ); + } +}