时间戳

首页 > 解决方案 > Flutter 自定义小部件无法显示

flutter - Flutter 自定义小部件无法显示

问题描述

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

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 事件吗？

标签： flutterdartflutter-layout

解决方案

一般来说，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],
     ));
  }
}

推荐阅读