Flutter 自定义小部件无法显示答案

【问题标题】：Flutter custom widget fails to displayFlutter 自定义小部件无法显示
【发布时间】：2020-09-18 19:04:39
【问题描述】：

我是 Flutter 和 Dart 的新手，我正在尝试创建一个基于手势检测器类。我的容器代码如下所示：

class CustomWidget extends GestureDetector
{
   final aTitle;

   CustomWidget(this.aTitle)
   {
     onTap() {
       print("$aTitle was pressed!");
     }

     child: new Container(
       padding: const EdgeInsets.all(8),
       child: Text(aTitle),
       color: Colors.blueGrey[200],
     );
   }
}

我正在尝试在我的应用程序小部件主体中使用以下代码在我的主应用程序屏幕中显示此小部件：

  body: CustomScrollView(
    primary: false,
    slivers: <Widget>[
      SliverPadding(
        padding: const EdgeInsets.all(20),
        sliver: SliverGrid.count(
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          crossAxisCount: 2,
          children: <Widget>[
            CustomWidget('Test Display'),
          ],
        ),
      ),
    ],
  ),

我似乎有两个问题：（1）我的开发环境告诉我我的 onTap() 方法是“未使用”，表明它不会捕获点击事件，并且（2）这似乎并不重要，因为我是 CustomWidget 实例在应用小部件中创建没有出现在我的屏幕上。

我显然遗漏了一些东西。有人可以帮我更正我的代码，以便显示和处理我的自定义小部件 onTap 事件？

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

一般来说，CustomWidget 是个好主意，但继承是错误的实现。 Flutter 强烈支持组合而不是继承。

您使用组合的自定义小部件：

class CustomWidget extends StatelessWidget {
  final String title;
  
  const CustomWidget(this.title);
  
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
       print("$title was pressed!");
      },
     child: new Container(
       padding: const EdgeInsets.all(8),
       child: Text(title),
       color: Colors.blueGrey[200],
     ));
  }
}

【讨论】：