Flutter Gridview 或 StaggeredGridview 可变宽度/填充列的可变项目数

Question

我正在尝试显示一个具有可变数量和宽度按钮的网格视图，如下所示：

但是当我尝试 gridview 时，我最终得到的是固定数量的按钮和固定的宽度，如下所示：

最初我认为这是按钮默认填充太多的问题，但这不是问题，我能够解决这个问题，但网格仍然存在相同的问题。

我尝试过像这样的 Gridview 生成器：

GridView.builder(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      gridDelegate:
      SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: 3.5, mainAxisSpacing: 4, crossAxisSpacing: 4),
      itemBuilder: (BuildContext context, int index) {
        return InkWell(
          onTap: () {
            //Navigator.of(context).pushNamed(HomePageResultsScreen.id);
          },
          child: ButtonTheme(
            minWidth: 16,
            height: 30,
            child: RaisedButton(
              padding: EdgeInsets.all(8.0),
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
              color: Colors.white,
              child:
              Center(
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    CachedNetworkImage(fit: BoxFit.contain,
                      height: 40,
                      width: 40,
                      placeholder: (context, url) => new CircularProgressIndicator(),
                      imageUrl: snapshot.data.documents[index]['icon'].toString(),
                    ),
                    Text(snapshot.data.documents[index]['name'].toString(), textAlign: TextAlign.right, style: TextStyle(fontSize:  10, color: Colors.black,),),

                  ],
                ),
              ),
              onPressed: (){

              },
            ),
          ),

        );
      },
      itemCount: snapshot.data.documents.length,
    );

我还编辑了构建器的属性以具有 SliverGridDelagateWithMaxCrossAxisExtent 和其他属性。我知道按钮如果不放置在网格内，则会缩小到最小尺寸，但当在网格中时，它们会扩展以填充整个列。

我还尝试了多种方法，用交错的 gridview 替换 gridview，如下所示：

StaggeredGridView.countBuilder(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        crossAxisCount: 3,
        staggeredTileBuilder: (int index) =>
        new StaggeredTile.count(2, index.isEven ? 2 : 1),
        itemBuilder: (BuildContext context, int index) {
          return InkWell(
            onTap: () {
              //Navigator.of(context).pushNamed(HomePageResultsScreen.id);
            },
            child: ButtonTheme(
              minWidth: 16,
              height: 30,
              child: RaisedButton(
                padding: EdgeInsets.all(8.0),
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                color: Colors.white,
                child:
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    CachedNetworkImage(fit: BoxFit.contain,
                      height: 20,
                      width: 20,
                      placeholder: (context, url) => new CircularProgressIndicator(),
                      imageUrl: snapshot.data.documents[index]['icon'].toString(),
                    ),
                    Text(snapshot.data.documents[index]['name'].toString(), textAlign: TextAlign.center, style: TextStyle(fontSize:  10, color: Colors.black,),),

                  ],
                ),
                onPressed: (){

                },
              ),
            ),

          );
        },
        itemCount: snapshot.data.documents.length,
      ),

我已经尝试了 StaggeredGridView.countBuilder 和 StaggeredGridView.extent，但这两个都比我想象的更远。它最终只是每个 gridview 行有一个按钮（看起来像列表视图）。

我不确定我做错了什么，或者这些小部件是否可以实现这一点。

感谢您的帮助

Answer 1

