【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: <Widget>[
              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: <Widget>[
                  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: <Widget>[
                    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: <Widget>[
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              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: <Widget>[
                    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: <Widget>[
              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: <Widget>[
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              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: <Widget>[
                    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: <Widget>[
              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
                            ),
                          ),
                      ),
                    )
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容