【问题标题】:A RenderFlex overflowed by 40 pixels on the bottom problem一个 RenderFlex 在底部问题上溢出了 40 个像素
【发布时间】: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

【问题讨论】:

    标签: android android-studio flutter dart flutter-layout


    【解决方案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"))),
    • 它更好,但我猜仍然不够好。为什么我无法在右上角获得第一个箭头?顺便说一句,谢谢你的帮助
    • 我刚看到很抱歉。先生,它运作良好。谢谢你的时间^^
    猜你喜欢
    • 2020-10-08
    • 2021-12-24
    • 2020-02-18
    • 1970-01-01
    • 2021-03-13
    • 2021-08-27
    • 2019-05-21
    • 2021-08-04
    • 1970-01-01
    相关资源
    最近更新 更多