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

Question

我想用我的 MyContainer 小部件填充我的脚手架体内的一列，但我无法访问子小部件中父小部件的属性。 MyContainer class 工作正常，但使用 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;
  }
}

Answer 1

使用 build-in Column widget 并像类似的小部件一样实例化它：Column()、Text() 等，而不是扩展 class。请参考 dart 官方文档here，了解如何正确使用 extends 关键字。
您不能只将多个小部件添加到脚手架的 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);}
      ),
    );
  }
}

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

How to use a custom widget based on build-in widgets?

widget

flutter