Flutter/Dart：创建一个 GridView，其中第一项是唯一的网格项

Question

我是 Flutter 和 Dart 的新手，但我的一个屏幕上有一个网格视图，我希望第一个网格项是一个独特的按钮，允许用户添加学生。您可以在下图中看到我正在尝试完成的示例。如何创建第一个项目的独特视图，允许用户添加学生？

网格类：

body: Padding(
          padding: const EdgeInsets.only(left: 15.0, right: 15.0),
          child: Column(
            children: <Widget>[
              ProfileHeader(),
              ProfileViewSwitch(),
              ProfileSearch(),
              Flexible(
                //Below is the GridView used for each student in the class
                child: GridView(
                  //TODO convert to a builder for performance efficiency
                  padding: const EdgeInsets.only(top: 10.0),
                  children: DUMMY_CATEGORIES
                      .map(
                        (catData) => ImageItem(
                          catData.firstName,
                          catData.lastName,
                          catData.color,
                          catData.initials,
                        ),
                      )
                      .toList(),
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    //maxCrossAxisExtent: 150,
                    crossAxisCount: 3,
                    childAspectRatio: 1,
                    crossAxisSpacing: 10,
                    mainAxisSpacing: 10,
                  ),
                ),
              ),
            ],
          ),
        ),

图像项目类别：

Widget build(BuildContext context) {
    return InkWell(
      onTap: () => selectCategory(context),
      borderRadius: BorderRadius.circular(15),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                child: new Column(
                  children: <Widget>[
                    ClipOval(
                      child: Material(
                        color: color, // button color
                        child: InkWell(
                          //splashColor: Colors.red, // inkwell color
                          child: SizedBox(
                            width: 80,
                            height: 80,
                            child: Align(
                              alignment: Alignment.center,
                              child: Text(initials,
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 35)),
                            ),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            //crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                child: new Column(
                  children: <Widget>[
                    new Text(
                      firstName,
                      textAlign: TextAlign.center,
                      style:
                          TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
                    ),
                    new Text(
                      lastName,
                      textAlign: TextAlign.center,
                      style:
                          TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 1

您可以通过两种方式达到预期的结果，

方法 1：使用GridView,builder，返回您的Buttonat 索引0- 我建议使用此方法。

GridView.builder(
  //TODO convert to a builder for performance efficiency
  padding: const EdgeInsets.only(top: 10.0),
  itemCount: DUMMY_CATEGORIES.length + 1,
  itemBuilder: (context, i) {
    if (i == 0) {
      return IconButton(
        icon: Icon(Icons.add),
        onPressed: () {},
      );
    }
    final catData = DUMMY_CATEGORIES[i - 1];
    return ImageItem(
      catData.firstName,
      catData.lastName,
      catData.color,
      catData.initials,
    );
  },
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    //maxCrossAxisExtent: 150,
    crossAxisCount: 3,
    childAspectRatio: 1,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
  ),
)

方法2：在from中连接一个null或唯一的值并在期间处理map

GridView(
  //TODO convert to a builder for performance efficiency
  padding: const EdgeInsets.only(top: 10.0),
  children: [null, ...DUMMY_CATEGORIES].map(
    (catData) {
      if (catData == null) {
        return IconButton(
          icon: Icon(Icons.add),
          onPressed: () {},
        );
      }
      return ImageItem(
        catData.firstName,
        catData.lastName,
        catData.color,
        catData.initials,
      );
    },
  ).toList(),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    //maxCrossAxisExtent: 150,
    crossAxisCount: 3,
    childAspectRatio: 1,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
  ),
)

希望有帮助！