Flutter/Dart：如何将ListTile标题替换为对应月份名称？

我有一个包含12个项的列表，目前ListTile的标题显示为'the list item#$index'，希望将其替换为对应的月份名称。以下是我的代码及效果截图：

列表页代码 #

ListView _buildListView(BuildContext context){
  List months =
  ['January', 'February', 'March', 'April', 'May','June','July','August','September','October','November','December'];
  int i=0;

    return ListView.builder(itemCount: 12,
    itemBuilder: (_, index){
      return ListTile(
        title: Text('the list item#$index'),
        subtitle: Text('thesubtitle'),
        leading: Icon(Icons.account_balance_wallet_rounded),
        trailing: Icon(Icons.arrow_forward),
        onTap: (){
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => DetailPage(index))
          );
        },
      );
    },
    );
}

详情页代码 #

class DetailPage extends StatelessWidget{
final int index;
DetailPage(this.index);

  @override
  Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text('detailsPage'),
        ),
        body: Center(
          child: Text('The details page#$index',style: TextStyle(fontSize: 32.0),),
        ),
      );
  }
}

请问该如何修改代码实现需求？

只需两步修改即可实现需求：

1. 替换ListTile的标题文本 #

你已经定义了months数组，直接通过index取对应月份字符串替换原来的标题文本就行，把title: Text('the list item#$index')改成：

title: Text(months[index]),

另外，你定义的int i=0;未被使用，可以直接删除。修改后的列表页代码如下：

ListView _buildListView(BuildContext context){
  List months =
  ['January', 'February', 'March', 'April', 'May','June','July','August','September','October','November','December'];

    return ListView.builder(itemCount: 12,
    itemBuilder: (_, index){
      return ListTile(
        title: Text(months[index]), // 替换为对应月份名称
        subtitle: Text('thesubtitle'),
        leading: Icon(Icons.account_balance_wallet_rounded),
        trailing: Icon(Icons.arrow_forward),
        onTap: (){
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => DetailPage(index))
          );
        },
      );
    },
    );
}

2. （可选）修改详情页显示月份名称 #

如果希望详情页也显示对应的月份而非索引，可以调整DetailPage的传参逻辑：

修改详情页代码 #

class DetailPage extends StatelessWidget{
final String month; // 改为接收月份字符串
DetailPage(this.month);

  @override
  Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text('detailsPage'),
        ),
        body: Center(
          child: Text('The details page for $month',style: TextStyle(fontSize: 32.0),),
        ),
      );
  }
}

修改列表页的跳转代码 #

把Navigator.push里的DetailPage(index)改成DetailPage(months[index])：

onTap: (){
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => DetailPage(months[index]))
  );
},

内容的提问来源于stack exchange，提问作者Bill Tertis