[英]Is there any way I could map Routes in Flutter?
I tried creating a list of items to map out on my app, and I tried inserting a named route to each item for it's page destination.我尝试创建一个要在我的应用程序上映射的项目列表,并尝试为每个项目插入一个命名路由作为页面目标。 And when I tried to use Navigator.pushNamed(context, listName.elementAt(index)['destination'] on to the onTap property of the GestureDetector, it shows an error that 'index' is not defined. Any tips or is there something I should know since I'm new here? Thanks.
当我尝试在 GestureDetector 的 onTap 属性上使用 Navigator.pushNamed(context, listName.elementAt(index)['destination'] 时,它显示一个错误,即“index”未定义。任何提示或有什么我应该知道,因为我是新来的?谢谢。
import 'package:egarment2/pages/master_menu/input_raw.dart';
import 'package:flutter/material.dart';
class FeatureCard extends StatefulWidget {
const FeatureCard(
{Key? key,
// required this.featureDestination //add props, different image every call
})
: super(key: key);
// final Widget featureDestination;
@override
State<FeatureCard> createState() => _FeatureCardState();
}
class _FeatureCardState extends State<FeatureCard> {
final List<Map<String, dynamic>> masterMap = [
{'image': 'assets/images/raw.png', 'title': 'Input Raw', 'destination': InputRaw.id},
{'image': 'assets/images/supplier.png', 'title': 'Input Supplier', 'destination': InputRaw()},
{'image': 'assets/images/cmt.png', 'title': 'Input CMT', 'destination': InputRaw()},
{'image': 'assets/images/pola.png', 'title': 'Input Pola', 'destination': InputRaw()},
{'image': 'assets/images/outlet.png', 'title': 'Input Outlet', 'destination': InputRaw()},
{'image': 'assets/images/product.png', 'title': 'Input Produk', 'destination': InputRaw()},
{'image': 'assets/images/material.png', 'title': 'Input Jenis Material', 'destination': InputRaw()},
{'image': 'assets/images/warna.png', 'title': 'Input Warna', 'destination': InputRaw()},
{'image': 'assets/images/qr.png', 'title': 'Input by QR', 'destination': InputRaw()},
{'image': 'assets/images/acc.png', 'title': 'Accessories', 'destination': InputRaw()},
{'image': 'assets/images/tools.png', 'title': 'Tools & Equipment', 'destination': InputRaw()},
{'image': 'assets/images/adjustment.png', 'title': 'Adjustments', 'destination': InputRaw()},
{'image': 'assets/images/stock.png', 'title': 'Stock Opname', 'destination': InputRaw()},
];
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
Navigator.pushNamed(context, masterMap.elementAt(index)['destination']);
},
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 12.0,
mainAxisSpacing: 12.0,
),
itemCount: masterMap.length,
itemBuilder: (_, index) {
return Padding(
padding: const EdgeInsets.only(top: 40),
child: Container(
height: 175,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
),
child: Image.asset(
'${masterMap.elementAt(index)['image']}'), // dynamic image
),
Text(
'${masterMap.elementAt(index)['title']}',
style: TextStyle(
fontFamily: 'Quicksand',
),
),
],
),
),
);
},
));
}
}
Something looks strange in your snippet, check my last line that's how i use it itemBuilder: (BuildContext context, int index)
您的代码段中有些东西看起来很奇怪,请检查我的最后一行,这就是我使用它的
itemBuilder: (BuildContext context, int index)
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 12.0,
mainAxisSpacing: 12.0,
),
itemCount: masterMap.length,
itemBuilder: (BuildContext context, int index) {
Besides your gesture detector is not on the builder so yes index is not well defined here.此外,您的手势检测器不在构建器上,因此是的,此处未明确定义索引。 May i suggest you to add
InkWell
on Padding element like below to get the index in onTap
.我可以建议您像下面这样在 Padding 元素上添加
InkWell
以获取onTap
中的索引。
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 12.0,
mainAxisSpacing: 12.0,
),
itemCount: masterMap.length,
itemBuilder: (_, index) {
return InkWell(
onTap: (){
Navigator.pushNamed(context, masterMap.elementAt(index)['destination']);
},
Padding(
padding: const EdgeInsets.only(top: 40),
child: Container(
height: 175,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
),
...
)
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.