如何设置网格视图列高？答案

【问题标题】：How to set grid view column height?如何设置网格视图列高？
【发布时间】：2018-11-09 04:12:55
【问题描述】：

我是 Flutter 新手，没有太多经验。
我正在尝试使用 Flutter 开发一个 Android 应用，这是我之前的应用设计。

而且我也能够成功地在颤动中制作网格视图，但列高是问题所在。他们有没有人可以帮助我处理我的颤振代码。

 class MyHomePage extends StatelessWidget {

  @override
   Widget build(BuildContext context) {
     hi(){

    }
     return new Scaffold(

         appBar: new AppBar(
           actions: <Widget>[],
                title: new Text("milla"),
              ),
       body: new Container(


         child: new Center(

            child: new GridView.count(
              shrinkWrap: true,
              scrollDirection: Axis.vertical,
              childAspectRatio:1.0,
              crossAxisCount: MediaQuery.of(context).size.width <= 400.0 ? 3 : MediaQuery.of(context).size.width >= 1000.0 ? 5 : 4,

           // Create a grid with 2 columns. If you change the scrollDirection to
           // horizontal, this would produce 2 rows.

           crossAxisSpacing: 2.0,
           // Generate 100 Widgets that display their index in the List
           children: new List.generate(100, (index) {

             return  new Column(
                 crossAxisAlignment: CrossAxisAlignment.stretch,
                 mainAxisSize: MainAxisSize.min,

                 verticalDirection: VerticalDirection.down,
                 children: <Widget>[


                   new Center(

                     child:  new Image(


                         image: new NetworkImage('https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true')
                     )
                   ),
                   new Expanded(child: new Text("apple2")), new Expanded(child: new Text(
                   'Item $index',
                   style: Theme.of(context).textTheme.headline,
                 )),new Expanded(child: new Center(child: new Row(
                     crossAxisAlignment: CrossAxisAlignment.center,

                     children: <Widget>[new Text("+",style: new TextStyle(fontSize: 24.0),),new Text("1"),new Text("-")])))]
             );
           }),
         ),
        ),
      )
     );
   }
 }

这是我的输出。

如何设置列高？
当我尝试添加新视图时，它显示此错误
“引发了另一个异常：A RenderFlex 在底部溢出了 21 个像素。”

【问题讨论】：

你必须调整你的纵横比。
我必须以 1:1（宽：高）的比例显示网格，但高度应该额外增加 100 像素。例如。我能怎么做？请建议。谢谢。

标签： flutter flutter-layout

【解决方案1】：

试试这个

childAspectRatio: mediaQueryData.size.height / 1000,

在哪里

MediaQueryData mediaQueryData = MediaQuery.of(context);

我在某处看到了这段代码，我觉得没问题。

【讨论】：

【解决方案2】：

用这个代替

childAspectRatio:1.0 to  childAspectRatio: (itemWidth / itemHeight)

var size = MediaQuery.of(context).size;
 final double itemHeight = (size.height) / 2;
 final double itemWidth = size.width / 2;

在我的代码中可以很好地设置 Gridview 的高度和宽度

【讨论】：

如果itemHeight是动态的，我们如何知道它
您好，这解决了我的问题。一直试图解决它几个小时。谢谢。但是你能解释一下它是如何工作的吗？
我必须以 1:1（宽：高）的比例显示网格，但高度应该额外增加 100 像素。例如。我能怎么做？请建议。谢谢。

【解决方案3】：

你可以试试这个：

GridView.count(
   crossAxisCount: 2,
   childAspectRatio: MediaQuery.of(context).size.height / 400,
   children: <Widget>[...]
);

【讨论】：

什么是 400？是项目高度吗？

【解决方案4】：

维护 childAspectRatio: with MediaQuery.of(context).size.height/600 如果这个 didint 工作改变 600 不同但更少的数字。

【讨论】：

【解决方案5】：

[截图][https://i.stack.imgur.com/h28C2.png]1

这是我的代码：

final screenWidth = MediaQuery.of(context).size.width/3;
return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: new Container(
    color: Colors.white70,
    padding: EdgeInsets.all(5.0),
    child: new GridView.count(
      childAspectRatio: screenWidth/180.0,          
      crossAxisCount: 3,
      crossAxisSpacing: 5.0,
      mainAxisSpacing: 5.0,
      children: _buildFirdTitles(35),
    ),
  ),
);

【讨论】：