增加好友列表页
zhangmeng1334717033
parent
5b17f8f691
commit
468bead526
|
|
@ -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<ContactDataPage> 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'),
|
||||||
|
];
|
||||||
|
|
@ -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: <Widget>[
|
||||||
|
ContactItemPage(titleName: '新的朋友',imageName: '',),
|
||||||
|
ContactItemPage(titleName: '群聊',imageName: '',),
|
||||||
|
ContactItemPage(titleName: '标签',imageName: '',),
|
||||||
|
ContactItemPage(titleName: '公众号',imageName: '',)
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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: <Widget>[
|
||||||
|
//展示图像或者图片
|
||||||
|
//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)
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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<ContactListPage> {
|
||||||
|
|
||||||
|
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: <Widget>[
|
||||||
|
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)
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
import 'package:chatting/contact_data_page.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
//好友列表渲染
|
||||||
|
//好友 具体实 类需要 个构造器及 表数
|
||||||
|
class ContactSiderListPage extends StatefulWidget {
|
||||||
|
//好友列表项数据
|
||||||
|
final List<ContactDataPage> 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<ContactSiderListPage> {
|
||||||
|
//列表滚动控制器
|
||||||
|
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: <Widget>[
|
||||||
|
//列表加载更多
|
||||||
|
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: <Widget>[
|
||||||
|
//显示列表列头
|
||||||
|
_isShowHeaderView(index),
|
||||||
|
//用offstage 组件控制是否显示英文字母
|
||||||
|
Offstage(
|
||||||
|
offstage: _shouldShowHeader(index),
|
||||||
|
child: widget.sectionBuilder(context,index),
|
||||||
|
),
|
||||||
|
//显示列表项
|
||||||
|
Column(
|
||||||
|
children: <Widget>[
|
||||||
|
widget.itemBuilder(context,index)
|
||||||
|
],
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue