Flutter 城市列表 索引&懸停

摘要： 我的       :Flutter開源庫集合 GitHub : QuickSelectListView Pub        : QuickSelectListView Demo    : flutter_demos APK        : 點選下載 v1....

我的       :Flutter開源庫集合

GitHub : ofollow,noindex">QuickSelectListView

Pub        : QuickSelectListView

Demo    : flutter_demos

APK        : 點選下載 v1.0.4

[QuickSelectListView]

包含有懸停效果ListView，索引 IndexBar，觸控IndexBar Tag滾動到指定item。QuickSelectListView是通過IndexBar與SuspensionListView封裝,可以快速實現城市列表效果。原始碼已經開源到 flutterchina flukit 元件庫中，歡迎star。

一、城市名轉拼音

Flutter版漢字轉拼音庫已經為大家寫好了，lpinyin 歡迎star

二、IndexBar

索引IndexBar

三、SuspensionListView

帶有懸停效果View

Example

class CitySelectPage extends StatefulWidget {
final String title;

CitySelectPage(this.title);

@override
State<StatefulWidget> createState() {
return new _CitySelectPageState();
}
}

class _CitySelectPageState extends State<CitySelectPage> {
List<CityInfo> _cityList = List();
List<CityInfo> _hotCityList = List();

int _suspensionHeight = 40;
int _itemHeight = 50;
String _suspensionTag = "";

@override
void initState() {
super.initState();
_hotCityList.add(CityInfo(name: "北京市", tagIndex: "熱門"));
_hotCityList.add(CityInfo(name: "廣州市", tagIndex: "熱門"));
_hotCityList.add(CityInfo(name: "成都市", tagIndex: "熱門"));
_hotCityList.add(CityInfo(name: "深圳市", tagIndex: "熱門"));
_hotCityList.add(CityInfo(name: "杭州市", tagIndex: "熱門"));
_hotCityList.add(CityInfo(name: "武漢市", tagIndex: "熱門"));

loadData();
}

void loadData() async {
//載入城市列表
rootBundle.loadString('assets/data/china.json').then((value) {
Map countyMap = json.decode(value);
List list = countyMap['china'];
list.forEach((value) {
_cityList.add(CityInfo(name: value['name']));
});
_handleList(_cityList);

setState(() {
_suspensionTag = _hotCityList[0].getSuspensionTag();
});
});
}

void _handleList(List<CityInfo> list) {
if (list == null || list.isEmpty) return;
for (int i = 0, length = list.length; i < length; i++) {
String pinyin =
PinyinHelper.convertToPinyinStringWithoutException(list[i].name);
String tag = pinyin.substring(0, 1).toUpperCase();
list[i].namePinyin = pinyin;
if (RegExp("[A-Z]").hasMatch(tag)) {
list[i].tagIndex = tag;
} else {
list[i].tagIndex = "#";
}
}
}

void _onSusTagChanged(String tag) {
setState(() {
_suspensionTag = tag;
});
}

///構建懸停Widget.
Widget _buildSusWidget(String susTag) {
return Container(
height: _suspensionHeight.toDouble(),
padding: const EdgeInsets.only(left: 15.0),
color: Color(0xfff3f4f5),
alignment: Alignment.centerLeft,
child: Text(
'$susTag',
softWrap: false,
style: TextStyle(
fontSize: 14.0,
color: Color(0xff999999),
),
),
);
}

///構建列表 item Widget.
Widget _buildListItem(CityInfo model) {
return Column(
children: <Widget>[
Offstage(
offstage: !(model.isShowSuspension == true),
child: _buildSusWidget(model.getSuspensionTag()),
),
SizedBox(
height: _itemHeight.toDouble(),
child: ListTile(
title: Text(model.name),
onTap: () {
print("OnItemClick: $model");
Navigator.pop(context, model);
},
),
)
],
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
centerTitle: true,
),
body: new Column(
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.only(left: 15.0),
height: 50.0,
child: Text("當前城市: 成都市"),
),
Expanded(
flex: 1,
child: QuickSelectListView(
data: _cityList,
topData: _hotCityList,
itemBuilder: (context, model) => _buildListItem(model),
suspensionWidget: _buildSusWidget(_suspensionTag),
isUseRealIndex: true,
itemHeight: _itemHeight,
suspensionHeight: _suspensionHeight,
onSusTagChanged: _onSusTagChanged,
))
],
));
}
}

Android掃碼下載APK

Demo截圖