Flutter GridView.Builder无法滚动(高度问题)

时间:2020-01-07 06:38:35

标签: flutter gridview

我正在尝试使用GridView.Builder制作产品网格,但它给出了错误消息:

垂直视口的高度不受限制。

我试图在可工作的GridView上使用flexible,但是我需要专门使用GridView.Builder 并且,如果我尝试使用“柔性”或“特定高度”容器将其包装起来,它不会滚动,有任何提示吗?

import 'package:flutter/material.dart';
class Products extends StatefulWidget {
  @override
  _ProductsState createState() => _ProductsState();
}

class _ProductsState extends State<Products> {

  var productList=[
    {
      "name":"Blazer",
      "picture":"images/products/blazer1.jpeg",
      "oldPrice":120,
      "price":100
    },
    {
      "name":"Dress",
      "picture":"images/products/dress1.jpeg",
      "oldPrice":120,
      "price":100
    },
    {
      "name":"hills",
      "picture":"images/products/hills1.jpeg",
      "oldPrice":11,
      "price":10
    },
    {
      "name":"pants",
      "picture":"images/products/pants2.jpeg",
      "oldPrice":12,
      "price":200,
    }
  ];
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      scrollDirection: Axis.vertical,
      itemCount: productList.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      itemBuilder: (context,index){
      return SingalProduct(
        name: productList[index]['name'],
        picture: productList[index]['picture'],
        oldPrice: productList[index]['oldPrice'],
        price: productList[index]['price'],
          );
        },
      );
  }
}
class SingalProduct extends StatelessWidget {
  final name,picture,oldPrice,price;

  SingalProduct({this.name,this.picture,this.oldPrice,this.price});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Hero(
        tag: name,
        child: InkWell(
          onTap: (){},
          child: GridTile(
            footer: Container(
              height: 40,
              color: Colors.white,
              child: Padding(
                padding: EdgeInsets.fromLTRB(8, 12, 0, 0),
                child: Text(name,textAlign: TextAlign.start,style: TextStyle(fontWeight: FontWeight.bold,fontSize: 16),),
              ),
            ),
            child: Image.asset(picture,fit: BoxFit.cover, ),
            ),
          ),
        ),
    );
  }
}

0 个答案:

没有答案