Flutter:当我使用卡片小部件时,我如何添加onPressed命令?



我想引导触摸卡片的人到不同的页面。我不能使用onPressed命令。如。当我点击"做卡片"时,我想要导航到不同的页面。

SizedBox(
width:160.0,
height: 150.0,
child: Card(
color: Color.fromARGB(255,21, 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
),
),

],
),
)
),
),
),

如果你想在按下的地方产生飞溅效果,可以使用InkWell来替代gestredetector。

像这样:

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,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.push(context,MaterialPageRoute(builder: (context)=> Start()));
},

child: Card(
color: Color.fromARGB(255,21, 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/note.png",width: 64.0,),
SizedBox(
height: 10.0,
),
Text(
"Notes",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20.0
),
),

],
),
)
),
),),
), 

最新更新