一个 RenderFlex 在底部问题上溢出了 40 个像素

Posted 2023-02-23

【中文标题】一个 RenderFlex 在底部问题上溢出了 40 个像素

【英文标题】：A RenderFlex overflowed by 40 pixels on the bottom problem

【发布时间】：2019-12-06 18:19:51

【问题描述】：

抛出了另一个异常：A RenderFlex 在底部溢出了 40 个像素。

我收到此错误。请有人帮助我。我是 Flutter 新手。

我确实在代码上更改了很多东西，但仍然无法更改结果。

import 'package:flutter/material.dart';
import 'package:estilo/pages/cart.dart';

class Cart_products extends StatefulWidget 
  @override
  _Cart_productsState createState() => _Cart_productsState();


class _Cart_productsState extends State<Cart_products> 
  var Products_on_the_cart = [
    
      "name": "Blazer (Man)",
      "picture": "images/products/blazer1.jpeg",
      "price": 85,
      "size": "M",
      "color": "Black",
      "quantity": 1
    ,
    
      "name": "Hill 1",
      "picture": "images/products/hills1.jpeg",
      "price": 50,
      "size": "38",
      "color": "Red",
      "quantity": 1
    ,
    
      "name": "Hill 1",
      "picture": "images/products/hills1.jpeg",
      "price": 50,
      "size": "38",
      "color": "Red",
      "quantity": 1
    ,
  ];

  @override
  Widget build(BuildContext context) 
    return new ListView.builder(
        itemCount: Products_on_the_cart.length,
        itemBuilder: (context, index) 
          return new Single_cart_product(
            cart_prod_name: Products_on_the_cart[index]["name"],
            cart_prod_color: Products_on_the_cart[index]["color"],
            cart_prod_quantity: Products_on_the_cart[index]["quantity"],
            cart_prod_size: Products_on_the_cart[index]["size"],
            cart_prod_price: Products_on_the_cart[index]["price"],
            cart_prod_picture: Products_on_the_cart[index]["picture"],
          );
        );
  


class Single_cart_product extends StatelessWidget 
  final cart_prod_name;
  final cart_prod_picture;
  final cart_prod_price;
  final cart_prod_size;
  final cart_prod_color;
  final cart_prod_quantity;

  Single_cart_product(
      this.cart_prod_name,
      this.cart_prod_picture,
      this.cart_prod_price,
      this.cart_prod_color,
      this.cart_prod_quantity,
      this.cart_prod_size);

  @override
  Widget build(BuildContext context) 
    return Card(

      child: ListTile(

        //Leading Section

        leading: new Image.asset(
          cart_prod_picture,
          width: 80.0,
          height: 80.0,
        ),

        //Title Section
        title: new Text(cart_prod_name),
        //Subtitle Section
        subtitle: new Column(

          children: <Widget>[
            new Row(
              children: <Widget>[
                Padding(

                    padding: const EdgeInsets.all(0.0),
                    child: new Text("Size:")),
                Padding(
                    padding: const EdgeInsets.all(4.0),
                    child: new Text(
                      cart_prod_size,
                      style: TextStyle(color: Colors.red),
                    )),

                //For Product Color

                new Padding(
                  padding: const EdgeInsets.fromLTRB(20.0, 8.0, 8.0, 8.0),
                  child: new Text("Color:"),
                ),
                Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: new Text(cart_prod_color,
                      style: TextStyle(color: Colors.red)),
                )
              ],
            ),

            // This is for product price
            new Container(
              alignment: Alignment.topLeft,
              child: new Text(
                "$cart_prod_price\₺",
                style: TextStyle(
                    fontSize: 17.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.red),
              ),
            )
          ],
        ),

        trailing: new Column(
          verticalDirection: VerticalDirection.down,
          children: <Widget>[

            new IconButton(icon: Icon(Icons.arrow_drop_up), onPressed: ()),
            new IconButton(icon: Icon(Icons.arrow_drop_down), onPressed: ())
          ],
        ),

      ),
    );
  

这是我的飞镖课

The screenshot is here

【参考方案1】：

试试这个，它看起来像this：

  @override
  Widget build(BuildContext context) 
    final Size screenSize = MediaQuery.of(context).size;

    return Card(
      child: Row(
        children: <Widget>[
          new SizedBox(
            width: (screenSize.width / 5) * 4.3,
            child: ListTile(
              //Leading Section
              leading: new Image.asset(
                cart_prod_picture,
                width: 80.0,
                height: 80.0,
              ),
              //Title Section
              title: new Text(cart_prod_name),
              //Subtitle Section
              subtitle: new Column(
                children: <Widget>[
                  new Row(
                    children: <Widget>[
                      new Padding(
                          padding: const EdgeInsets.all(0.0),
                          child: new Text("Size:")),
                      new Padding(
                          padding: const EdgeInsets.all(4.0),
                          child: new Text(
                            cart_prod_size,
                            style: TextStyle(color: Colors.red),
                          )),

                      //For Product Color
                      new Padding(
                        padding: const EdgeInsets.fromLTRB(20.0, 8.0, 8.0, 8.0),
                        child: new Text("Color:"),
                      ),
                      new Padding(
                        padding: const EdgeInsets.all(4.0),
                        child: new Text(cart_prod_color,
                            style: TextStyle(color: Colors.red)),
                      )
                    ],
                  ),

                  // This is for product price
                  new Container(
                    alignment: Alignment.topLeft,
                    child: new Text(
                      "$cart_prod_price\₺",
                      style: TextStyle(
                          fontSize: 17.0,
                          fontWeight: FontWeight.bold,
                          color: Colors.red),
                    ),
                  )
                ],
              ),
            ),
          ),
          new SizedBox(
            width: 49.0,
            child: new Column(
                children: <Widget>[
                  new IconButton(icon: Icon(Icons.arrow_drop_up), onPressed: () ),
                  new Text("$cart_prod_quantity"),
                  new IconButton(icon: Icon(Icons.arrow_drop_down), onPressed: () )
                ],
            )
          )
        ],
      ),
    );
  

【讨论】：

谢谢先生，它成功了，但现在我试图在这两个箭头之间添加一个文本，它变成了这样ibb.co/9yHVbqs你有什么想法吗？灵活（子：新图标按钮（图标：图标（图标.arrow_drop_up），onPressed：（））），灵活（子：新文本（“$cart_prod_quantity”）），灵活（子：新图标按钮（图标：图标（ Icons.arrow_drop_down), onPressed: () )),

用这样的填充包裹它：Flexible(child: new Padding(padding: const EdgeInsets.only(top: 5.0), child: new Text("$cart_prod_quantity"))),

它更好，但我猜仍然不够好。为什么我无法在右上角获得第一个箭头？顺便说一句，谢谢你的帮助

我刚看到很抱歉。先生，它运作良好。谢谢你的时间^^