Flutter GridView项目的wrap_content高度

Question

我是一名安卓开发者，也是Flutter的新手。

我想要创建一个包含“wrap content”项高度（我在截图中用笔画了出来）的GridView。但是我已经使用了以下代码尝试过了，它只给了我一个正方形格子。我不知道如何获取高度自适应的网格项，也找不到相关的信息。请帮帮我。谢谢。

class CategoryItem extends StatelessWidget {
  final Category category;
  CategoryItem({Key key, @required this.category})
      : assert(category != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Text(
        category.name,
        style: TextStyle(fontSize: 34.0, fontWeight: FontWeight.bold),
      ),
      color: Colors.amberAccent,
    );
  }
}


class CategoryGrid extends StatefulWidget {

  final List<Category> items;

  const CategoryGrid({Key key, this.items}) : super(key: key);

  @override
  _CategoryGridState createState() => _CategoryGridState();
}

class _CategoryGridState extends State<CategoryGrid> {

  @override
  Widget build(BuildContext context) {
    final Orientation orientation = MediaQuery.of(context).orientation;
    return Column(
      children: <Widget>[
        Expanded(
          child: SafeArea(
            top: false,
            bottom: false,
            child: GridView.builder(
              itemCount: widget.items.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3,),
              itemBuilder: (BuildContext context, int index) {
                return CategoryItem(category: widget.items[index],);
              },
            ),
          ),
        ),
      ],
    );
  }
}

- BomberBus

Answer 1

关于高度，您可以使用"childAspectRatio"。

例如-

GridView.count(
    childAspectRatio: 4.0,
    crossAxisCount: 2,

    padding: EdgeInsets.all(5.0),
    children: <Widget>[
        Container(
            margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
            child: Text(
                '10:00 AM - 12:00 PM',
                style: new TextStyle( color: Colors.black87, fontSize: 14.0, 
                    fontWeight: FontWeight.normal,
                ),
            ), 
        );
    ],
    shrinkWrap: true,
    // todo comment this out and check the result
    physics: ClampingScrollPhysics(),
)

- Nikhat Shaikh

---

感谢 ush189 的帮助！ - Nikhat Shaikh

childAspectRatio是一个硬编码的值。我在横向平板上运行这段代码。如果我在其他屏幕尺寸的平板电脑上测试，就会出现溢出问题。 - Paritosh

Answer 2

要包装内容网格项，您可以使用gridview的 childAspectRatio属性

例如：

GridView.builder(
  itemCount: widget.items.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3, childAspectRatio:(MediaQuery.of(context).size.height * 0.006)),
  itemBuilder: (BuildContext context, int index) {
     return CategoryItem(category: widget.items[index],);
  },
) 

你可以将childAspectRatio设置为0.006，而不是根据你的内容大小来设置。

- user4571931

Answer 3

在 GridView 中使用这行代码

the childAspectRatio as per yor need 
childAspectRatio: double,

- mustaq saiyed

Answer 4

你需要设置SliverGridDelegateWithFixedCrossAxisCount代理的childAspectRatio属性，以控制网格项宽度相对于高度的比例。

如果你只想“缩小”文本小部件的高度（并使其宽度类似于match_parent），请像这样将其包装在Column、Row和Expanded中。

class CategoryItem extends StatelessWidget {
  final Category category;

  CategoryItem({Key key, @required this.category})
      : assert(category != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Expanded(
              child: Card(
                child: Text(
                  category.name,
                  style: TextStyle(fontSize: 34.0, fontWeight: FontWeight.bold),
                ),
                color: Colors.amberAccent,
              ),
            ),
          ],
        ),
      ],
    );
  }
}

- Harsh Bhikadia