Flutter 如何在Flatter中构建一个包含3个项目的动态列表视图

我正在尝试动态构建一个列表视图。我要求每行仅显示3个列表项。但我得到了以下错误：

“底部的RenderFlex溢出807像素。溢出的RenderFlex的方向为Axis.vertical。溢出的RenderFlex的边缘在渲染中用黄色和黄色标记 黑色条纹图案。这通常是由于RenderFlex的内容太大造成的。”

也尝试通过实现扩展的Flex，但无法实现

这是我尝试的代码

    class ItemsList extends StatefulWidget{
      @override
      State createState() => _ItemsListState();
     }

class _ItemsListState extends State<ItemsList> {

  String totalprice, itemCount, quantity;
  var itemcount = 0;

  // final List<Map<String, dynamic>> items;

  final List items = [
    {
      'title' : 'Appam',
      'imageUrl' : 'images/Appam.png',
      'itemprice' : 50,
      'itemcount' : 0,
    },
    {
      'title' : 'Bonda',
      'imageUrl' : 'images/Bonda.png',
      'itemprice' : 25,
      'itemcount' : 0,
    },
    {
      'title' : 'Dosa',
      'imageUrl' : 'images/Dosa.png',
      'itemprice' : 40,
      'itemcount' : 0,
    },
    {
      'title' : 'Idly',
      'imageUrl' : 'images/Idly.png',
      'itemprice' : 30,
      'itemcount' : 0,
    },
    {
      'title' : 'Onion Dosa',
      'imageUrl' : 'images/Onion_Dosa.png',
      'itemprice' : 50,
      'itemcount' : 0,
    },
     {
      'title' : 'Parotta',
      'imageUrl' : 'images/Parotta.png',
      'itemprice' : 50,
      'itemcount' : 0,
    },
    {
      'title' : 'Puri',
      'imageUrl' : 'images/Puri.png',
      'itemprice' : 40,
      'itemcount' : 0,
    },
    {
      'title' : 'Upma',
      'imageUrl' : 'images/Upma.png',
      'itemprice' : 30,
      'itemcount' : 0,
    },
    {
      'title' : 'Uttapam',
      'imageUrl' : 'images/uttapam.png',
      'itemprice' : 40,
      'itemcount' : 0,
    },
    {
      'title' : 'Vada',
      'imageUrl' : 'images/vada.png',
      'itemprice' : 30,
      'itemcount' : 0,
    },
  ];

  Widget _buildItemsList() {
    Widget itemCards;
    List items = this.items;
    if (items.length > 0) {
      itemCards =  GridView.count(
        shrinkWrap: true,
        scrollDirection: Axis.vertical,
        crossAxisCount: 3,
        children: List.generate(items.length, (index){
          return GestureDetector(
            child: Card(
              margin: const EdgeInsets.all(5.0),
              child: Container(
                  // width: 100.0,
                  // height: 110.0,
                  padding: const EdgeInsets.all(5.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Image(
                        image: AssetImage(items[index]['imageUrl']),
                        height: 80.0,
                        width: 80.0,
                      ),
                      Text(items[index]['title'])
                    ],
                  ),
                ),
            ),
            onTap: _updateCart,
          );
        }),
      );
    } 
    else {
      itemCards = Container(
        child: Text('No items'),
      );
    }
    return itemCards;
  }

  Widget _buildOrderListBar(){
    return Container(
      color: Color.fromRGBO(37, 134, 16, 1.0),
      padding: const EdgeInsets.symmetric(horizontal: 15.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text(itemcount>0?itemcount.toString(): '', 
            style: TextStyle(color: Colors.white),),
          FlatButton(
            child: Text('Checkout', 
              style: TextStyle(
                color: Colors.white,
                fontSize: 20.0),
              ),
            onPressed: (){
              var route = MaterialPageRoute(
                builder: (BuildContext context) => OrderDetails()
              );
              Navigator.push(context, route);
            },
          ),
          Text('Rs. $totalprice', style: TextStyle(color: Colors.white),),
        ],
      ),
    );
  }

  Widget _buildSearchItem() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 5.0),
      margin: const EdgeInsets.all(10.0),
      child: TextFormField(
        decoration: InputDecoration(
          hintText: 'Search for Item',
          icon: Icon(Icons.search)
        ),
      ),
    );
  }


  @override
  void initState(){
    super.initState();

  }

  _updateCart(){
    setState(() {
      itemcount = ++itemcount;
      totalprice = (30 * itemcount).toString();
      print(totalprice);
      print(itemcount);
    });
  }

  @override
  Widget build(BuildContext context){
    return Scaffold(
      drawer: DrawerItems(),
      appBar: AppBar(
        title: Text('Ordering'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            _buildOrderListBar(),
            _buildSearchItem(),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 5.0),
              child: _buildItemsList(),
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigatorItems(),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add_shopping_cart),
        onPressed: (){},
      ),
    );
  }
}

