在移动端App中主要的展现形式就是列表，我这里简单介绍一下Flutter中实现列表的方法。
ListView
Flutter中提供了ListView这个组件来实现列表，直接来看实现方法
class ListViewApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'List Test',
home: Scaffold(
appBar: AppBar(
title: Text('ListView Widget'),
),
body: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.perm_camera_mic),
title: Text('perm_camera_mic'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('phone'),
),
ListTile(
leading: Icon(Icons.access_time),
title: Text('access_time'),
),
ListTile(
leading: Icon(Icons.tag_faces),
title: Text('tag_faces'),
),
],
),
),
);
}
}
ListView另一种写法(常用)
上面那种写法是最基础的方法，平时我们基本不用，来看下面的方法
class ListViewApp extends StatelessWidget {
final List<String> items;
//构造方法，key父类必传的值，也是默认就有的，只需要传给父类构造方法即可
ListViewApp({Key key, @required this.items}) : super(key:key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '动态列表',
home: Scaffold(
appBar: AppBar(title: Text('动态列表'),),
body: ListView.builder(
itemCount: items.length, //数量
itemBuilder: (context, index){
return ListTile(title: Text('${items[index]}'));
},
),
),
);
}
}
CustomScrollView
很多时候我们都需要一个带顶部的List，也就是iOS中的表头，那就用到了CustomScrollView，来看一下实现
class AccountPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _AccountState();
}
}
class _AccountState extends State<AccountPage>{
List<StaticListEntity> listItems = List();
@override
void initState() {
super.initState();
_initData();
}
@override
Widget build(BuildContext context) {
super.build(context);
return Container(
color: ColorConstant.MAIN_THEME_COLOR,
child: SafeArea(
child: CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(
child: GestureDetector(
child: Container(
margin: const EdgeInsets.all(15),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 35,
margin: const EdgeInsets.all(5),
child: Image(
image:
AssetImage('resource/images/ic_account_avatar.png'),
),
),
SizedBox(
width: 5,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text('请登录',
style: TextStyle(
color: ColorConstant.TEXT_GRAY_COLOR,
fontSize: 30,
fontWeight: FontWeight.w600,
),
),
),
SizedBox(
width: 10,
),
Container(
child: Text('欢迎',
style: TextStyle(
color: ColorConstant.TEXT_GRAY_COLOR,
fontWeight: FontWeight.w600,
),
),
),
],
),
],
),
),
onTap: () {
print('点击了');
},
)),
// 当列表项高度固定时，使用 SliverFixedExtendList 比 SliverList 具有更高的性能
SliverFixedExtentList(
delegate: SliverChildBuilderDelegate(_buildListItem,
childCount:
(this.listItems.length > 0 ? this.listItems.length : 0)),
itemExtent: 60.0,
),
],
),
),
);
}
/// 列表项
Widget _buildListItem(BuildContext context, int index) {
return StaticListItem(
entity: this.listItems[index],
callBack: (context, entity) {
},
);
}
_initData() {
this.listItems.add(
StaticListEntity(
icon: 'resource/images/ic_invite.png',
title: '邀请返佣',
router: '',
webUrl: '',
),
);
this.listItems.add(
StaticListEntity(
icon: 'resource/images/ic_account_verify.png',
title: '身份认证',
router: '',
),
);
this.listItems.add(
StaticListEntity(
icon: 'resource/images/ic_account_safe_setting.png',
title: '安全设置',
router: '',
),
);
this.listItems.add(
StaticListEntity(
icon: 'resource/images/ic_account_msg.png',
title: '系统消息',
router: RouterConstants.MESSAGE_CENTER_PAGE,
isShowBadge: true,
),
);
this.listItems.add(
StaticListEntity(
icon: 'resource/images/ic_account_about_us.png',
title: '关于我们',
router: RouterConstants.ABOUT_US_PAGE,
),
);
this.listItems.add(
StaticListEntity(
icon: 'resource/images/ic_account_setting.png',
title: '设置',
router: RouterConstants.SETTING_PAGE,
),
);
}
}
GridView
这个是网格组件，类似于iOS中的CollectionView
class GridViewApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '网格组件',
home: Scaffold(
appBar: AppBar(title: Text('网格组件'),),
body: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, //列数
crossAxisSpacing: 2.0, //间距
mainAxisSpacing: 2.0, //上下间距
childAspectRatio: 0.7, //宽高比
),
children: <Widget>[
Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover),
Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),
Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover),
Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover),
Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover),
Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover),
Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover),
Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover),
Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover),
],
),
),
);
}
}
Flutter中还有很多其他类似的组件，我也是刚开始使用，还要继续探索~