Widget Classes Arguments 如何作为道具在 Flutter 中创建具有行和列的动态 Widget？

Question

在使用 React 一段时间后，我正在重新审视 Flutter 开发，并且我试图实现一些东西作为跨多个组件传递道具，以便创建基于道具呈现的动态小部件（组件）。 我可以以某种方式达到结果，但我仍然无法理解。

因此，在此示例中，我正在创建一个小部件 Class，它接受文本作为参数，并且我能够在 Text 返回方法中使用以下文本的值：

class NeoText extends StatelessWidget {
  final String text;

  const NeoText({ 
    super. Key,
    required this.text,
  });

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: const TextStyle(
        color: Colors.white,
        fontSize: 15.0,
        fontWeight: FontWeight.bold,
        letterSpacing: 1.0,
        fontFamily: 'Lato',
      ),
    );
  }
}

我可以使用在main.dart文件中创建的 Widget（组件），例如：

...
...
    child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: const [
                  NeoText(
                    text: "⚽️Goals: 2",
                  ),
                  NeoText(
                    text: "🅰️Assists: 6",
                  ),
                  NeoText(
                    text: "🧤Saves: 26",
                  ),
                ],
              ),
...
...

但是当我想创建一个更复杂的自定义小部件来接受多个孩子和其他 arguments 时，我似乎无法让它工作。

这是一个例子。 我正在创建这个 CustomCard 小部件，它的结构中可以有多个小部件，包括一个文本小部件。 现在我在这里做同样的事情，我正在创建一个名为 title 的变量，并尝试在 Text Widget 中传递它，所以当我在我的main.dart文件中使用这个组件时，我可以提供标题名称并使卡片不同从其他卡。 但是在 Text 的返回方法上我得到一个错误（附在下面的代码之后）：

import 'package:flutter/material.dart';

class CustomCard extends StatelessWidget {
  final String? title;

  const CustomCard({super.key, @required this.title});

  @override
  Widget build(BuildContext context) {
    // Material is a conceptual piece
    // of paper on which the UI appears.
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(3.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Icon(
              Icons.sports_soccer,
              color: Colors.black,
              size: 50.0,
            ),
            SizedBox(
              height: 8.0,
            ),
            Text(
              title!,
              style: TextStyle(
                color: Colors.black,
                fontSize: 15.0,
                fontWeight: FontWeight.bold,
                letterSpacing: 1.0,
                fontFamily: 'Lato',
              ),
            ),
            SizedBox(
              height: 8.0,
            ),
            Text(
              '26',
              style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold,
                fontSize: 15.0,
                letterSpacing: 1.0,
                fontFamily: 'Lato',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

我现在想知道，考虑到第一个示例按我想要的方式工作，为什么这不起作用。

我还面临的另一个挑战是，为我的 Costum Method 提供尽可能多的孩子。 因此，可以说，我想创建自己的自定义小部件，它接受动态数量的子级进行渲染。 换句话说，我们也可以说，我想创建一个自定义的 Row 组件，它可以呈现我提供的尽可能多的子组件。 这是我想要实现的一个示例：

我希望在我的主中渲染这种自定义小部件，在其中渲染许多子小部件：

              children: [
                  NeoText(
                    text: "⚽️Goals: 2",
                  ),
                  NeoText(
                    text: "🅰️Assists: 6",
                  ),
                  NeoText(
                    text: "🧤Saves: 26",
                  ),
                ],
              ),
            ),

我想让 ScoreRow 小部件成为一个自定义小部件，它接受其中的多个子级并呈现与下面示例中提供的一样多的子级。 有可能做这样的事情吗？ 或者有什么我需要介绍的概念吗？

import 'widgets/neo_text.dart';

class ScoreRow extends StatelessWidget {
  final Widget? children;

  const ScoreRow({super.key, required this.children});

  @override
  Widget build(BuildContext context) {
    return (
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [children!],
          // add the children here
      )
    );
     
  }
}```

Answer 1

尝试删除const关键字

 Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [

这个：

Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [

为了拥有一个compile-time时常量的小部件，它的所有属性也应该是编译时常量。