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

Question

我想用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;
}
}

Answer 1

1. 使用build-in Column widget并像类似的小部件一样实例化它：Column()、Text()等，而不是扩展类。请参阅此处的官方dart文档，了解如何正确使用extends关键字。

2. 您不能只向Scaffold的body添加多个小部件，因为它是expects a single widget(例如，列、文本或容器(。

3. 您可以使用自定义小部件MyCustomColumn来配置列(请参阅下面的代码(，但也可以简单地将列添加到正文中，并将List.generate方法传递给其子属性。

下面是一个代码示例：

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);}
),
);
}
}