Flutter Dart List.map() 获取下标

最新推荐文章于 2025-06-16 08:23:00 发布

原创最新推荐文章于 2025-06-16 08:23:00 发布 · 6.4k 阅读

4 ·

CC 4.0 BY-SA版权

本文详细介绍了使用Flutter框架进行首页设计的过程，包括状态管理和页面构建。通过具体的代码示例，展示了如何利用Scaffold、AppBar、Column和Row等组件构建一个包含审批单、机票列表和客服功能的首页布局。

class HomePageState extends State{
final topTitles = ['审批单', '机票列表', '客服'];
final topIcons = ['assets/home/approval.png', 'assets/home/air_ticket.png', 'assets/home/service.png'];
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: AppBar(
title: Text('首页')
),
body: Column(
children: <Widget>[
//顶部
Row(
children: topTitles.asMap().keys.map((f)=>
　　　　　　　　　　//f拿到的就是下标：

Expanded(
flex: 1,
child: Column(
children: <Widget>[
Image(
image: new AssetImage(topIcons[f]),
height: 60, width: 60),
Text(topTitles[f])
],
),
)).toList(),
),
//列表

],
),
);
}

@override
void initState() {
// TODO: implement initState
super.initState();
print("initStateHome");
}

}