如何创建一个通用的自定义Flutter Widget，以渲染所提供的尽可能多的Children Widget

Question

我想呈现尽可能多的子项，以提供给我的自定义方法。所以，比方说，我想创建我自己的自定义小部件，它接受要渲染的动态数量的子对象。换句话说，我们也可以说，我想创建一个自定义的Row组件，该组件可以渲染我提供的尽可能多的子级。以下是我试图实现的一个例子：

我希望在我的main.dart中，我呈现这种自定义小部件，它在里面呈现许多子部件。我的想法是创建某种类似的小部件，返回一系列子部件，如下所示：

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

您可以通过在children参数中传递小部件列表来实现这一点。

import 'widgets/neo_text.dart';
class ScoreRow extends StatelessWidget {
final List<Widget> children;
const ScoreRow({super.key, required this.children});
@override
Widget build(BuildContext context) {
return (
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: children,
)
);

}
}

Answer 2

您需要首先为行定义一个高度，或者将其包装到扩展的小部件中，否则会出现错误。

final List<Widget> children;
const ScoreRow({super.key, required this.children});
@override
Widget build(BuildContext context) {
return SizedBox(
child: (
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: List.generate(children.length, (index) => children[index]),
)
),
);

}
}```