Dart中类似List.asMap().forEach()且可返回列表的替代方法是什么？

替代List.asMap().forEach()的方法 #

要同时获取列表的索引和元素，且返回可用于Column子组件的列表，有两种常用方法：

1. List.generate()
   直接通过列表长度生成元素，同时拿到索引和对应的值：

List.generate(words.length, (index) {
  final word = words[index];
  // 返回对应的Widget
})

2. asMap().entries.map()
asMap()返回索引到元素的映射，entries可获取每个键值对（索引+元素），再通过map转换为Widget列表：

words.asMap().entries.map((entry) {
  final index = entry.key;
  final word = entry.value;
  // 返回对应的Widget
}).toList()

原代码的其他问题修正 #

除了索引问题，原代码还有两处关键错误需要修复：

• EditWordWidget的word变量需设为final：StatefulWidget的成员变量不可直接修改，原代码中widget.word = value无效，应直接使用文本控制器的值返回。
• WordsWidget需改为StatefulWidget：修改列表后需要触发UI重建，StatelessWidget无法做到这一点。

修正后的完整代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: WordsWidget(
        words: ["apples", "oranges"])));
}

class EditWordWidget extends StatefulWidget {
  final String word; // 改为final
  EditWordWidget({super.key, required this.word});

  @override
  State<EditWordWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<EditWordWidget> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController(text: widget.word);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Edit Word')),
      body: Column(
        children: [
          Row(children: [
            const Text('Word: '),
            Container(
              width: 100,
              child: TextField(
                controller: _controller,
                // 移除无效的widget.word赋值
              ),
            ),
          ]),
          ElevatedButton(
            onPressed: () {
              // 直接返回控制器的文本值
              Navigator.pop(context, _controller.text);
            },
            child: const Text('Done'),
          )
        ]
      ),
    );
  }
}

class WordsWidget extends StatefulWidget {
  final List<String> words;
  WordsWidget({Key? key, required this.words}) : super(key: key);

  @override
  State<WordsWidget> createState() => _WordsWidgetState();
}

class _WordsWidgetState extends State<WordsWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Words')),
      body: Center(
        child: Column(
          children: widget.words.asMap().entries.map((entry) {
            final index = entry.key;
            final word = entry.value;
            return Row(
              children: [
                Text('${word}   '),
                ElevatedButton(
                  onPressed: () async {
                    final newWord = await Navigator.push(
                      context,
                      MaterialPageRoute(builder:
                          (context) => EditWordWidget(word: word)),
                    );
                    if (newWord != null) {
                      setState(() {
                        // 通过索引修改原列表
                        widget.words[index] = newWord;
                      });
                    }
                  },
                  child: const Text('Edit'),
                ),
              ],
            );
          }).toList(),
        ),
      ),
    );
  }
}

关键说明 #

• 使用asMap().entries.map()获取每个元素的索引，修改列表时通过索引直接更新原数据，再调用setState()触发UI重建。
• EditWordWidget不再修改widget.word，直接返回文本控制器的内容，符合StatefulWidget的设计规范。

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