![](/img/trans.png)
[英]is there any way i could change background color using tween when i press a button flutter
[英]Is there any way I could map Routes in Flutter?
我嘗試創建一個要在我的應用程序上映射的項目列表,並嘗試為每個項目插入一個命名路由作為頁面目標。 當我嘗試在 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',
),
),
],
),
),
);
},
));
}
}
您的代碼段中有些東西看起來很奇怪,請檢查我的最后一行,這就是我使用它的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) {
此外,您的手勢檢測器不在構建器上,因此是的,此處未明確定義索引。 我可以建議您像下面這樣在 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.