class ItemsList扩展StatefulWidget{
@凌驾
State createState（）=>\u ItemsListState（）；
}
类_ItemsListState扩展状态{
字符串totalprice、itemCount、quantity；
var itemcount=0；
//最后清单项目；
最终清单项目=[
{
“标题”：“Appam”，
'imageUrl'：'images/Appam.png'，
“项目价格”：50，
“itemcount”：0，
},
{
“标题”：“邦达”，
'imageUrl'：'images/Bonda.png'，
“项目价格”：25，
“itemcount”：0，
},
{
“标题”：“Dosa”，
'imageUrl'：'images/Dosa.png'，
“项目价格”：40，
“itemcount”：0，
},
{
“title”：“Idly”，
'imageUrl'：'images/Idly.png'，
“项目价格”：30，
“itemcount”：0，
},
{
“标题”：“洋葱豆”，
“imageUrl”：“images/Onion_Dosa.png”，
“项目价格”：50，
“itemcount”：0，
},
{
“标题”：“帕罗塔”，
'imageUrl'：'images/Parotta.png'，
“项目价格”：50，
“itemcount”：0，
},
{
“标题”：“普里”，
'imageUrl'：'images/Puri.png'，
“项目价格”：40，
“itemcount”：0，
},
{
“标题”：“Upma”，
'imageUrl'：'images/Upma.png'，
“项目价格”：30，
“itemcount”：0，
},
{
“标题”：“Uttapam”，
'imageUrl'：'images/uttapam.png'，
“项目价格”：40，
“itemcount”：0，
},
{
“标题”：“瓦达”，
'imageUrl'：'images/vada.png'，
“项目价格”：30，
“itemcount”：0，
},
];
小部件_buildItemsList（）{
小部件项目卡；
列表项目=此项。项目；
如果（items.length>0）{
itemCards=GridView.count(
收缩膜：对，
滚动方向：轴垂直，
交叉轴计数：3，
子项：List.generate（items.length，（索引）{
返回手势检测器(
孩子：卡片(
边距：所有常数边集（5.0），
子：容器(
//宽度：100.0，
//高度：110.0，
填充：常数边集全部（5.0），
子：列(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
形象(
图像：AssetImage（项[索引]['imageUrl']），
身高：80.0，
宽度：80.0，
),
文本（项目[索引][“标题]）
],
),
),
),
onTap:_updateCart，
);
}),
);
} 
否则{
itemCards=容器(
子项：文本（“无项”），
);
}
归还物品卡；
}
小部件_buildOrderListBar（）{
返回容器(
颜色：颜色。来自RGBO（37,134,16,1.0），
填充：常量边集。对称（水平：15.0），
孩子：排(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
文本（itemcount>0？itemcount.toString（）：“”，
样式：TextStyle（颜色：Colors.white），），
扁平按钮(
子项：文本（'Checkout'，
样式：TextStyle(
颜色：颜色，白色，
字体大小：20.0），
),
已按下：（）{
var路线=材料路线(
生成器：（BuildContext上下文）=>OrderDetails（）
);
推送（上下文、路线）；
},
),
文本（'Rs.$totalprice'，样式：TextStyle（颜色：Colors.white），），
],
),
);
}
小部件_buildSearchItem（）{
返回容器(
填充：常量边集。对称（水平：5.0），
边距：所有常数边集（10.0），
子项：TextFormField(
装饰：输入装饰(
hintText:“搜索项目”，
图标：图标（Icons.search）
),
),
);
}
@凌驾
void initState（）{
super.initState（）；
}
_updateCart（）{
设置状态（）{
itemcount=++itemcount；
totalprice=（30*itemcount）.toString（）；
打印（总价）；
打印（项目计数）；
});
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
抽屉：DrawerItems（），
appBar:appBar(
标题：文本（“排序”），
),
主体：容器(
子：列(
儿童：[
_buildOrderListBar（），
_buildSearchItem（），
容器(
填充：常量边集。对称（水平：5.0），
子项：_buildItemsList（），
),
],
),
),
bottomNavigationBar:BottomNavigatorItems（），
浮动操作按钮：浮动操作按钮(
子：图标（图标。添加购物车），
按下：（）{}，
),
);
}
}

---

更新脚手架主体：

body: Column(
        children: <Widget>[
          _buildOrderListBar(),
          _buildSearchItem(),
          Expanded(child: _buildItemsList()),
        ],
      ),

body:Column(
儿童：[
_buildOrderListBar（），
_buildSearchItem（），
已展开（子项：_buildItemsList（）），
],
),

在调用_buildItemsList（）的地方粘贴更多代码。此外，您还需要在最后返回itemCards。编辑问题。我在卡片中只有两个字段可显示。您使用的是itemExtent:3.0，如果您将其大小增加到itemExtent:110.0会怎么样？即使itemExtent值更改，问题也不会更改父项是什么