【Flutter】图片、内容、滚动空间溢出调整

空间超出提示

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.

A RenderFlex overflowed by xx pixels on the bottom

注释：Flutter Incorrect use of ParentDataWidget
问题原因：Expanded、Flexible等组件，在“Container、Padding、Stack”组件中导致的。
解决方案：保持：Expanded、Flexible只在Row、Column等组件内，不在其他组件内使用。

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

1、类似图片加载失败,然后溢出挤压空间，可以用Container包裹一下

直接使用，如果图片地址失效，就会溢出

截屏.png

直接使用,图片链接失效引起

直接使用
child: Image.network(
                  "https://i02piccdn.sogoucdn.com/c7890fba1b75cdd611",
                  width: 30,
                  height: 30,
                ),

处理方式：修改后 Container包裹修改

child: Container(
                color: Color(0xF4F4F4),
                alignment: Alignment.center,
                height: 50,
                width: 50,
                child: Image.network(
                  "https://i02piccdn.sogoucdn.com/c7890fba1b75cdd6",
                  width: 30,
                  height: 30,
                ),
              )

处理方式：修改及添加默认图

ClipRRect(
              borderRadius: BorderRadius.circular(25),
              // child: Container(
              //   color: Color(0xF4F4F4),
              //   alignment: Alignment.center,
              //   height: 50,
              //   width: 50,
              //   child: Image.network(
              //     "https://i02piccdn.sogoucdn.com/c7890fba1b75cdd6",
              //     width: 30,
              //     height: 30,
              //   ),
              // )
              //色值默认图
              child: Container(
                alignment: Alignment.center,
                height: 50,
                width: 50,
                child: FadeInImage.assetNetwork(
                  // this.data.userImgUrl,
                  placeholder: "assets/pics/share_place.png",
                  image: "https://xxxx",
                  width: 50,
                  height: 50,
                  fit: BoxFit.scaleDown,
                  imageErrorBuilder: (context, error, stackTrace) {
                    return Image.asset("assets/pics/share_place.png");
                  },
                ),
              )),

使用Expanded实现Row中所有组件平均分配剩余空间

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("demo")),
        body: Container(
            color: Colors.green,
            child: Row(children: [
              Expanded(
                  child: Image.asset(
                "assets/face.jpg",
                width: 100,
                height: 100,
                fit: BoxFit.cover,
              )),
              Expanded(
                  child: Image.asset(
                "assets/face.jpg",
                width: 100,
                height: 100,
                fit: BoxFit.cover,
              )),
              Expanded(
                  child: Image.asset(
                "assets/face.jpg",
                width: 100,
                height: 100,
                fit: BoxFit.cover,
              ))
            ])))));

2、类似这种超出
A RenderFlex overflowed by 48 pixels on the right.

截屏.png

Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '哪吒之魔童降世',
                    style: TextStyle(
                      fontSize: 25,
                      fontWeight: FontWeight.bold,
                      color: Color(0xFF333333),
                    ),
                  ),
                  Padding(padding: EdgeInsets.only(top: 10)),
                  Text(
                    '动画/中国大陆/110分钟',
                    style: TextStyle(
                      fontSize: 15,
                      color: Color(0xFF999999),
                    ),
                  ),
                  Padding(padding: EdgeInsets.only(top: 2)),
                  Text(
                    '2019-07-26 08:00 中国大陆上映',
                    style: TextStyle(
                      fontSize: 15,
                      color: Color(0xFF999999),
                    ),
                  ),

                  Padding(padding: EdgeInsets.only(top: 2)),
                  Text(
                    '32.1万人想看/大V推荐度95%',
                    style: TextStyle(
                      fontSize: 15,
                      color: Color(0xFF999999),
                    ),
                  ),
                ],
              ),

处理方式：用Expand包裹一下

Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '哪吒之魔童降世',
                      style: TextStyle(
                        fontSize: 25,
                        fontWeight: FontWeight.bold,
                        color: Color(0xFF333333),
                      ),
                    ),
                    Padding(padding: EdgeInsets.only(top: 10)),
                    Text(
                      '动画/中国大陆/110分钟',
                      style: TextStyle(
                        fontSize: 15,
                        color: Color(0xFF999999),
                      ),
                    ),
                    Padding(padding: EdgeInsets.only(top: 2)),
                    Text(
                      '2019-07-26 08:00 中国大陆上映',
                      style: TextStyle(
                        fontSize: 15,
                        color: Color(0xFF999999),
                      ),
                    ),

                    Padding(padding: EdgeInsets.only(top: 2)),
                    Text(
                      '32.1万人想看/大V推荐度95%',
                      style: TextStyle(
                        fontSize: 15,
                        color: Color(0xFF999999),
                      ),
                    ),
                  ],
                ),
              )

3、类似这种Column滚动超出!

截屏.png

class FilmContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(6),
                child: Container(
                  alignment: Alignment.center,
                  height: 180,
                  width: 130,
                  child: Image.network(
                    'https://img1.gamersky.com/image2019/07/20190725_ll_red_136_2/gamersky_07small_14_201972510258D0.jpg',
                    width: 130,
                    height: 180,
                    fit: BoxFit.cover,
                  ),
                ),

              ),
              Padding(padding: EdgeInsets.only(left: 16)),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '哪吒之魔童降世',
                      style: TextStyle(
                        fontSize: 25,
                        fontWeight: FontWeight.bold,
                        color: Color(0xFF333333),
                      ),
                    ),
                    Padding(padding: EdgeInsets.only(top: 10)),
                    Text(
                      '动画/中国大陆/110分钟',
                      style: TextStyle(
                        fontSize: 15,
                        color: Color(0xFF999999),
                      ),
                    ),
                    Padding(padding: EdgeInsets.only(top: 2)),
                    Text(
                      '2019-07-26 08:00 中国大陆上映',
                      style: TextStyle(
                        fontSize: 15,
                        color: Color(0xFF999999),
                      ),
                    ),

                    Padding(padding: EdgeInsets.only(top: 2)),
                    Text(
                      '32.1万人想看/大V推荐度95%',
                      style: TextStyle(
                        fontSize: 15,
                        color: Color(0xFF999999),
                      ),
                    ),
                  ],
                ),
              )

            ],
          ),
          Divider(height: 32),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '剧情简介',
                style: TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                  color: Color(0xFF333333),
                ),
              ),
              Padding(padding: EdgeInsets.only(top: 10)),
              Text(
                '天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。太乙受命将灵珠托生于陈塘关李靖家的儿子哪吒身上。然而阴差阳错，灵珠和魔丸竟然被掉包。本应是灵珠英雄的哪吒却成了混世大魔王。调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。然而面对众人对魔丸的误解和即将来临的天雷的降临，哪吒是否命中注定会立地成魔？他将何去何从？',
                textAlign: TextAlign.justify,
                style: TextStyle(
                  fontSize: 15,
                  color: Color(0xFF999999),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

处理方式：用SingleChildScrollView包裹一下

实现页面滑动需要用到SingleChildScrollView组件，SingleChildScrollView和Android中ScrollView类似

class FilmContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: SingleChildScrollView(
        physics: BouncingScrollPhysics(),
        child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(6),
                child: Container(
                  alignment: Alignment.center,
                  height: 180,
                  width: 130,
                  child: Image.network(
                    'https://img1.gamersky.com/image2019/07/20190725_ll_red_136_2/gamersky_07small_14_201972510258D0.jpg',
                    width: 130,
                    height: 180,
                    fit: BoxFit.cover,
                  ),
                ),

              ),
              Padding(padding: EdgeInsets.only(left: 16)),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '哪吒之魔童降世',
                      style: TextStyle(
                        fontSize: 25,
                        fontWeight: FontWeight.bold,
                        color: Color(0xFF333333),
                      ),
                    ),
                    Padding(padding: EdgeInsets.only(top: 10)),
                    Text(
                      '动画/中国大陆/110分钟',
                      style: TextStyle(
                        fontSize: 15,
                        color: Color(0xFF999999),
                      ),
                    ),
                    Padding(padding: EdgeInsets.only(top: 2)),
                    Text(
                      '2019-07-26 08:00 中国大陆上映',
                      style: TextStyle(
                        fontSize: 15,
                        color: Color(0xFF999999),
                      ),
                    ),

                    Padding(padding: EdgeInsets.only(top: 2)),
                    Text(
                      '32.1万人想看/大V推荐度95%',
                      style: TextStyle(
                        fontSize: 15,
                        color: Color(0xFF999999),
                      ),
                    ),
                  ],
                ),
              )

            ],
          ),
          Divider(height: 32),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '剧情简介',
                style: TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                  color: Color(0xFF333333),
                ),
              ),
              Padding(padding: EdgeInsets.only(top: 10)),
              Text(
                '天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。太乙受命将灵珠托生于陈塘关李靖家的儿子哪吒身上。然而阴差阳错，灵珠和魔丸竟然被掉包。本应是灵珠英雄的哪吒却成了混世大魔王。调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。然而面对众人对魔丸的误解和即将来临的天雷的降临，哪吒是否命中注定会立地成魔？他将何去何从？',
                textAlign: TextAlign.justify,
                style: TextStyle(
                  fontSize: 15,
                  color: Color(0xFF999999),
                ),
              ),
            ],
          ),
        ],
      ),
      )
    );
  }
}

错误提示：RenderFlex overflowed by 15 pixels on the right inside Column Widget

截屏.png

处理方式：或使用Flexible处理text

问题原因：Expanded、Flexible等组件，在“Container、Padding、Stack”组件中导致的。
解决方案：保持：Expanded、Flexible只在Row、Column等组件内，不在其他组件内使用。

Padding(
       padding: EdgeInsets.only(left: 20, top: 20),
         child: Text(
                 this.data.cardNumber,
                 style: TextStyle(
                     // fontSize: 13,
                      fontFamily: 'farrington',
                      letterSpacing: 2,
                      color: Colors.white),
                 )
          ),

Flexible(
                      child: Padding(
                          padding: EdgeInsets.only(left: 20, top: 20),
                          child: Text(
                            this.data.cardNumber,
                            style: TextStyle(
                                // fontSize: 13,
                                fontFamily: 'farrington',
                                letterSpacing: 2,
                                color: Colors.white
                            ),
                          ),
                      ),
                    )