在网格视图中颤振增加容器高度

Question

我正在使用网格视图，我需要显示3x3容器。问题是我无法设置没有增加的容器的高度并削减内容。

我的代码

Container(
                    padding: EdgeInsets.all(10),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        RichText(
                          text: new TextSpan(
                            // Note: Styles for TextSpans must be explicitly defined.
                            // Child text spans will inherit styles from parent
                            style: new TextStyle(
                              fontSize: 14.0,
                              color: Colors.black,
                            ),
                            children: <TextSpan>[
                              new TextSpan(
                                  text: 'Service ',
                                  style: new TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 22)),
                              new TextSpan(
                                  text: 'Deals',
                                  style: TextStyle(fontSize: 18)),
                            ],
                          ),
                        ),
                        Container(
                          width: Width * 0.1,
                          height: Height * 0.05,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage("images/see.png"),
                            ),
                          ),
                        ),


                      ],
                    ),
                  ),

                  Container(
                    child: GridView(
                      padding: EdgeInsets.all(0),
                      shrinkWrap: true,
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

                        crossAxisCount: 3,
                      ),
                      children: [
                        Card(
                          child: Container(
                            child: Column(
                              children: [
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Container(
                                      height: Height * 0.025,
                                      child: Image.asset('images/heartfill.png'),

                                    ),
                                    Container(
                                      height: Height * 0.025,
                                      color: Color(0xffD4E6F1),
                                      child: Image.asset('images/add.png'),

                                    )
                                  ],
                                ),
                                Container(
                                  height: Height * 0.11,
                                  child: Image.asset('images/hp.png'),
                                ),
                                Expanded(
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,

                                    children: [
                                      Container(
                                        child: Text('\$45'),
                                      ),
                                      Row(
                                        children: [
                                          Container(
                                            height: Height * 0.02,
                                            child: Image.asset('images/star.png'),
                                          ),
                                          Container(
                                            child: Text('4.4'),
                                          )

                                        ],
                                      )
                                    ],
                                  ),
                                )
                              ],
                            ),
                          ),
                        )
                      ],
                    ),
                  )

我需要实现这种类型的盒子

我做了类似的事情，但是裁剪了我需要增加容器高度的内容。这是问题所在

Answer 1

只需使用SliverGridDelegateWithFixedCrossAxisCount的childAspectRatio属性来设置每个孩子的横轴与主轴范围的比率。 对于前

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        childAspectRatio:0.8
                      ),

实际上是网格视图子视图的宽高比。相应地进行调整。