无法将onTap字段传递给无状态小部件

问题描述

在网格视图中，由于我有相似的卡片项目，因此我决定创建一个包含每个卡片项目的自定义小部件。定制窗口小部件是无状态窗口小部件。我遇到的问题是将onTap属性传递给该类。实际上，我确实通过并且没有错误，但是onTap属性无法正确传播，并且不会显示我想要的SnackBar。这是代码：

import 'package:Flutter/material.dart';

const _padding = EdgeInsets.all(8.0);
const _splashColor = Colors.Amber;

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Main Page'),),drawer: Drawer(
        elevation: 8.0,child: Column(
            mainAxisAlignment: MainAxisAlignment.start,children: [
           DrawerHeader(
              child: Column(
                children: [
                  Image(image: Assetimage('assets/images/top_picture.png'),fit: BoxFit.scaleDown,width: 100,height: 100),Text('Home',style: Theme.of(context).textTheme.headline6)
                ],)),ListTile(leading: Icon(Icons.settings),title: Text('Settings')),ListTile(leading: Icon(Icons.exit_to_app),title: Text('Quit')),AboutListTile(icon: Icon(Icons.info),aboutBoxChildren: [Text('copyright (C) 2020'),Text('Design And Programming: me')],)
        ],body: HomeScreenBody(),);
  }
}



class HomeScreenBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

      return Padding (
            padding: const EdgeInsets.all(8.0),child: GridView (
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),children: [
                ItemCard(title: 'Balance',icon: 'assets/images/coins-balance.png',onTap: _comingSoon),ItemCard(title: 'Add Funds',icon: 'assets/images/add-money.png',onTap: _comingSoon,ItemCard(title: 'Restaurant',icon: 'assets/images/restaurant.png',],);
  }

  void _comingSoon(BuildContext context) {
    print('Showing snackbar...');
    final snack = SnackBar(content: Text('Coming soon...'));
    Scaffold.of(context).showSnackBar(snack);
  }
}



class ItemCard extends StatelessWidget{
  final String icon;

  final String title;

  final ValueChanged<BuildContext> onTap;

  const ItemCard({this.title,this.icon,this.onTap});

  @override
  Widget build(BuildContext context){
    return Builder(builder:(context) {
      return  Card(
        child: InkWell(
          splashColor: _splashColor,onTap: ()=> this.onTap,child: Column (
            mainAxisAlignment: MainAxisAlignment.center,children: [
              Image(image: Image.asset(this.icon).image,Padding(
                padding: _padding,child: Text(this.title),)
            ],);
    },);
  }
}

我尝试将onTap字段的类型更改为ValueChanged，ValueChanged，ValueChanged

解决方法

尝试一下

class ItemCard extends StatelessWidget{
  final String icon;

  final String title;

  final void Function(BuildContext) onTap; //your function expects a context

  const ItemCard({this.title,this.icon,this.onTap});

  @override
  Widget build(BuildContext context){
    return Builder(builder:(ctx) { //changed to ctx so that contexts don't clash
      return  Card(
        child: InkWell(
          splashColor: _splashColor,onTap: ()=> this.onTap(context),//pass context here
          child: Column (
            mainAxisAlignment: MainAxisAlignment.center,children: [
              Image(image: Image.asset(this.icon).image,),Padding(
                padding: _padding,child: Text(this.title),)
            ],);
    },);
  }
}

让我知道是否行不通..还有其他简单的方法。

,

1. 为您的cat('list(list(a = "1909",v = "No sign",ved = "11"),list(a = "1908",v = "Yes sign",ved = "11"))') 变量使用VoidCallback。
2. 用onTap小部件包裹HomeScreen小部件树，以便在Builder中使用的context可用。

我以您的代码为例添加了一个演示：

---

这有效：

SnackBar

class ItemCard extends StatelessWidget{
  final String icon;

  final String title;

  final VoidCallback onTap; // use a VoidCallback instead

  const ItemCard({this.title,this.onTap});

  @override
  Widget build(BuildContext context){
    return Builder(builder:(context) {
      return  Card(
        child: InkWell(
          splashColor: _splashColor,onTap: onTap,// assign the onTap property
          child: Column (
            mainAxisAlignment: MainAxisAlignment.center,);
  }

,

将小部件的onTap参数更改为final Function(BuildContext)，然后在onTap:中将()=> this.onTap更改为onTap()。那应该做。