颤动如何给 GridView.Builder 的孩子高度答案

【问题标题】：flutter how to give height to the childrens of GridView.Builder颤动如何给 GridView.Builder 的孩子高度
【发布时间】：2019-05-05 20:03:48
【问题描述】：

我想为gridview.builder 的孩子们提供高度，但它不接受。我尝试使用容器，但它不起作用...... 请帮忙

GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
              ),
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  height: 280.0,
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding:
                            EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          height: 208.5,
                          width: 138.75,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10.0),
                              image: DecorationImage(
                                  image: NetworkImage(
                                      "${snapshot.data[index].url}"),
                                  fit: BoxFit.fill)),
                        ),
                      ),
                      Text(
                        snapshot.data[index].title,
                        style: TextStyle(fontSize: 17.0),
                      ),
                    ],
                  ),
                );
              },
            ),`

【问题讨论】：

使用GridView.count可以调整高度

标签： flutter

【解决方案1】：

您想将SliverGridDelegate 的childAspectRatio 属性与MediaQuery 一起使用：

class HomePage extends StatelessWidget {
  final List<String> items = <String>[
    "Item 1",
    "Item 2",
    "Item 3",
    "Item 4",
    "Item 5",
    "Item 6",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: MediaQuery.of(context).size.width /
              (MediaQuery.of(context).size.height / 4),
        ),
        itemCount: items.length,
        itemBuilder: (context, index) {
          return GridTile(child: Text(items[index]));
        },
      ),
    );
  }
}

【讨论】：

我必须以 1:1（宽：高）的比例显示网格，但高度应该额外增加 100 像素。例如。我能怎么做？请建议。谢谢。
很好的回应，暂时没有找到更好的方法

【解决方案2】：

通过将childAspectRatio 0 更改为 1，您可以更改项目的高度

【讨论】：

【解决方案3】：

要使容器更大，纵横比应小于 1 但大于 0。例如 0.4

【讨论】：

【解决方案4】：

您可以使用 mainAxisExtent 代替 childAspectRatio

    GridView.builder(
            physics: BouncingScrollPhysics(),
            itemCount: resumes.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisExtent: 256,
            ),
            itemBuilder: (_, index) => Container(),
          ),

【讨论】：

我找到的唯一有用的答案。

【解决方案5】：

import 'package:flutter/material.dart';                 

class AllCategories extends StatelessWidget {             
  AllCategories({Key? key}) : super(key: key);          
  
 

  @override
  Widget build(BuildContext context) {                    
    return Scaffold(                     
      backgroundColor: Colors.white,              
      appBar: AppBar(              
        backgroundColor: Colors.white,                
        title: Text('All Categories'),                
        leading: IconButton(              
          icon: Icon(                 
            EvaIcons.arrowIosBack,           
            color: Colors.black,
          ),              
          onPressed: () {
            Navigator.pop(context);            
          },
        ),
      ),                 
      body: GridView.builder(                
          shrinkWrap: true,                    
          itemCount: 6,                   
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(                  
              crossAxisCount: 2, childAspectRatio: 2 / 3),                       
          itemBuilder: (context, index) {                            
            return Container(              
                margin: EdgeInsets.all(8),                         
                decoration: BoxDecoration(                       
                  borderRadius: BorderRadius.circular(2),                       
                ),                           
                child: Column(                          
                  crossAxisAlignment: CrossAxisAlignment.start,                              
                  children: [                          
                    Flexible(            
                      child: Container(                 
                        decoration: BoxDecoration(         
                            image: DecorationImage(           
                                fit: BoxFit.cover,                    
                                image: NetworkImage(             
                                    'https://t3.ftcdn.net/jpg/03/15/59/88/360_F_315598844_WbT1Ix5HL17KN6sDzTBhu1zE4nb7Ry3o.jpg'))),                       
                      ),             
                    ),                       
                    Padding(                      
                      padding: const EdgeInsets.fromLTRB(8, 10, 0, 0),
                      child: Text(            
                        'Nike',                    
                        style: TextStyle(                                
                            fontSize: 18, fontWeight: FontWeight.w900),      
                      ),
                    ),                       
                    Padding(             
                      padding: const EdgeInsets.all(8.0),               
                      child: Text("Just Do It",            
                          style: TextStyle(fontSize: 15, color:  
    Colors.grey)),
                    )    
                  ],               
                ));                      
          }),                        
    );              
  }            
}

【讨论】：