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

Answer 1

首先，如果您只想显示8张卡片，我也将尝试使用一个简单的GridView而不使用.builder :)因为那是因为您真的不需要优化GridView.builder为您提供了这么少的选择项目。

无论如何！这就是我所做的：

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

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

2-我已经将名称列表传递给itembuilder，使用“索引”指向列表中包含的另一个String。

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，我建议您：这是一个非常基本的示例，它向您展示如何完成操作，对于复杂（或服务器端/更多动态）数据，我建议您将其存储在自己的类中！

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

如何在GridView.builder CAD中添加不同的信息？

1 个答案: