Flutter中将ListView Builder的索引增加2

Posted 2023-02-23

【中文标题】Flutter中将ListView Builder的索引增加2

【英文标题】：Increasing the index of the ListView Builder by two in Flutter

【发布时间】：2020-08-25 18:15:49

【问题描述】：

我想在一行中放置两个列表图块。如何在每次迭代中将 Flutter 中的索引增量增加 2？

在下面的代码中，如您所见，我试图连续使用两个列表，然后我希望索引为index+2。但是，默认情况下，索引会增加index+1。

如何将其增加 2？

body: ListView.builder(
    itemCount: song.length - 1,
    itemBuilder: (BuildContext ctxt, int index) 
      return Row(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: ListTile(
              title: Text(song[index]),
              subtitle: Text(singer[index]),
              trailing: Text(time[index]),
              onTap: () 
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => Player(
                      song[index],
                      singer[index],
                      time[index],
                    ),
                  ),
                );
              ,
            ),
          ),
          Expanded(
            flex: 1,
            child: ListTile(
              title: Text(song[index+1]),
              subtitle: Text(singer[index+1]),
              trailing: Text(time[index+1]),
              onTap: () 
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => Player(
                      song[index+1],
                      singer[index+1],
                      time[index+1],
                    ),
                  ),
                );
              ,
            ),
          ),
        ],
      );
    ,
  ),

【问题讨论】：

你可以试试gridview。哪个是更好的选择。

【参考方案1】：

这是我为解决此要求所做的 - 我使用了一个单独的计数器，并在每次迭代时递增 2。 itemCount 是实际计数的一半，如果长度是奇数，则 itemcount-1。下面是代码-

Widget build(BuildContext context) 
    final doctor = //yourlist;
    int icount = 0;
    var length = doctor.specialization.length / 2;
    var listLength = length.floor();

ListView.builder(
                itemCount: listLength,
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemBuilder: (ctx, i) 
                  if (i != 0) 
                    icount = icount + 2;
                  
                  return Container(
                    padding: EdgeInsets.symmetric(vertical: 5),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        RoundedText(displayText: doctor.specialization[icount]),
                        SizedBox(width: 10),
                        RoundedText(
                            displayText: doctor.specialization[icount + 1])
                      ],
                    ),
                  );
                ,
              ),  

【参考方案2】：

List<int> list = [1, 2, 3, 4, 5, 6, 7];
@override
Widget build(BuildContext context) 
return Scaffold(
  body: Container(
    child: ListView.builder(
      itemCount:
          list.length % 2 == 0 ? list.length ~/ 2 : list.length ~/ 2 + 1,
      itemBuilder: (_, index) 
        return Row(
          children: [
            Text(list[index * 2].toString()),
            if (index * 2 +1+ 1 < list.length)
              Text(list[index * 2 + 1].toString()),
          ],
        );
      ,
    ),
  ),
);

【讨论】：

虽然您的代码可以回答问题，但提倡您的解决方案是一个好习惯

【参考方案3】：

当您想要连续两个项目时使用 GridView 总是好的，但是如果您想使用列表视图，以下代码将帮助您。

您可以通过其他手动索引来维护索引。

List<int> list = [1, 2, 3, 4, 5, 6, 7];
  int extraindex = -2;
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Container(
        child: ListView.builder(
          itemCount:
              list.length % 2 == 0 ? list.length / 2 : list.length ~/ 2 + 1,
          itemBuilder: (_, index) 
            extraindex += 2;
            return Row(
              children: [
                Text(list[extraindex].toString()),
                if (extraindex + 1 < list.length)
                  Text(list[extraindex + 1].toString()),
              ],
            );
          ,
        ),
      ),
    );
  

【讨论】：

“感谢我使用网格视图的方法”对于任何想要参考网格视图的人flutter.dev/docs/cookbook/lists/grid-lists