通过flutter中的项目总数显示每个列表项的数量（计数）

Question

我想将列表中每个项目的编号显示到卡片中，我找到了一些示例，他们说您应该使用 for() 循环来完成，我就是这样做的，但是编号不是根本没有增加有人能告诉我我做错了什么吗？

我的代码：

              child: ScrollablePositionedList.builder(
                itemScrollController: itemController,
                itemCount: selectedChallenge.contestantsList.length,
                shrinkWrap: true,
                itemBuilder: (context, index) {

                  final sortedList = selectedChallenge.contestantsList
                    ..sort((itemOne, itemTwo) =>
                        itemTwo.points.compareTo(itemOne.points));

                  final data = sortedList[index];

                  // My for loop
                  for (var i = 0;
                      i < selectedChallenge.contestantsList.length;
                      i++,) {
                    return Card(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Row(
                            children: [
                              Padding(
                                padding: const EdgeInsets.all(10.0),
                                child: Text('${i}'),
                              ),
                              SizedBox(
                                height: 35,
                                width: 35,
                                child: CachedNetworkImage(
                                  imageUrl: data.avatar,
                                ),
                              ),
                              SizedBox(
                                width: 12,
                              ),
                              Text(
                                data.firstName + ' ' + data.lastName,
                              ),
                            ],
                          ),

                          Text(data.points.toString()),
                        ],
                      ),
                    );
                  }
                },
              ),

我得到了什么：

我想要的：

]

Answer 1

使用构建器的索引并删除 for 循环

ScrollablePositionedList.builder(
                itemScrollController: itemController,
                itemCount: selectedChallenge.contestantsList.length,
                shrinkWrap: true,
                itemBuilder: (context, index) {

                  final sortedList = selectedChallenge.contestantsList
                    ..sort((itemOne, itemTwo) =>
                        itemTwo.points.compareTo(itemOne.points));

                  final data = sortedList[index];

                 return Card(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Row(
                            children: [
                              Padding(
                                padding: const EdgeInsets.all(10.0),
                                child: Text('${index + 1}'),
                              ),
// rest of the code

另一个建议是先对列表进行排序，然后再构建它。

// sort the list first in a method or something
    final sortedList = selectedChallenge.contestantsList
                        ..sort((itemOne, itemTwo) =>
                            itemTwo.points.compareTo(itemOne.points));

// build it
    ScrollablePositionedList.builder(
                    itemScrollController: itemController,
                    itemCount: sortedList.length,

Answer 2

试试下面的代码希望对你有帮助。

声明一个整型变量

int index = 1;

您的小部件。

Text(
  (index + 1).toString(),
 ),

整个小部件。

SingleChildScrollView(
                    child: Column(
                      children: <Widget>[
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Padding(
                              padding: const EdgeInsetsDirectional.only(
                                  top: 18, bottom: 18),
                              child: Text("Powered By:",
                                  style: new TextStyle(fontSize: 18.0)),
                            )
                          ],
                        ),
                        ListView.builder(
                            padding: EdgeInsets.zero,
                            shrinkWrap: true,
                            physics: NeverScrollableScrollPhysics(),
                            itemCount: 10,
                            itemBuilder: (BuildContext context, int index) {
                              return Card(
                                  margin: EdgeInsets.zero,
                                  elevation: 0.4,
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(0),
                                  ),
                                  child: Container(
                                      child: ListTile(
                                          leading: Expanded(
                                            child: Text(
                                              (index + 1).toString(),
                                            ),
                                          ),
                                          title: Text(
                                            "Coconut Oil",
                                            style: TextStyle(
                                                color: Colors.black87,
                                                fontWeight: FontWeight.bold),
                                          ),
                                          subtitle: Row(
                                            children: <Widget>[
                                              Icon(Icons.linear_scale,
                                                  color: Colors.greenAccent),
                                              Text("Go Green!",
                                                  style: TextStyle(
                                                      color: Colors.black87))
                                            ],
                                          ),
                                           )));
                            })
                      ],
                    ),
                  ),

你的结果屏幕像->

通过flutter中的项目总数显示每个列表项的数量（计数）

Show the number(count) of each list item by the total number of items in flutter

items

list

count

dart

flutter