Flutter自动换行和两列布局A RenderFlex overflowed by xxx pixels on the right(2)

flutter开发中经常会遇到如标题所示的错误,意思是控件超出了屏幕尺寸。表现为应用并没有闪退,只是UI显示会与预期不符。
比如在Row中放置几张图片时,最后一张超出了屏幕宽度,会变成这样子:

在这里插入图片描述

源代码:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Row(children: <Widget>[
          Image.asset(
            "graphyics/scenery6.jpg",
            width: 200,
            height: 200,
            fit: BoxFit.cover,
          ),
          Image.asset(
            "graphyics/scenery6.jpg",
            width: 200,
            height: 200,
            fit: BoxFit.cover,
          ),
          Image.asset(
            "graphyics/scenery6.jpg",
            width: 200,
            height: 200,
            fit: BoxFit.cover,
          ),
        ]))));

只是简单的在Row中放置了3张图片,很明显,后面的图片超出了屏幕范围。

控制台显示报错如下:

A RenderFlex overflowed by 189 pixels on the right.

控制台提示内容如下:

The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

意思是我们使用的控件Row有一个水平的布局方向,但是内容已经超出了可显示的范围。
建议我们使用有弹性的控件比如Expanded代替,或者使用可裁剪的控件ClipRect代替,还可以使用具体滚动属性的控件比如ListView代替。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值