Тот же элемент повторяется в списке при использовании listview.separated - PullRequest
Новая
       19

Тот же элемент повторяется в списке при использовании listview.separated

0 голосов
/ 03 декабря 2018

По какой-то причине список, который я пытаюсь отобразить с помощью listView.separated, повторяет каждый элемент, как показано на скриншоте ниже:

enter image description here

Ожидаемое поведение - отображать каждый элемент только один раз с разделителем, поэтому я выбрал listView.separated.

enter image description here

Текущий код для отображения этого списка:

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),
    );
  }

Здесь вы найдете руководство, где может быть проблема и соответствующее решение.

вывод данных:

enter image description here

enter image description here

1 Ответ

0 голосов
/ 03 декабря 2018

Вы можете просто использовать свой метод 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),

       ...
  }
...