任何页面可以分为3类,第一类 全列表,第二类非列表,第三类非列表和列表,所以列表玩溜了,就成功了一大步。下面我们就开始搞列表
列表分类
1. 纵向列表
2. 横向列表
3. 网格列表
4. 可点击展开列表
5. 下拉刷新
6. 加载更多
listview(纵向横向列表)
import 'package:flutter/material.dart'; class ListViewPage extends StatefulWidget { @override _ListViewPageState createState() => _ListViewPageState(); } class _ListViewPageState extends State<ListViewPage> { var _scrollcontroller = ScrollController(); List<String> _datas = [ "A", "B", "C", "D", "E", "A", "B", "C", "D", "E", "A", "B", "C", "D", "E" ]; @override void dispose() { // TODO: implement dispose _scrollcontroller.dispose(); super.dispose(); } @override void initState() { // TODO: implement initState _scrollcontroller.addListener(() { if (_scrollcontroller.position.pixels == _scrollcontroller.position.maxScrollExtent) { _loadData(); } }); super.initState(); } @override Widget build(BuildContext context) { return Center( child: RefreshIndicator( child: ListView.builder( //scrollDirection: Axis.horizontal, controller: _scrollcontroller, itemBuilder: (context, index) { return _item(index); }, itemCount: _datas.length, ), onRefresh: _handerRefres), ); } Future<Null> _handerRefres() async { await Future.delayed(Duration(seconds: 2)); setState(() { _datas = _datas.reversed.toList(); }); } Future<Null> _loadData() async { await Future.delayed(Duration(seconds: 2)); setState(() { var list = List<String>.from(_datas); list.addAll(_datas); _datas = list; }); } Widget _item(index) { return Container( height: 80, // width: 160, // margin: const EdgeInsets.only(right: 5), margin: const EdgeInsets.only(bottom: 5), alignment: Alignment.center, decoration: BoxDecoration(color: Colors.teal), child: Text( _datas[index], style: TextStyle( color: Colors.white, fontSize: 20, decoration: TextDecoration.none), ), ); } }
gridview (网格列表)
import 'package:flutter/material.dart'; class GridViewPage extends StatefulWidget { @override _GridViewPageState createState() => _GridViewPageState(); } class _GridViewPageState extends State<GridViewPage> { List<String> _datas = [ "A", "B", "C", "D", "E", "A", "B", "C", "D", "E", "A", "B", "C", "D", "E" ]; @override Widget build(BuildContext context) { return Center( child: GridView.count( crossAxisCount: 2, children: getws(), //scrollDirection: Axis.horizontal, ), ); } List<Widget> getws(){ return _datas.map((f)=>_item(f)).toList(); } Widget _item(index) { return Container( height: 80, // width: 160, // margin: const EdgeInsets.only(right: 5), margin: const EdgeInsets.only(bottom: 5), alignment: Alignment.center, decoration: BoxDecoration(color: Colors.teal), child: Text( index, style: TextStyle( color: Colors.white, fontSize: 20, decoration: TextDecoration.none), ), ); } }
ExpansionTile (可以点击展开列表)
import 'package:flutter/material.dart'; const DATA = { "A": ["AB", "AC", "AD"], "B": ["BB", "BC", "BD"], "C": ["CB", "CC", "CD"], "D": ["DB", "DC", "DD"], }; class ExpansionTitlePage extends StatefulWidget { @override _ExpansionTitlePageState createState() => _ExpansionTitlePageState(); } class _ExpansionTitlePageState extends State<ExpansionTitlePage> { @override Widget build(BuildContext context) { return Center( child: ListView( children: _getWs(), ), ); } Widget _item(String title, List<String> datas) { return ExpansionTile( title: Text(title, style: TextStyle(color: Colors.black54,fontSize: 20), ), children: datas.map((data) => _item2(data)).toList(), ); } List<Widget> _getWs() { List<Widget> ws = []; DATA.keys.forEach((key) { ws.add(_item(key, DATA[key])); }); return ws; } Widget _item2(title) { //可伸缩 return FractionallySizedBox( widthFactor: 1, child: Container( alignment: Alignment.center, height: 50, margin: const EdgeInsets.only(bottom: 5), decoration: BoxDecoration(color: Colors.lightBlueAccent), child: Text(title), ), ); } }
RefreshIndicator 下拉刷新控件
代码实例和listview一样
ScrollController 加载更多控件
代码实例和listview一样