如何使用基于内置小部件的自定义小部件？答案

【问题标题】：How to use a custom widget based on build-in widgets?如何使用基于内置小部件的自定义小部件？
【发布时间】：2022-01-03 18:59:33
【问题描述】：

我想用 MyContainer 小部件填充脚手架主体内的列，但我无法访问子小部件中父小部件的属性。 MyContainer 类工作正常，但使用 MyColumn 小部件却不行。

这是我的代码：

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Title(
              color: const Color(0xFFFFFFFF),
              child: const Text("Hello World App")),
        ),
        body: MyColumn(),
      ),
    );
  }
}

class MyContainer extends Container {
  late int numbr;
  MyContainer(numbr) {
    this.numbr = numbr;
  }

  @override
  // TODO: implement color
  Color? get color => Colors.blue;
  @override
  // TODO: implement child
  Widget? get child => Center(
        child: Text("Container $numbr",
            style: TextStyle(
                fontSize: 34, fontFamily: "Cursive", color: Colors.white)),
      );
}

class MyColumn extends Column {
  @override
  // TODO: implement children
  List<Widget> get children {
    for (int i = 1; i < 11; i++) {
      this.children.add(MyContainer(i));
    }
    return this.children;
  }
}

【问题讨论】：

将值传递给子小部件不是这里的问题，所以我建议进行编辑。向下传递数据可以通过如下构造函数实现：stackoverflow.com/a/50818870/15117201

标签： flutter widget

【解决方案1】：

使用build-in Column widget 并像类似的小部件一样实例化它：Column()、Text() 等，而不是扩展类。请参考官方dart文档here，了解如何正确使用extends关键字。
您不能只将多个小部件添加到 Scaffold 的 body，因为它是 expects a single widget（例如，列、文本或容器）。
您可以使用自定义小部件MyCustomColumn 来配置您的列（参见下面的代码），但您也可以简单地向正文添加一列并将List.generate 方法传递给它的children 属性。

这是一个代码示例：

class MyCustomColumn extends StatelessWidget {
  const MyCustomColumn ({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(children: List.generate(11, (index) {
      return MyContainer(i);}
      ),
    );
  }
}

【讨论】：