Flutter：当我使用卡片小部件时如何添加 onPressed 命令？

问题描述

我想将触摸卡片的人引导至其他页面。 我不能使用 onpressed 命令。例如。当我点击“待办事项卡”时，我想导航不同的页面。

               SizedBox(
                  width:160.0,height: 150.0,child: Card(

                    color: Color.fromARGB(255,21,21),elevation: 2.0,shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20.0)
                    ),child:Center(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),child: Column(
                        children: <Widget>[
                          Image.asset("assets/images/todo.png",width: 64.0,),SizedBox(
                            height: 10.0,Text(
                            "Todo List",style: TextStyle(
                              color: Colors.white,fontWeight: FontWeight.bold,fontSize: 20.0
                            ),],)
                    ),

解决方法

GestureDetector 的替代方法是使用 InkWell，如果您想在按下的位置获得一些飞溅效果。

像这样：

              SizedBox(
                width: 160.0,height: 150.0,child: InkWell(
                  onTap: () => Navigator.pushNamed(context,'/secondPage'),child: Card(
                      //
                      // All your card information
                      //
                  ),),

,

你可以用手势检测器包裹你的卡片，并像这样在它的 onTap 方法中进行导航

child: GestureDetector(
        onTap: () {
          Navigator.pushNamed(context,'/secondPage')
        },child: Card(
                    color: Color.fromARGB(255,21,21),elevation: 2.0,shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20.0)
                    ),child:Center(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),child: Column(
                        children: <Widget>[
                          Image.asset("assets/images/todo.png",width: 64.0,SizedBox(
                            height: 10.0,Text(
                            "Todo List",style: TextStyle(
                              color: Colors.white,fontWeight: FontWeight.bold,fontSize: 20.0
                            ),],)
                    ),

,

这个问题在我使用“GestureDetector”或“Inkwell”时得到解决。这是一个答案。

               SizedBox(
                  width:160.0,child: InkWell(
    onTap: () {
      Navigator.push(context,MaterialPageRoute(builder: (context)=> Start()));
    },child: Card(

                    color: Color.fromARGB(255,shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)
                    ),child:Center(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),child: Column(
                            children: <Widget>[
                              Image.asset("assets/images/note.png",SizedBox(
                                height: 10.0,Text(
                                "Notes",style: TextStyle(
                                    color: Colors.white,fontSize: 20.0
                                ),