Question

在网格视图中，由于我有相似的卡片项目，因此我决定创建一个包含每个卡片项目的自定义小部件。定制窗口小部件是无状态窗口小部件。我遇到的问题是将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', onTap: _comingSoon),
              ],
            ),
          );
  }

  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

Answer 1

尝试一下

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

    );
  }
}

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

Answer 2

为您的cat('list(list(a = "1909", v = "No sign", ved = "11"), list(a = "1908", v = "Yes sign", ved = "11"))')变量使用VoidCallback。
用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.icon, 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,
            children: [
              Image(image: Image.asset(this.icon).image, ),
              Padding(
                padding: _padding,
                child: Text(this.title),
              )
            ],
          ),
        ),
      );
    },

    );
  }

Answer 3

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

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

3 个答案: