代码之家  ›  专栏  ›  技术社区  ›  iPatel

右侧行renderflex溢出76像素

  •  0
  • iPatel  · 技术社区  · 7 年前

    下面是我的代码,我总是有一些像素溢出了正确的大小。我也在玩扩展的、可修复的小部件,以及行和列的MainAxissize。

    看看代码:

    Widget productDisplayListView(List<Products> listOfProduct, int index) {
        return Container(
          margin: EdgeInsets.all(7),
          child: Container(
            child: Card(
              elevation: 4,
              child: Container(
                padding: EdgeInsets.all(6),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      height: 110,
                      width: 90,
                      child: Image.network(
                        listOfProduct[index].thumbnail ?? '',
                        fit: BoxFit.cover,
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(5),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Row(
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              Container(
                                padding: EdgeInsets.zero,
                                margin: EdgeInsets.zero,
                                height: 20,
                                width: 20,
                                child: Icon(
                                  Icons.crop_square,
                                  color: Colors.red,
                                  size: 18,
                                ),
                              ),
                              Flexible(
                                child: Text(
                                  'The overflowing RenderFlex has an orientation of Axis.horizontal.',
                                  overflow: TextOverflow.ellipsis,
                                  softWrap: true,
                                  style: TextStyle(
                                      fontSize: 13,
                                      fontWeight: FontWeight.w600,
                                      color: Theme.of(context).primaryColor),
                                ),
                              )
                            ],
                          ),
                          SizedBox(height: 5),
                          Text(
                            'The overflowing RenderFlex has an orientation of Axis.horizontal.',
                            maxLines: 1,
                            style: TextStyle(
                                fontSize: 12,
                                fontWeight: FontWeight.w500,
                                color: Colors.grey),
                          ),
                          SizedBox(height: 5),
                          Text(
                            '₹${listOfProduct[index].price ?? ''}',
                            style: TextStyle(
                                fontSize: 13,
                                fontWeight: FontWeight.w700,
                                color: Colors.black),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        );
      }
    

    enter image description here

    我在StackOverflow上尝试过很多次,但是没有成功。

    1 回复  |  直到 7 年前
        1
  •  1
  •   anmol.majhail    7 年前

    更新了带有固定溢出错误的代码。必须在小部件树中进行相当大的更改。

    Widget productDisplayListView() {
    return Card(
      elevation: 4,
      child: Container(
        padding: EdgeInsets.all(6),
        child: Row(
          children: <Widget>[
            Container(
              height: 110,
              width: 90,
              child: Image.network(
                'https://placeimg.com/250/250/any',
                fit: BoxFit.cover,
              ),
            ),
            SizedBox(
              width: 5.0,
            ),
            Flexible(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  MergeSemantics(
                    child: Row(
                      children: <Widget>[
                        Icon(
                          Icons.crop_square,
                          color: Colors.red,
                          size: 18,
                        ),
                        Flexible(
                          child: Text(
                            'The overflowing RenderFlex has an orientation of Axis.horizontal.',
                            overflow: TextOverflow.ellipsis,
                            softWrap: true,
                            style: TextStyle(
                                fontSize: 13,
                                fontWeight: FontWeight.w600,
                                color: Theme.of(context).primaryColor),
                          ),
                        )
                      ],
                    ),
                  ),
                  SizedBox(height: 5),
                  Text(
                    'The overflowing RenderFlex has an orientation of Axis.horizontal.',
                    maxLines: 1,
                    style: TextStyle(
                        fontSize: 12,
                        fontWeight: FontWeight.w500,
                        color: Colors.grey),
                  ),
                  SizedBox(height: 5),
                  Text(
                    '₹ 10,000',
                    style: TextStyle(
                        fontSize: 13,
                        fontWeight: FontWeight.w700,
                        color: Colors.black),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
    }
    

    输出:

    enter image description here