Flutter自定义Row/Column子类调用后无内容显示问题排查

你的代码核心问题是错误地在构造函数体内使用标签语法尝试给父类（Row/Column）的属性赋值，这种写法完全无效，导致Row和Column没有接收到children参数，自然不会渲染任何内容。

具体错误点： #

• 你在CharBoxRow和CharStackColumn的构造函数体里写的mainAxisAlignment: MainAxisAlignment.center;、children: listOfChildren;是Dart的标签语句（仅用于给代码块打标记，和Widget的参数传递无关），根本没有把这些值传递给父类的构造函数。
• 继承Row/Column时，必须通过super()调用父类构造函数，并把所需参数传递进去，而不是在构造函数体里做这些操作。

修复后的代码： #

class CharBox extends StatelessWidget {
  final String theChar;
  const CharBox({required this.theChar, super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(3.0),
      decoration: BoxDecoration(
        border: Border.all(color: Theme.of(context).colorScheme.onPrimary),
      ),
      child: Text(theChar),
    );
  }
}

class CharBoxRow extends Row {
  // 通过初始化列表调用父类构造函数，直接传递参数
  CharBoxRow(List<String> rowOfChars, {super.key})
      : super(
          mainAxisAlignment: MainAxisAlignment.center,
          children: rowOfChars.map((char) => CharBox(theChar: char)).toList(),
        );
}

class CharStackColumn extends Column {
  CharStackColumn(List<String> alphabet, {super.key})
      : super(
          mainAxisAlignment: MainAxisAlignment.center,
          children: _buildRows(alphabet),
        );

  // 把行的构建逻辑抽成静态方法，代码更清晰
  static List<CharBoxRow> _buildRows(List<String> alphabet) {
    List<CharBoxRow> lines = [];
    for (int i = 0; i < alphabet.length; ++i) {
      List<String> holder = [];
      for (int z = alphabet.length - i; z < alphabet.length; ++z) {
        holder.add(alphabet[z]);
      }
      for (int j = i; j < alphabet.length; ++j) {
        holder.add(alphabet[j]);
      }
      lines.add(CharBoxRow(holder));
    }
    return lines;
  }
}

修复说明： #

1. 用初始化列表（构造函数参数后的:）调用super()，直接把children、mainAxisAlignment等参数传递给父类Row/Column的构造函数，让父类能正确接收并使用这些参数渲染内容。
2. 把行的构建逻辑抽成静态方法_buildRows，让构造函数更简洁，可读性更高。
3. 用map替代手动循环创建CharBox，代码更简洁高效。

现在调用CharStackColumn(alphabet)就能正常显示内容了。

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