Skip to content

Commit 8b112c6

Browse files
shichunleishichunlei
committedSep 11, 2020
升级azlistview添加索引&悬停等新样式
1 parent 884089e commit 8b112c6

File tree

6 files changed

+134
-130
lines changed

6 files changed

+134
-130
lines changed
 

‎images/ic_index_bar_bubble_gray.png

4.91 KB
Loading

‎lib/bean/contact.dart

+16
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,22 @@ class ContactBean extends ISuspensionBean {
3131
String fullName;
3232
String firstLetter;
3333

34+
ContactBean(
35+
{this.gender,
36+
this.name,
37+
this.location,
38+
this.email,
39+
this.login,
40+
this.dob,
41+
this.registered,
42+
this.phone,
43+
this.cell,
44+
this.id,
45+
this.picture,
46+
this.nat,
47+
this.fullName,
48+
this.firstLetter});
49+
3450
static ContactBean fromMap(Map<String, dynamic> map) {
3551
if (map == null) return null;
3652
ContactBean contact = ContactBean();

‎lib/contact/page/contact_list_page.dart

+81-95
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import 'package:clippy_flutter/clippy_flutter.dart';
2-
import 'package:flutter/material.dart';
3-
41
import 'package:azlistview/azlistview.dart';
2+
import 'package:clippy_flutter/diagonal.dart';
3+
import 'package:flutter/material.dart';
54
import 'package:flutter_app/generated/i18n.dart';
65

76
import '../../page_index.dart';
@@ -45,50 +44,41 @@ class _ContactListPageState extends State<ContactListPage> {
4544
if (snapshot.data.length > 0) {
4645
return AzListView(
4746
data: snapshot.data,
48-
itemBuilder: (context, model) =>
49-
_buildListItem(model),
50-
header: AzListViewHeader(
51-
height: 220,
52-
builder: (context) => Diagonal(
53-
axis: Axis.horizontal,
54-
position: DiagonalPosition.BOTTOM_LEFT,
55-
clipHeight: 50.0,
56-
child: ContactListHeader(
57-
name: "SCL", phone: "18601952581"),
58-
),
59-
),
60-
isUseRealIndex: true,
61-
itemHeight: _itemHeight,
62-
indexBarBuilder: (BuildContext context,
63-
List<String> tags,
64-
IndexBarTouchCallback onTouch) {
65-
return Container(
66-
margin: EdgeInsets.symmetric(
67-
vertical: 16.0, horizontal: 8.0),
68-
decoration: BoxDecoration(
69-
color: Colors.grey[50],
70-
borderRadius: BorderRadius.circular(20.0),
71-
border: Border.all(
72-
color: Colors.grey[300], width: .5)),
73-
child: ClipRRect(
74-
borderRadius: BorderRadius.circular(20.0),
75-
child: IndexBar(
76-
data: tags,
77-
itemHeight: 20,
78-
onTouch: (details) =>
79-
onTouch(details))));
47+
itemBuilder: (context, index) {
48+
if (index == 0) {
49+
return Container(
50+
height: 220,
51+
child: Diagonal(
52+
axis: Axis.horizontal,
53+
position: DiagonalPosition.BOTTOM_LEFT,
54+
clipHeight: 50.0,
55+
child: ContactListHeader(
56+
name: "SCL", phone: "18601952581")));
57+
}
58+
return _buildListItem(snapshot.data[index]);
8059
},
81-
indexHintBuilder: (_, String hint) => Container(
82-
alignment: Alignment.center,
83-
width: 60.0,
84-
height: 60.0,
85-
decoration: BoxDecoration(
86-
color: Colors.blue[700].withAlpha(200),
87-
shape: BoxShape.circle),
88-
child: Text(hint,
89-
style: TextStyle(
90-
color: Colors.white, fontSize: 30.0)),
91-
));
60+
physics: BouncingScrollPhysics(),
61+
itemCount: snapshot.data.length,
62+
// indexBarData: ['↑', ...kIndexBarData],
63+
indexBarData:
64+
SuspensionUtil.getTagIndexList(snapshot.data),
65+
indexBarOptions: IndexBarOptions(
66+
needRebuild: true,
67+
ignoreDragCancel: true,
68+
downTextStyle:
69+
TextStyle(fontSize: 12, color: Colors.white),
70+
downItemDecoration: BoxDecoration(
71+
shape: BoxShape.circle, color: Colors.green),
72+
indexHintWidth: 120 / 2,
73+
indexHintHeight: 100 / 2,
74+
indexHintDecoration: BoxDecoration(
75+
image: DecorationImage(
76+
image: AssetImage(
77+
'images/ic_index_bar_bubble_gray.png'),
78+
fit: BoxFit.contain)),
79+
indexHintAlignment: Alignment.centerRight,
80+
indexHintChildAlignment: Alignment(-0.25, 0.0),
81+
indexHintOffset: Offset(-20, 0)));
9282
}
9383
return EmptyPage(
9484
text: '暂无数据', imageAsset: 'images/empty.jpeg');
@@ -102,62 +92,58 @@ class _ContactListPageState extends State<ContactListPage> {
10292

10393
Widget _buildListItem(ContactBean model) {
10494
return Container(
105-
padding: const EdgeInsets.only(left: 16.0, right: 34.0),
106-
height: _itemHeight.toDouble(),
107-
child: Container(
108-
decoration: BoxDecoration(
109-
border: (model.isShowSuspension)
110-
? Border(
111-
top: Divider.createBorderSide(context,
112-
color: Colors.grey, width: 0.6),
113-
)
114-
: null),
115-
child: Row(
116-
children: <Widget>[
117-
Opacity(
118-
opacity: model.isShowSuspension ? 1 : 0,
119-
child: SizedBox(
120-
width: 28.0,
121-
child: Text(model.firstLetter, style: TextStyles.textDark14),
122-
)),
123-
Expanded(
124-
child: ListTile(
125-
leading: Hero(
126-
tag: '${model.fullName}',
127-
child: model?.picture?.medium == ""
128-
? CircleAvatar(child: Text(model?.fullName[0]))
129-
: CircleAvatar(
130-
backgroundImage:
131-
NetworkImage(model?.picture?.medium),
132-
),
133-
),
134-
title: Text(model.fullName),
135-
subtitle: Text(model.email),
136-
onTap: () => pushNewPage(
137-
context,
138-
ContactPage(
139-
name: model.fullName,
140-
phone: model.phone,
141-
avatar: model?.picture?.large,
142-
email: model?.email,
143-
cell: model?.cell,
144-
address:
145-
"${model?.location?.street?.number} ${model?.location?.street?.name}",
146-
area:
147-
"${model?.location?.city}, ${model?.location?.state}",
148-
birthday: model?.dob?.date))),
149-
)
150-
],
151-
),
152-
),
153-
);
95+
padding: const EdgeInsets.only(left: 16.0, right: 34.0),
96+
height: _itemHeight.toDouble(),
97+
child: Container(
98+
decoration: BoxDecoration(
99+
border: (model.isShowSuspension)
100+
? Border(
101+
top: Divider.createBorderSide(context,
102+
color: Colors.grey, width: 0.6))
103+
: null),
104+
child: Row(children: <Widget>[
105+
Opacity(
106+
opacity: model.isShowSuspension ? 1 : 0,
107+
child: SizedBox(
108+
width: 28.0,
109+
child: Text(model.firstLetter,
110+
style: TextStyles.textDark14))),
111+
Expanded(
112+
child: ListTile(
113+
leading: Hero(
114+
tag: '${model.fullName}',
115+
child: model?.picture?.medium == ""
116+
? CircleAvatar(child: Text(model?.fullName[0]))
117+
: CircleAvatar(
118+
backgroundImage:
119+
NetworkImage(model?.picture?.medium))),
120+
title: Text(model.fullName),
121+
subtitle: Text(model.email),
122+
onTap: () => pushNewPage(
123+
context,
124+
ContactPage(
125+
name: model.fullName,
126+
phone: model.phone,
127+
avatar: model?.picture?.large,
128+
email: model?.email,
129+
cell: model?.cell,
130+
address:
131+
"${model?.location?.street?.number} ${model?.location?.street?.name}",
132+
area:
133+
"${model?.location?.city}, ${model?.location?.state}",
134+
birthday: model?.dob?.date))))
135+
])));
154136
}
155137

156138
Future<List<ContactBean>> fetchData() async {
157139
List<ContactBean> _contacts = await ApiService.getRandomUser();
158140

159141
/// 根据A-Z排序
160142
SuspensionUtil.sortListBySuspensionTag(_contacts);
143+
144+
SuspensionUtil.setShowSuspensionStatus(_contacts);
145+
146+
_contacts.insert(0, ContactBean(fullName: "header", firstLetter: "↑"));
161147
return _contacts;
162148
}
163149
}

‎lib/weather/page/city_page.dart

+28-33
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import 'package:azlistview/azlistview.dart';
22
import 'package:flutter/material.dart';
3-
43
import 'package:flutter_app/bean/city.dart';
5-
64
import 'package:rounded_letter/rounded_letter.dart';
75

86
import '../../page_index.dart';
@@ -18,7 +16,6 @@ class CityPageState extends State<CityPage> {
1816

1917
int _suspensionHeight = 40;
2018
int _itemHeight = 58;
21-
String _suspensionTag = "";
2219

2320
LoaderState _status = LoaderState.Loading;
2421

@@ -36,43 +33,39 @@ class CityPageState extends State<CityPage> {
3633
return Scaffold(
3734
appBar: AppBar(title: Text('城市列表')),
3835
body: LoaderContainer(
39-
loaderState: _status,
40-
loadingView: LoadingWidget(),
41-
contentView: AzListView(
42-
data: _cityList,
43-
topData: _hotCityList,
44-
itemBuilder: (context, cityBean) => _buildCityItems(cityBean),
45-
suspensionWidget: SuspensionTag(
46-
susTag: _suspensionTag, susHeight: _suspensionHeight),
47-
isUseRealIndex: true,
48-
itemHeight: _itemHeight,
49-
suspensionHeight: _suspensionHeight,
50-
indexBarBuilder: (context, list, onTouch) => IndexBar(
51-
onTouch: onTouch,
52-
data: list,
53-
touchDownColor: Colors.transparent,
54-
textStyle: TextStyles.textGrey12),
55-
onSusTagChanged: (value) =>
56-
setState(() => _suspensionTag = value)),
57-
));
36+
loaderState: _status,
37+
loadingView: LoadingWidget(),
38+
contentView: AzListView(
39+
data: _cityList,
40+
itemCount: _cityList.length,
41+
itemBuilder: (BuildContext context, int index) {
42+
return _buildCityItems(_cityList[index]);
43+
},
44+
padding: EdgeInsets.zero,
45+
indexBarData: ['定', '常', '★', ...kIndexBarData])));
5846
}
5947

6048
void getCityListData() async {
61-
_hotCityList.add(City(location: "$currentCity", firstLetter: "定位"));
62-
_hotCityList.add(City(location: "$currentCity", firstLetter: "常用"));
63-
_hotCityList.add(City(location: "北京", firstLetter: "常用"));
64-
_hotCityList.add(City(location: "广州", firstLetter: "热门"));
65-
_hotCityList.add(City(location: "成都", firstLetter: "热门"));
66-
_hotCityList.add(City(location: "深圳", firstLetter: "热门"));
67-
_hotCityList.add(City(location: "杭州", firstLetter: "热门"));
68-
_hotCityList.add(City(location: "上海", firstLetter: "热门"));
49+
_hotCityList.add(City(location: "$currentCity", firstLetter: "定"));
50+
_hotCityList.add(City(location: "$currentCity", firstLetter: "常"));
51+
_hotCityList.add(City(location: "北京", firstLetter: "常"));
52+
_hotCityList.add(City(location: "广州", firstLetter: "★"));
53+
_hotCityList.add(City(location: "成都", firstLetter: "★"));
54+
_hotCityList.add(City(location: "深圳", firstLetter: "★"));
55+
_hotCityList.add(City(location: "杭州", firstLetter: "★"));
56+
_hotCityList.add(City(location: "上海", firstLetter: "★"));
6957

70-
_cityList = await ApiService.getHotCities();
58+
List<City> __cityList = await ApiService.getHotCities();
59+
60+
_cityList.addAll(__cityList);
7161

7262
/// 根据A-Z排序
7363
SuspensionUtil.sortListBySuspensionTag(_cityList);
7464

75-
_suspensionTag = _hotCityList?.first?.getSuspensionTag();
65+
_cityList.insertAll(0, _hotCityList);
66+
67+
// show sus tag.
68+
SuspensionUtil.setShowSuspensionStatus(_cityList);
7669

7770
setState(() {
7871
_status = LoaderState.Succeed;
@@ -82,7 +75,9 @@ class CityPageState extends State<CityPage> {
8275
/// 构建列表 item Widget.
8376
_buildCityItems(City model) {
8477
String susTag = model.getSuspensionTag();
85-
susTag = (susTag == "★" ? "热门城市" : susTag);
78+
susTag = (susTag == "★"
79+
? "★ 热门城市"
80+
: susTag == "定" ? "当前定位" : susTag == "常" ? "常用地址" : susTag);
8681
return Column(children: <Widget>[
8782
Offstage(
8883
offstage: !(model.isShowSuspension == true),

‎pubspec.lock

+8-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ packages:
5656
name: azlistview
5757
url: "https://pub.flutter-io.cn"
5858
source: hosted
59-
version: "0.1.2"
59+
version: "1.0.1"
6060
badges:
6161
dependency: "direct main"
6262
description:
@@ -655,6 +655,13 @@ packages:
655655
url: "https://pub.flutter-io.cn"
656656
source: hosted
657657
version: "0.24.1"
658+
scrollable_positioned_list:
659+
dependency: transitive
660+
description:
661+
name: scrollable_positioned_list
662+
url: "https://pub.flutter-io.cn"
663+
source: hosted
664+
version: "0.1.7"
658665
share:
659666
dependency: "direct main"
660667
description:

‎pubspec.yaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ dependencies: # 应用或包依赖的其它包或插件
3030
audioplayers: ^0.15.1
3131

3232
# AzListView，Flutter 城市列表，联系人列表，自定义Header，索引，悬停效果。
33-
azlistview: ^0.1.2
33+
azlistview: ^1.0.1
3434

3535
badges: ^1.1.1
3636

0 commit comments

Comments
 (0)
Please sign in to comment.