如何创建可渲染任意数量子组件的通用自定义Flutter Widget

你的问题出在children参数的类型定义上：当前代码里children是单个Widget?类型，只能接收一个子组件，自然没法处理多个NeoText。要实现类似Row的多子组件支持，只需要把参数类型改成List<Widget>即可，具体修改步骤如下：

修正后的ScoreRow代码 #

import 'package:flutter/material.dart';
import 'widgets/neo_text.dart';

class ScoreRow extends StatelessWidget {
  // 把单个Widget改成Widget列表类型
  final List<Widget> children;

  // 构造函数接收列表类型的children
  const ScoreRow({super.key, required this.children});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      // 直接传入整个children列表，不用再包一层[]
      children: children,
    );
  }
}

可选优化：支持空子组件列表 #

如果想允许ScoreRow不传入任何子组件，可以给children加默认值：

const ScoreRow({super.key, this.children = const []});

使用示例（main.dart中） #

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

相关概念说明 #

这是Flutter布局组件的标准设计模式：通过List<Widget>类型的参数接收多个子元素，Row、Column、Stack等系统组件都是这么实现的。只要掌握组件的子元素列表传递这个基础点，就能轻松封装这类自定义布局组件。

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