增加好友列表页
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