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

Question

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

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'。

错误图片

Answer 1

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

Answer 2

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

                   Row(
                    children: scoreKeeper,
                  ),

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

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

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

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

Why is Row widget not accepting a list?

android

widget

ios

dart

flutter