卡结构不断溢出

Question

我刚开始颤抖。我试图制作卡片结构，但我认为这是非常错误的。我永远无法修复它。我正在使用 Gridview 扩展。这样，列号会随着屏幕变小或变大而动态变化。但我一直收到溢出错误我该怎么办。

 var response = sepet.itemsCount[item.name];
 return SizedBox(
   child: Padding(
     padding: EdgeInsets.all(0),
     child: Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
         Card(
           shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.all(Radius.circular(8.0))),
           child: InkWell(
             customBorder: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(8),
             ),
             onTap: () {},
             child: Column(
               children: <Widget>[
                 ListTile(
                   title: Text(item.name ?? ''),
                   subtitle: Text(item.defaultPrice.toString() + '\$'),
                 ),
                 Padding(
                   padding: EdgeInsets.all(8.0),
                   child: Row(
                     mainAxisAlignment: MainAxisAlignment.spaceAround,
                     children: [
                       Row(
                         mainAxisAlignment: MainAxisAlignment.spaceAround,
                         children: <Widget>[
                           countChanger(sepet, false, item),
                           Padding(
                             padding: EdgeInsets.only(left: 8.0, right: 8.0),
                             child: Text(
                               response != null ? response.toString() : '0',
                               style: TextStyle(fontSize: 18.0),
                             ),
                           ),
                           countChanger(sepet, true, item),
                         ],
                       ),
                       ButtonTheme(
                         height: 25,
                         minWidth: 25,
                         child: ElevatedButton(
                           onPressed: () {
                             !isAdded
                                 ? sepet.sepeteEkle(item)
                                 : sepet.deleteItem(item);
                           },
                           style: ElevatedButton.styleFrom(
                             primary: !isAdded
                                 ? Colors.teal
                                 : Colors.red,
                           ),
                           child: Text(!isAdded ? 'Ekle' : 'Çıkar'),
                         ),
                       ),
                     ],
                   ),
                 )
               ],
             ),
           ),
         ),
       ],
     ),
   ),
 ); 

我的gridview扩展结构是这样的

child: GridView.extent(
        physics: NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        maxCrossAxisExtent: 250.0,
        crossAxisSpacing: 20.0,
        mainAxisSpacing: 20.0,
        children: List.generate(foods!.length, (index) {
          return itemCard(foods[index].menuItem ?? MenuItem(), value);
        }),

Answer 1

您需要回答的问题是，如果该卡片的宽度如此之小，您希望发生什么？你想要这些元素的不同排列吗？如果您确实决定了它的外观并使用LayoutBuilder 检查约束或使用MediaQuery 检查整​​个屏幕宽度，无论您觉得什么是最好的。您还可以使用SingleChildScrollView 使该位水平滚动。这是一个设计决定。您必须想象屏幕尺寸变化时的样子，并尽可能谨慎地做出响应，而不是仅仅尝试找到一些我们有时都会犯错的神奇小部件。

Answer 2

试试下面的代码希望它对你有帮助

flexible widgets

expanded Widgets

   GridView.builder(
      padding: const EdgeInsets.all(8),
      itemCount: 4,
      itemBuilder: (ctx, i) {
        return Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                child: Text('data'),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.symmetric(horizontal: 5.0),
                      margin: EdgeInsets.all(10),
                      height: 35.0,
                      width: 100.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        border: Border.all(
                          color: Colors.grey,
                        ),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          InkWell(
                            child: Icon(Icons.remove, color: Colors.green),
                            onTap: () {},
                          ),
                          Spacer(),
                          Text(
                            '0',
                            style: Theme.of(context)
                                .textTheme
                                .subtitle2!
                                .copyWith(fontSize: 16.0),
                          ),
                          Spacer(),
                          InkWell(
                            child: Icon(
                              Icons.add,
                              color: Colors.green,
                            ),
                            onTap: () {},
                          ),
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: ElevatedButton(
                      onPressed: () {},
                      child: Text(
                        'Sub Total',
                        style: TextStyle(
                          fontSize: 15,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        );
      },
       gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 170.0,
                  mainAxisExtent: 93,
                ),
    ),

您的结果屏幕喜欢->