# # Staggered View\n# ScreenShot\n![alt text](https://github.com/Anup2712/flutterAnup/blob/master/StaggeredView/Screenshot.jpg)\n\n# What is it?\nA Flutter staggered grid view which supports multiple columns with rows of varying sizes.\nIt\xe2\x80\x99s a grid layout where the cross axis is divided in multiple equally sized parts, and places elements in optimal position based on available main axis space.\nYou\xe2\x80\x99ve probably came across some app or website design with staggered grid layout like Pinterest:\n\n# For understand the code\n\nTo help you to understand the code, you can see that this grid of 10 tiles is divided into 4 columns:\n\n![alt text](https://github.com/Anup2712/flutterAnup/blob/master/StaggeredView/understanding.png)\n\n\n# Let\'s Get Started\n<H3>1 - Depend on it</h3>\n<h6><b>Add it to your package\'s pubspec.yaml file</b></h6>\n<pre>dependencies:\n  fl_chart: ^0.6.1</pre>\n<H3>2 - Install it</h3>\n<h6><b>Install packages from the command line</b></h6>\n<pre>flutter packages get</pre>\n<H3>2 - Getting Started</h3>\n<h6><b>Import the package:</b></h6>\n<pre>import \'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart\';</pre>\n\n<pre>import \'package:flutter/material.dart\';\nimport \'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart\';\nimport \'package:ofsdp/pages/home.dart\';\nimport \'package:ofsdp/util/appdrawer.dart\';\n\nclass AdministrativeUvit extends StatefulWidget {\n  @override\n  _AdministrativeUvitState createState() => _AdministrativeUvitState();\n}\n\nclass _AdministrativeUvitState extends State<AdministrativeUvit> {\n  var _scaffoldkey = GlobalKey<ScaffoldState>();\n  List<StaggeredTile> _staggeredTiles = const <StaggeredTile>[\n    const StaggeredTile.count(1, 1),\n    const StaggeredTile.count(1, 1),\n    const StaggeredTile.count(1, 1),\n    const StaggeredTile.count(1, 1),\n    const StaggeredTile.count(1, 1.5),\n    const StaggeredTile.count(1, 1.5),\n  ];\n\n  List<Widget> _tiles = const <Widget>[\n  const _Example01Tile(Colors.green, Icons.widgets),\n  const _Example01Tile(Colors.lightBlue, Icons.wifi),\n  const _Example01Tile(Colors.amber, Icons.panorama_wide_angle),\n  const _Example01Tile(Colors.brown, Icons.map),\n  const _Example01Tile(Colors.deepOrange, Icons.send),\n  const _Example01Tile(Colors.indigo, Icons.airline_seat_flat),\n  const _Example01Tile(Colors.red, Icons.bluetooth),\n  const _Example01Tile(Colors.pink, Icons.battery_alert),\n  const _Example01Tile(Colors.purple, Icons.desktop_windows),\n  const _Example01Tile(Colors.blue, Icons.radio),\n];\n  @override\n  Widget build(BuildContext context) {\n    return Stack(\n      children: <Widget>[\n        Image.asset(\n          "assets/images/footer.jpg",\n          height: MediaQuery.of(context).size.height,\n          width: MediaQuery.of(context).size.width,\n          fit: BoxFit.cover,\n        ),\n        Scaffold(\n            backgroundColor: Colors.transparent,\n            appBar: AppBar(\n              backgroundColor: Color.fromRGBO(117, 80, 0, 1),\n              title: const Text("ADMINISTRATIVE UNIT"),\n              actions: <Widget>[\n                IconButton(\n                  icon: Icon(Icons.home),\n                  onPressed: () {\n                    Navigator.of(context).pushReplacement(\n                      MaterialPageRoute(\n                        builder: (context) => HomePage(),\n                      ),\n                    );\n                  },\n                )\n              ],\n            ),\n            drawer: AppDrawer(),\n            key: _scaffoldkey,\n\n            body: new Padding(\n                padding: const EdgeInsets.only(top: 12.0),\n                child: new StaggeredGridView.count(\n                  crossAxisCount: 2,\n                  staggeredTiles: _staggeredTiles,\n                  children: _tiles,\n                  mainAxisSpacing: 4.0,\n                  crossAxisSpacing: 4.0,\n                  padding: const EdgeInsets.all(4.0),\n                )))\n      ],\n    );\n  }\n}\nclass _Example01Tile extends StatelessWidget {\n  const _Example01Tile(this.backgroundColor, this.iconData);\n\n  final Color backgroundColor;\n  final IconData iconData;\n\n  @override\n  Widget build(BuildContext context) {\n    return new Card(\n      color: backgroundColor,\n      child: new InkWell(\n        onTap: () {},\n        child: new Center(\n          child: new Padding(\n            padding: const EdgeInsets.all(4.0),\n            child: new Icon(\n              iconData,\n              color: Colors.white,\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n}</pre>\n

\n