为什么 Row 小部件不接受列表？答案

【问题标题】：Why is Row widget not accepting a list?为什么 Row 小部件不接受列表？
【发布时间】：2021-10-11 05:26:30
【问题描述】：

我试图通过创建小部件列表并将该列表传递给行来显示图标列表。但 Row 小部件不接受该列表。

import 'package:flutter/material.dart';

void main() {
  runApp(Quizzler());
}

class Quizzler extends StatelessWidget {
  const Quizzler({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey.shade900,
        body: SafeArea(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            child: QuizPage(),
          ),
        ),
      ),
    );
  }
}

class QuizPage extends StatefulWidget {
  const QuizPage({Key? key}) : super(key: key);

  @override
  _QuizPageState createState() => _QuizPageState();
}

class _QuizPageState extends State<QuizPage> {
  List<Widget> scoreKeeper = [
    Icon(
      Icons.check,
      color: Colors.green,
    ),
    Icon(
      Icons.check,
      color: Colors.green,
    ),
    Icon(
      Icons.close,
      color: Colors.red,
    ),
    Icon(
      Icons.close,
      color: Colors.red,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(
          flex: 5,
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                'This is where the question text will go.',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 25.0,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: TextButton(
              style: TextButton.styleFrom(
                backgroundColor: Colors.green,
              ),
              onPressed: () {},
              child: Text(
                'TRUE',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: TextButton(
              style: TextButton.styleFrom(
                backgroundColor: Colors.red,
              ),
              onPressed: () {},
              child: Text(
                'FALSE',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                ),
              ),
            ),
          ),
        ),
        Row(
          children: [
            scoreKeeper,
          ],
        ),
      ],
    );
  }
}

当我尝试在 Row 的子项中指定 scoreKeeper 时出现错误。这就是错误的样子， 不能将元素类型“List”分配给列表类型“Widget”。

错误图片

【问题讨论】：

看起来不正确，但请尝试删除行中 scoreKeeper 周围的方括号。目前， scoreKeeper 必须是一个小部件，因为它已经在一个列表中。如果这个答案有效，请在下面勾选我的真实答案。

标签： android ios flutter dart widget

【解决方案1】：

删除行中scoreKeeper 周围的方括号。目前，scoreKeeper 必须是一个小部件，因为它已经在一个列表中。

【讨论】：

【解决方案2】：

在[] 内部，它需要孩子（单个小部件），但您传递的是孩子（多个）。可以通过以下方式解决：

                   Row(
                    children: scoreKeeper,
                  ),

                  Row(
                    children: [
                      ...scoreKeeper.toList(),
                    ],
                  ),

                  Row(
                    children: [
                      ...scoreKeeper.map((e) => e).toList(),
                    ],
                  ),

我更喜欢使用第一个或最后一个答案。它解决了你的问题吗？

【讨论】：