flutter - 格 subview 构建器，其项目的随机宽度 flutter

Question

我需要展示这样的东西

有人可以帮忙吗？我可以实现以下输出

我正在使用以下代码::

GridView.builder(

          scrollDirection: Axis.vertical,
          physics: ScrollPhysics(),
          shrinkWrap: true,
          itemCount: 6,
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,
                childAspectRatio: MediaQuery.of(context).size.width /
                  (MediaQuery.of(context).size.height / 4),),
          itemBuilder: (BuildContext context, int index) {

            return GestureDetector(
              child: Container(

                padding: EdgeInsets.all(0.0),
                margin: EdgeInsets.only(
                    left: 10.0, right: 10.0, top: 10.0, bottom: 10.0),
                decoration: BoxDecoration(
                  border: Border.all(color: Color(0xFF282f61),width: 2.0),
                  borderRadius: BorderRadius.all(Radius.circular(
                      14.0) //                 <--- border radius here
                  ),
                ),
                child:    Center(
                  child: Text(
                      'Avg-project',
                      style: TextStyle(
                        color: Color(0xFF17b01b),
                        fontSize: 14.0,
                      ),
                  ),
                ),
              ),
              onTap: () {},
            );
          },
        ))

如何在 flutter 中实现具有随机宽度的 GridView ？

Answer 1

gridview 不支持随机宽度，因此您可以使用 wrap 小部件代替 gridview 来实现所需的输出。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: BackAppBar("Notifications", context),
      body: Wrap(
        children: [
          "Help Moviing",
          "Furniture Assembly",
          "Mounting",
          "Home Repairs",
          "Personal Assistant",
          "Delivery",
          "Hard Work",
          "Practice & Unpacking",
          "Painting",
          "Cleaning",
          "Heavy Liffing"
        ].map((f) => GestureDetector(
                  child: Container(
                    padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                    margin: EdgeInsets.only(
                        left: 5.0, right: 5.0, top: 10.0, bottom: 10.0),
                    decoration: BoxDecoration(
                      border: Border.all(color: Color(0xFF282f61), width: 2.0),
                      borderRadius: BorderRadius.all(Radius.circular(
                          10.0) //                 <--- border radius here
                          ),
                    ),
                    child: Text(f,
                      style: TextStyle(
                        color: Color(0xFF17b01b),
                        fontSize: 16.0,
                      ),
                    ),
                  ),
                  onTap: () {},
                ))
            .toList(),
      ),
    );
  }