如何解决无法将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),)
],);
},);
}
}
让我知道是否行不通..还有其他简单的方法。
,- 为您的
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.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()
。那应该做。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。