如何在Flutter中创建动态ListView？

Question

我尝试使用传递到 ListView.Builder 的 TileList 但收到错误：错误：参数类型 \'(BuildContext, int, Items) \xe2\x86\x92 Card\' 无法分配给参数类型 \' (BuildContext, int) \xe2\x86\x92 小部件\'。（参数类型不可分配）。

\n\n

我已将 _makeCard 和 _makeTyle 定义为小部件，但没有成功。

\n\n

import \'package:flutter/material.dart\';\nimport \'package:flutter/painting.dart\';\nimport \'package:app_settings/app_settings.dart\';\nimport \'package:coffee/models/settings_items.dart\';\n\nclass Selections extends StatefulWidget {\n\n  @override\n  State<Selections> createState() => _Selections();\n  final List<String> menu;\n  Selections(this.menu);\n\n}\n\nclass _Selections extends State<Selections> {\n\n  List items;\n\n  @override\n  void initState() {\n    items = getItems();\n    super.initState();\n  }\n\n Card _makeCard(BuildContext context, int index, Items item) {\n    return Card(\n      elevation: 8.0,\n      margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),\n      child: Container(\n        decoration: BoxDecoration(color: Color.fromRGBO(64, 75, 96, .0)),\n        child: _buildMenu(context, index, item),\n      ),\n    );\n  }\n\n\n  ListTile _buildMenu(BuildContext context, int index, Items item) {\n  return ListTile(\n      contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),\n      leading: Container(\n        padding: EdgeInsets.only(right: 12.0),\n        decoration: new BoxDecoration(\n          border: new Border(\n            right: new BorderSide(width: 1.0, color: Colors.blue),\n          ),\n        ),\n        child: Icon(\n          Icons.location_on,\n          color: Colors.redAccent,\n        ),\n      ),\n      title: Text(\n        item.title,\n        style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),\n      ),\n      onTap: () {\n        AppSettings.openLocationSettings();\n      },\n    );\n}\n\n  @override\n  Widget build(BuildContext context) {\n    return Container(\n      child: ListView.builder(\n          itemBuilder: _makeCard,\n          itemCount: 2,\n          scrollDirection: Axis.vertical,\n          shrinkWrap: true),\n    );\n  }\n\n  List getItems() {\n    return [\n      Items(\n          title: "Turn on Location Services!"\n      ),\n      Items(\n          title: "My Profile"\n      ),\n    ];\n  }\n\n\n}\n

\n\n

将显示两个列表TIle：一个带有文本“打开定位服务”，另一个带有“我的个人资料”。

\n

Answer 1

删除 items 参数_makeCard并在函数中检索它：

Card _makeCard(BuildContext context, int index) {
  Items item = items[index];
  return Card(
    elevation: 8.0,
    margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
    child: Container(
      decoration: BoxDecoration(color: Color.fromRGBO(64, 75, 96, .0)),
      child: _buildMenu(context, index, item),
    ),
  );
}

或者

对参数build()使用高阶函数itemBuilder，以便函数参数匹配：

return Container(
  child: ListView.builder(
    itemBuilder: (context, index) => _makeCard(context, index, items[index]),
    itemCount: 2,
    scrollDirection: Axis.vertical,
    shrinkWrap: true),
);