Flutter中如何获取Map指定位置的键值并在ListView的ListTile中按需展示

没问题，我来帮你实现这个需求！核心思路是把Map的键和值转换成可索引的列表，这样就能按顺序获取指定位置的键值对了。以下是修改后的完整代码：

import 'dart:math';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  Map<String, dynamic> mymap = {
    '${Random().nextInt(255)}': false,
    '${Random().nextInt(255)}': true,
    '${Random().nextInt(255)}': true,
    '${Random().nextInt(255)}': false,
  };

  @override
  Widget build(BuildContext context) {
    // 将Map的键和值转换为可索引的列表
    final keys = mymap.keys.toList();
    final values = mymap.values.toList();

    return ListView.builder(
      itemCount: 1,
      itemBuilder: (context, index) {
        return ListTile(
          // Title区域展示第一个键及其对应值
          title: Text('${keys[0]}: ${values[0]}'),
          // Subtitle区域展示第二个键及其对应值
          subtitle: Text('${keys[1]}: ${values[1]}'),
          // Leading区域仅展示第三个键
          leading: Text(keys[2]),
          // Trailing区域展示第四个键的对应值
          trailing: Text('${values[3]}'),
        );
      },
    );
  }
}

关键步骤说明 #

• 转换为列表：通过keys.toList()和values.toList()，把原本无序的Map键值对转换成有序列表，这样就能通过索引（如keys[0]、values[3]）精准获取指定位置的内容。
• 各区域赋值：
  • Title：拼接第一个键和对应的值，用字符串插值展示
  • Subtitle：同理处理第二个键值对
  • Leading：直接展示第三个键的内容
  • Trailing：单独展示第四个键对应的布尔值

额外提示 #

如果希望这些随机生成的键值对在Widget重建时保持不变（比如屏幕旋转、父组件刷新时），建议把mymap移到StatefulWidget的State类中初始化，避免每次build都重新生成随机值。

内容的提问来源于stack exchange，提问作者Irfan Ganatra