如何将映射列表传递到 Flutter 中的列或行？

Question

我是 flutter dart 的新手，在语法上无法将包含多个块的列表传递给函数。 这是我的清单：

Final list = [
{
'name' : 'abc',
'age : '25',
'gender' : 'M',
},

{

'name' : 'def',

'age : '26',

'gender' : 'F',

},
{
'name' : 'ghi',
'age : '25',
'gender' : 'M',
},
];

假设这是我的函数，将显示输出：

Myfunc () 
{
Text('name'),
Text('age'),
Text('gender')
};

那么我将如何用实际语法编写这个函数（忽略一些基本的小部件）。 预先感谢您阅读本文并提供帮助^^

Answer 1

您可以执行以下操作将项目传递给您的函数：

Myfunc () 
{
  return list.map(item => 
    Row(
      children: [
        Text(item['name']),
        Text(item['age']),
        Text(item['gender']),
      ],
    )).toList();
};

您是否尝试循环列表并创建像本例一样的小部件？

Answer 2

您的列表包含地图（也称为其他语言的字典）。如果这是用 Dart 编写的，它会看起来像这样。

final List<Map<String, String>> myList = [
    {
      'name': 'abc',
      'age': '25',
      'gender': 'M',
    },
    {
      'name': 'def',
      'age': '26',
      'gender': 'F',
    },
    {
      'name': 'ghi',
      'age': '25',
      'gender': 'M',
    },
  ];

在完整的 Flutter 应用程序中，这就是它的样子。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<Map<String, String>> myList = [
    {
      'name': 'abc',
      'age': '25',
      'gender': 'M',
    },
    {
      'name': 'def',
      'age': '26',
      'gender': 'F',
    },
    {
      'name': 'ghi',
      'age': '25',
      'gender': 'M',
    },
  ];

  MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('List of Maps'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            for (var item in myList) Text(item['name']!),
          ],
        ),
      ),
    );
  }
}

您可以将

Column

与

Row

交换，唯一的区别是一行中的项目将水平排列。 我还建议您阅读有关 Dart 集合运算符的更多内容这里。

Answer 3

将映射列表传递到列或行时请考虑以下事项：

1. 传播您的最终收藏品
2. 向下投射您的映射元素
3. 将您的地图返回为类型小部件。

映射元素的当前工作集合。

const List<Map<String, Object>> userSettings = [
  {"leading_icon": Icon.home, "title": "My Addresses", "sub_title": "Set shopping delivery address"},
  {"leading_icon": Icon.shopping_cart, "title": "My Cart", "sub_title": "Add or remove products prior to checkout"},
  {"leading_icon": Icon.shopping_bag, "title": "My Orders", "sub_title": "In-progress and complete orders"},
];

当前工作小部件。

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    ...userSettings.map(
      (item) => UserSettingsTile(
        leadingIcon: item["leading_icon"] as IconData,
        title: item["title"] as String,
        subTitle: item["sub_title"] as String,
      ) as Widget,
    ),
  ],
),