Flutter-从List.map()获取迭代索引

Sho*_*hak 8 indexing dictionary loops dart flutter

我在网上搜索了很多答案。

我在字母列表上写了迭代,然后使用“地图”类将卡片放在屏幕上

在代码中,您可以看到我进行了一行操作,并使用“ map”将卡上所有的userBoard都打印到了屏幕上。我想在其中添加一些逻辑,所以我需要获取elemnt的ID(用于Taping事件)。有办法可以做到吗?

实际上我想通过userBoard获取元素的特定索引

码:

Widget build(BuildContext context) {
return Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
        Row(
          children: userBoard
              .map((element) => Stack(children: <Widget>[
                    Align(
                      alignment: Alignment(0, -0.6),
                      child: GestureDetector(
                        onTap: (() {
                          setState(() {
                            // print("element=${element.toString()}");
                            // print("element=${userBoard[element]}");
                          });
                        }),
                        child: SizedBox(
                          width: 40,
                          height: 60,
                          child: Card(
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(5.0),
                              ),
                              child: Center(
                                child: Text(element,
                                    style: TextStyle(fontSize: 30)),
                              )),
                        ),
                      ),
                    )
                  ]))
              .toList(),
        )
      ],
    ),
Run Code Online (Sandbox Code Playgroud)

}

图片 -每张卡都是地图的“元素”。我想获取函数onTap的索引。

谢谢。

Fir*_*sia 42

list.indexOf当列表没有重复元素时,您可以获得索引使用吗?

例子

userBoard.map((element) {
  // get index
  var index = userBoard.indexOf(element);
  return Container(

  );
}).toList()
Run Code Online (Sandbox Code Playgroud)

  • 这将是非常低效的。 (24认同)
  • 当列表中的重复元素返回第一个创建的项目的索引时,这将是错误的。 (3认同)
  • @SimpleUXApps 因为 `list.indexOf` 必须迭代列表才能找到指定的元素。每个“list.indexOf”调用的时间复杂度为 O(n),因此将其用于列表中的每个元素的时间复杂度为 O(n^2)。这是低效的,因为这个操作可以在 O(n) 时间内轻松完成。 (3认同)
  • 必须检查重复的元素 (2认同)
  • 请不要这样做 (2认同)

And*_*eev 37

如果你想迭代,最简单的方法

我们可以扩展Iterable一个新函数:

import 'dart:core';

extension IndexedIterable<E> on Iterable<E> {
  Iterable<T> mapIndexed<T>(T Function(E e, int i) f) {
    var i = 0;
    return map((e) => f(e, i++));
  }
}
Run Code Online (Sandbox Code Playgroud)

用法:

myList.mapIndexed((element, index) {});
Run Code Online (Sandbox Code Playgroud)

取自这里

  • 链接答案中的更新解决方案:“您可以使用集合包中的 mapIndexed 或 forEachIndexed 扩展方法。” (3认同)

Eri*_*icW 20

另一种方法使用List.generate

var list = ['y', 'e', 's'];
var widgets = List.generate(list.length, (i) => Text(list[i]));
Run Code Online (Sandbox Code Playgroud)


Ams*_*nna 16

要访问索引,您需要使用asMap运算符将列表转换为地图。

final fruitList = ['apple', 'orange', 'mango'];
final fruitMap = myList.asMap(); // {0: 'apple', 1: 'orange', 2: 'mango'}

// To access 'orange' use the index 1.
final myFruit = fruitMap[1] // 'orange'

// To convert back to list
fruit fruitListAgain = fruitMap.values.toList();
Run Code Online (Sandbox Code Playgroud)

您的密码

userBoard.asMap().map((i, element) => MapEntry(i, Stack(
  GestureDetector(onTap: () {
    setState(() {
      // print("element=${element.toString()}");
      // print("element=${userBoard[i].toString()}");
    });
  }),
))).values.toList();
Run Code Online (Sandbox Code Playgroud)

  • 在 dart 发布集合包之后,这里的其他答案有一个更好的方法:/sf/answers/4785030351/ (5认同)

JT5*_*501 14

您可以使用asMap()和entries.map()来获取索引。

list.asMap().entries.map((e) {
      var index = e.key;
      var value = e.value;
      // ...
    }
Run Code Online (Sandbox Code Playgroud)


Mar*_*rcG 7

您可以简单地使用该mapIndexed方法:

userBoard.mapIndexed(
  (int index, element) => Container( ... ))
     .toList();
Run Code Online (Sandbox Code Playgroud)

这是 FIC 包的众多扩展之一:https : //pub.dev/packages/fast_immutable_collections


如果您不想将包添加到您的项目中,您可以复制扩展本身:

extension FicListExtension<T> on List<T> {

  /// Maps each element of the list.
  /// The [map] function gets both the original [item] and its [index].
  Iterable<E> mapIndexed<E>(E Function(int index, T item) map) sync* {
    for (var index = 0; index < length; index++) {
      yield map(index, this[index]);
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

注意:我是该软件包的作者之一。


更新:我现在已经删除了一些方法,比如Iterable.mapIndexed()FIC 包中,因为谷歌在他们的集合包中添加了一个类似的方法,我希望这两个包兼容。


Gün*_*uer 6

您可以使用list.asMap()

var result = list.asMap().map((e) => '${e[0]} - ${e[1]});
print(result);
Run Code Online (Sandbox Code Playgroud)

https://api.dartlang.org/stable/2.2.0/dart-core/List/asMap.html


小智 6

你可以试试这个

children: [
          for(int index = 0; index < list.length; index++)
            Text(list[index])
        ]
Run Code Online (Sandbox Code Playgroud)


gei*_*aos 6

Dart 发布了collection包含mapIndexed所有 Iterables 扩展的包。

import 'package:collection/collection.dart';

void main() {
  final fruitList = ['apple', 'orange', 'mango'];
  final withIndices = fruitList.mapIndexed((index, fruit) => "$index - $fruit");
  print(withIndices);
}
Run Code Online (Sandbox Code Playgroud)

飞镖板

该软件包带有各种方便的扩展和有用的工具来处理集合。

  • 这应该是新接受的答案。我喜欢总是必须阅读 Dart 相关问题的最新答案,因为团队不断快速地推动生活质量的改变。 (8认同)