如何將 listView.builder 索引傳遞給 flutter 中的自定義小部件的參數

Question

我想創建一個自定義小部件，它將采用 listview.builder 並返回一個項目列表，但是當我在另一個 dart 文件中訪問它時，我無法將索引傳遞給自定義小部件的參數，它會拋出 'index' not defined 。

這是我的 listView.builder，我很想像這樣將products[index]['name']傳遞給ProductContainer(products[index]['name']) ......但它拋出 index not defined 錯誤請幫助

 import 'package:flutter/material.dart'; class ProductContainer extends StatefulWidget { final String image; final String name; final String price; final String tag; final Text text; final double height; final double width; ProductContainer({ Key key, this.image, this.name, this.price, this.tag, this.text, this.height, this.width, }): super(key: key); @override _ProductContainerState createState() => _ProductContainerState(); } class _ProductContainerState extends State<ProductContainer> { var products = [ { "price": " 100", "imageLink": "images/fs.jpg", "tag": "one", "name": "prod1", "category": "combo", }]; @override Widget build(BuildContext context) { return SizedBox( height: 150, child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: products.length, itemBuilder: (context, index) { return Column( children: [ forProducts( height: 120, width: 120, image: image?? image[index]['imageLink'], tag: products[index]['tag'], name: products[index]['name'], category: products[index]["category"], price: products[index]["price"], context: context), ], ); }, ), ); } } Widget forProducts( {String image = "images/", @required String tag, @required String name, @required String category, @required String price, @required double height, @required double width, @required BuildContext context}) { return Column(children: [ Material( child: Hero( tag: tag, child: GestureDetector( onTap: () { Navigator.push( context, MaterialPageRoute( builder: (context) => InfoPage( image: image, tag: tag, name: name, category: category, price: price, ))); }, child: Container( padding: EdgeInsets.all(2), margin: EdgeInsets.all(5), height: 120, width: 120, decoration: BoxDecoration( borderRadius: BorderRadius.circular(20), image: DecorationImage( fit: BoxFit.cover, image: AssetImage(image)), ), ), ))), Expanded(child: Text(name)), ]); }

Answer 1

這對我有用，我犯的錯誤是我沒有在 dart 文件中定義我的列表產品，無論我在哪里使用這個 ProductContainer 小部件，而且除非作為正確的實例成員傳遞，否則它不會采用索引，所以它應該像widget.products[index]和products[index]不同，因為 products 沒有定義在您將使用小部件的任何地方。 下面是正確的工作代碼。

 import 'package:my_Ecomm/screens/info_page.dart'; import 'package:flutter/material.dart'; class ProductContainer extends StatefulWidget { final List products; final double height; final double width; //final dynamic index; // you can use it like this also to pass index const ProductContainer({ Key key, this.products, this.height, //this.index, this.width, }): super(key: key); @override _ProductContainerState createState() => _ProductContainerState(); } class _ProductContainerState extends State<ProductContainer> { @override Widget build(BuildContext context) { return Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ SizedBox( height: widget.height + 45, child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: widget.products.length, itemBuilder: (context, index) { return forProducts( height: widget.height, width: widget.width, image: widget.products[index]['imageLink'], tag: widget.products[index]['tag'], name: widget.products[index]['name'], category: widget.products[index]["category"], price: widget.products[index]["price"], context: context); }, ), ), ], ); } } Widget forProducts( {String image = "images/", @required String tag, @required String name, @required String category, @required String price, @required double height, @required double width, @required BuildContext context}) { return Column(children: [ Material( child: Hero( tag: tag, child: GestureDetector( onTap: () { Navigator.push( context, MaterialPageRoute( builder: (context) => InfoPage( image: image, tag: tag, name: name, category: category, price: price, ))); }, child: Container( padding: EdgeInsets.all(2), margin: EdgeInsets.all(5), height: height, width: width, decoration: BoxDecoration( borderRadius: BorderRadius.circular(20), image: DecorationImage( fit: BoxFit.cover, image: AssetImage(image)), ), ), ))), Expanded(child: Text(name)), ]); }