Flutter 中GridView 嵌套 在 Flex Row Column 中不显示

6,351 阅读1分钟

GirdView的加载几种方式

参考别人的使用方式

不过这些 都不能显示。通过百度寻找,找到一个方法如下:

试过四种办法只有这两种加上

shrinkWrap: true 属性后才能显示对应布局

如果是ListView 嵌套 GridView 就直接使用,不能使用 Flexible(使用就不显示布局),例如:

贴上代码 (创建一个Dart 直接运行)

import 'package:flutter/material.dart';

class ShopPageFragment extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _ShopFragment();
  }

}
class _ShopFragment extends State<ShopPageFragment>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Column(
      children: <Widget>[
        _shopTilte("精品推荐"),
        new Flexible(
          flex: 1,
          child: _List(),
        )
      ],
    );
  }
  //第一种
  _List(){
    return new GridView.count(crossAxisCount: 3,
      primary: false,
      children: _getGrid(),
      shrinkWrap: true,
    );
  }
  //第二种
  _Gird1(){
    return new GridView.custom(gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,

      ),
        childrenDelegate: new SliverChildBuilderDelegate(
        (context,index){
          return new Image.asset("images/homes.jpg");
        },
          childCount: 30,
        ),
      shrinkWrap: true,
    );
  }
  //第三种
  _GirdExtent(){
    return new SliverGrid.extent(maxCrossAxisExtent: 1080.0,
      mainAxisSpacing: 8.0,
      children: _getGrid(),
    );
  }

  //第四种
  _GridScoll(){
    return new CustomScrollView(
      primary: false,
      slivers: <Widget>[
        new SliverPadding(padding: const EdgeInsets.all(8.0),
          sliver: new SliverGrid.count(crossAxisCount: 3,
            children: _getGrid(),
          ),
        ),
      ],
      shrinkWrap: true,
    );
  }

  List<Widget> _getGrid(){
    List<Widget> gridList = new List();
    //gridList.add(_shopTilte("精品推荐"));
    for(int i =0;i<6;i++){
      gridList.add(_viewGird());
    }
    return gridList;
  }

  Widget _shopTilte(String title){
    return
      new Row(
        children: <Widget>[

          new Container(
            margin: new EdgeInsets.only(
              left: 10.0,
            ),
            color: Colors.green,
            width: 5.0,
            height: 30.0,

          ),

          new Container(
            margin: const EdgeInsets.only(
              left: 10.0,
            ),
          ),

          new Text(title,
            textAlign: TextAlign.left,
            style: const TextStyle(
              fontSize: 14.0,
              color: Colors.black,
              fontStyle: FontStyle.normal,

            ),
          ),

        ],
      );
  }


  Widget _viewGird(){
    return new Column(

      children: <Widget>[
        //图片
        new Image.asset("images/main_discount.png",
          width: 60.0,
          height: 60.0,
        ),
        //名字
        new Text("轮胎",
          style: const TextStyle(
            fontSize: 14.0,
            color: Colors.black,
          ),
          textAlign: TextAlign.center,
        ),
        //价格
        new Text("¥1500.0",
          style: const TextStyle(
            fontSize: 14.0,
            color: Colors.amberAccent,
          ),
          textAlign: TextAlign.center,
        ),
      ],
    );
  }
}