flutter - 如何在 GridView.builder cads 中添加不同的信息？

Question

我正在尝试在使用 GridView.builder 创建的卡片中添加不同的信息，我想要实现的是不必对所有信息进行硬编码，而是以非静态方式呈现。

我将在此处附上代码：

            ),
            Container(
              margin: EdgeInsets.only(top: 350.0),
              decoration: BoxDecoration(
                color: Colors.white54,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20.0),
                  topRight: Radius.circular(20.0),
                )
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 250.0),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20.0),
                    topRight: Radius.circular(20.0),
                  )
              ),
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: GridView.builder(
                  itemCount: 8,
                  itemBuilder: (context, index) => Card(
                    child: Container(
                      margin: EdgeInsets.all(4.0),
                      color: Colors.white,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: <Widget>[
                          Icon(Icons.arrow_forward_ios, size: 18.0,),
                          Text('Hobbies'),
                        ],
                      ),
                    ),
                  ),
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),),
              ),
            ),
          ]
        ),
      ),
    );
  }
}

标签： flutter

Answer 1

首先，如果您只想显示 8 张卡片，我也会尝试使用简单的 GridView 而没有 .builder :) 那是因为如果您的项目很少，您实际上并不需要 GridView.builder 为您提供的优化。

反正！这就是我所做的：

1-我创建了一个“名称”的虚拟列表来包含我的“数据”：

  final List<String> names = [
"Mark",
"Lorenzo",
"Henry",
"Kevin",
"Isabelle",
"Mary",
"Dalia",
"Stella",];

2- 我已将我的姓名列表传递给 itembuilder，使用“索引”指向我的列表中包含的不同字符串。

child: GridView.builder(
    padding: const EdgeInsets.all(25),
    itemCount: names.length,
    itemBuilder: (BuildContext context, index) {
      return new Card(
        child: Container(
          margin: EdgeInsets.all(4.0),
          color: Colors.white,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Icon(
                Icons.arrow_forward_ios,
                size: 18.0,
              ),
              Text(names[index]),
            ],
          ),
        ),
      );
    },
    gridDelegate:
        SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  ),

如果你有一个对象列表，我建议你不要将它的数字硬编码到 itemCount 中，而是像我上面所做的那样使用 listname.size :) Ofc 这是一个非常基本的例子，向你展示它是如何完成的，对于复杂的（或服务器端/更动态）数据我建议您将其存储到他们自己的类中！

我对 Flutter（和编码）也很陌生，但我希望我提供了一些帮助，更重要的是，提供了正确的答案。