使用 listview.separated 时列表中重复相同的项目

Question

出于某种原因，我尝试使用 listView.separated 显示的列表重复了每个项目，如下面的屏幕截图所示：

预期的行为是使用分隔符仅显示每个项目一次，因此我选择了 listView.separated。

显示此列表的当前代码是：

Widget proTile(Pro pro, BuildContext context) {

        return ListView.separated(
          separatorBuilder: (pro, context) => Divider(
            color: Colors.black,
          ),
          shrinkWrap: true,
          physics: ScrollPhysics(),
          itemCount: pros.length,
          itemBuilder: (context, index) =>
          (GestureDetector(
          child: new Container(padding: EdgeInsets.all(10.0),
          child: new Row(
          children: <Widget>[
            _getProfilePic(pro),
            new Padding(
              padding: EdgeInsets.only(left: 9.0),
            ),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Text(
                    '${pro.fullname}',
                   style: new TextStyle(
                     fontSize: 16.0
                   ),
                  ),
                  new Padding(
                    padding: EdgeInsets.only(top:3.0),
                    child: new Text(
                    '${pro.company}',
                    style: new TextStyle(
                      fontSize: 12.0
                    ),
                  )
                  ),
                ],
              ),
            ),
            new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new StarRating(starCount: 5,rating: pro.rating,color: Colors.amber),
                new Padding(
                  padding: EdgeInsets.only(top: 3.0),
                  child: new Text(
                ('${pro.reviewCount} reviews'),
                style: new TextStyle(
                  fontSize: 12.0
                ),),
                ),
              ],
            ),
          ],
          ),
          ),
            // Go to the profile page of the pro
            onTap:()  => Navigator.push(context,
                MaterialPageRoute(builder: (context) => ProfilePage(pro, this.fireBaseUser, this.user))
            )
        )
          )
        );
      }

// Returns a list view of pro list tiles
  Widget buildProList(List<dynamic> pros, BuildContext context) {
    List<Widget> proTiles = new List<Widget>();

    pros.forEach((pro) {
      proTiles.add(proTile(pro, context));
    });

    return new ListView(
      children: proTiles
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: buildProList(pros, context),
    );
  }

正在此处寻求指导，了解问题所在以及适当的解决方案。

数据输出：

Answer 1

您可以只使用您的 proTile 方法，现在您正在为每个项目创建一个 ListView.separated，这是不正确的，尝试这些更改：

删除参数

 Widget proTile(BuildContext context) {

更改构建方法

 @override
 Widget build(BuildContext context) {
   return new Center(
     child: proTile(context),
   );
 }

在您的 proTile 方法中，不要使用粗箭头，因为您需要获取当前对象：

 itemBuilder: (context, index) {

      final pro = pros[index];
      return GestureDetector(
      child: new Container(padding: EdgeInsets.all(10.0),

       ...
  }

使用 listview.separated 时列表中重复相同的项目

Same item repeating in list while using listview.separated

listview

divider

flutter

flutter-layout