如何在 Flutter 中创建动态 ListView？答案

【问题标题】：How to create a dynamic ListView in Flutter?如何在 Flutter 中创建动态 ListView？
【发布时间】：2019-11-17 07:17:18
【问题描述】：

我正在尝试使用 TileList 传递给 ListView.Builder 但收到错误：错误：参数类型“（BuildContext，int，Items）→Card”无法分配给参数类型“（BuildContext，int）→小部件'。 (argument_type_not_assignable)。

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

import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:app_settings/app_settings.dart';
import 'package:coffee/models/settings_items.dart';

class Selections extends StatefulWidget {

  @override
  State<Selections> createState() => _Selections();
  final List<String> menu;
  Selections(this.menu);

}

class _Selections extends State<Selections> {

  List items;

  @override
  void initState() {
    items = getItems();
    super.initState();
  }

 Card _makeCard(BuildContext context, int index, Items item) {
    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),
      ),
    );
  }


  ListTile _buildMenu(BuildContext context, int index, Items item) {
  return ListTile(
      contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
      leading: Container(
        padding: EdgeInsets.only(right: 12.0),
        decoration: new BoxDecoration(
          border: new Border(
            right: new BorderSide(width: 1.0, color: Colors.blue),
          ),
        ),
        child: Icon(
          Icons.location_on,
          color: Colors.redAccent,
        ),
      ),
      title: Text(
        item.title,
        style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
      ),
      onTap: () {
        AppSettings.openLocationSettings();
      },
    );
}

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView.builder(
          itemBuilder: _makeCard,
          itemCount: 2,
          scrollDirection: Axis.vertical,
          shrinkWrap: true),
    );
  }

  List getItems() {
    return [
      Items(
          title: "Turn on Location Services!"
      ),
      Items(
          title: "My Profile"
      ),
    ];
  }


}

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

【问题讨论】：

这个问题你解决了吗，能否分享一下代码

标签： flutter dart

【解决方案1】：

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

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() 中，使用higher order function 作为itemBuilder 参数，以便函数参数匹配：

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

【讨论】：