logo标签列表

如何在Flutter中的GridView中为小部件设置自定义高度？

gridviewdartheightflutter
223
即使在 Container GridView 中指定了高度，我的代码仍然会产生正方形小部件。
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> widgetList = ['A', 'B', 'C'];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Container(
        child: new GridView.count(
          crossAxisCount: 2,
          controller: new ScrollController(keepScrollOffset: false),
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: widgetList.map((String value) {
            return new Container(
              height: 250.0,
              color: Colors.green,
              margin: new EdgeInsets.all(1.0),
              child: new Center(
                child: new Text(
                  value,
                  style: new TextStyle(fontSize: 50.0,color: Colors.white),
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

上面代码的输出如左图所示。如何获得一个自定义高度小部件的GridView，如右图所示？

output Required Output

4
可能是GridView containing Cards doesn't calculate height correctly的重复问题。 - xskxzr
@xskxzr 我需要展示一个宽高比为1:1的网格，但是高度需要额外增加100像素。例如，我该如何实现？请给予建议。谢谢。 - Kamlesh
17个回答
4

使用

childAspectRatio: .7 (or something you can change it and update your view)

在GridView.builder中使用如下：

像这样使用：

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 8,
            mainAxisSpacing: 10,
            childAspectRatio: .7,
          ),

在使用GridView.count时，可以像这样：

GridView.count(
    crossAxisCount: 2,
    crossAxisSpacing: 8,
    mainAxisSpacing: 10,
    childAspectRatio: .7,
)
4

您需要在GridView的gridDelegate中使用childAspectRatio属性：

gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                childAspectRatio: 2/1.6  // try to fiddle with this ratio
                crossAxisCount: 2,
                crossAxisSpacing: 15,
                mainAxisSpacing: 15,
              ),
1
唯一内置的简单解决方案是使用childAspectRatio，并将其设置为类似于1 / .6或1 / .7这样的值，具体取决于您的小部件大小。默认情况下，Flutter GridView.count将高度和宽度设置为相同的大小，如果设计需要不同形状的输出，则会导致多余的填充。通过childAspectRatio方式，我们可以将宽度的一半值分配给高度，并获得我们想要实现的效果。
GridView.count(
                      childAspectRatio: (1 / .7), // this line is the one determines the width-height ratio
                      crossAxisCount: 2,
                      crossAxisSpacing: gScreenWidth / 40,
                      mainAxisSpacing: gScreenWidth / 40,
                                           children: List.generate(
                          yourList.length, (index) {
                        return Center(
                            child: Container(
                               child: Text('Hello World. Finally I fixed the height issue'))),
},
)),
1
在 GridView 中，使用以下代码：
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, //Number of columns you want
childAspectRatio: (1 / .4) //height & width for the GridTile
),
1
将这行代码粘贴到GridView.count中：
childAspectRatio: 2/4,
请解释它的作用以及你是从哪里得到答案的？ - Ken Sharp
childAspectRatio: 2/4的意思是宽度的两个部分和高度的四个部分。我在我的代码中使用它，而且效果很好。你也可以根据需要在gridview.count中使用childAspectRatio来获得期望的结果。 - Khizar Warraich
0

这个问题曾经困扰了我，但是我发现如果我们把重复的小部件放在SingleChildScrollView小部件中，那么重复小部件的高度将会是最小的！

就是这样！

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接