I/flutter (17109)：抛出另一个异常：A RenderFlex 溢出右侧 80 像素

Posted 2023-02-23

【中文标题】I/flutter (17109)：抛出另一个异常：A RenderFlex 溢出右侧 80 像素

【英文标题】：I/flutter (17109): Another exception was thrown: A RenderFlex overflowed by 80 pixels on the right

【发布时间】：2019-07-10 22:14:33

【问题描述】：

我正在使用带有卡片的列表视图，但我需要在左侧放一条丝带

错误：

I/flutter (17109): Another exception was thrown: A RenderFlex overflowed by 80 pixels on the right.
I/flutter (17109): Another exception was thrown: A RenderFlex overflowed by 2.0 pixels on the right.
I/flutter (17109): Another exception was thrown: A RenderFlex overflowed by 63 pixels on the right.
I/flutter (17109): Another exception was thrown: A RenderFlex overflowed by 19 pixels on the right.
I/flutter (17109): Another exception was thrown: A RenderFlex overflowed by 80 pixels on the right.
I/flutter (17109): Another exception was thrown: A RenderFlex overflowed by 2.0 pixels on the right

代码项构建器列表视图

Dismissible(
  onDismissed: (direction)
    launch("tel:0$snapshot.data[index].celular");
  ,
  background: Card(
    color: hexToColor("#25D366"),
    child: Padding(padding: EdgeInsets.all(3.0),
    child: Align(
      alignment:Alignment.centerRight,
      child: Icon(Icons.phone, color: Colors.white, size: 35.0,),
    ),
    )
  ),
  direction: DismissDirection.endToStart,
  key: Key(DateTime.now().millisecondsSinceEpoch.toString()),
  child: Card(
      margin: EdgeInsets.symmetric(
          horizontal: 5.0, vertical: 4.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Container(
            width: 8.0,
            height: 110.0,
            color: Colors.green,
            child: Card(

            ),

          ),
          Padding(
            padding: EdgeInsets.only(
                left: 1.0,
                top: 7.0,
                right: 5.0,
                bottom: 5.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text("CLIENTE: " + snapshot.data[index].nomeCliente, style: TextStyle(fontWeight: FontWeight.bold,color: Colors.blueGrey),),
                Text("CONTATO: " + snapshot.data[index].contato,style: TextStyle(fontWeight: FontWeight.bold,color: Colors.blueGrey),),
                Text("DESCRIÇAO: " + snapshot.data[index].descricaoOS,style: TextStyle(fontWeight: FontWeight.bold,color: Colors.blueGrey),),
                Text("CELULAR: " +snapshot.data[index].celular,style: TextStyle(fontWeight: FontWeight.bold,color: Colors.blueGrey),),
                Row(
                  mainAxisAlignment:
                  MainAxisAlignment.end,
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.only(
                          bottom: 0.0, top: 0.0),
                      width: 25.0,
                      height: 30.0,
                      decoration: BoxDecoration(
                        shape: BoxShape.rectangle,
                        image: DecorationImage(
                            image: AssetImage(
                                snapshot.data[index].origemOS == "INTERNO"?"images/interno.png":"images/carro.png"
                            )),
                      ),
                    ),
                    Text(
                      "OS: " +
                          snapshot.data[index].numOS
                              .toString(),
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: hexToColor("#90B348")),
                    ),
                  ],
                ),
              ],
            ),
          )
        ],
      ),
  ),
);

【问题讨论】：

你能澄清你的问题吗？

【参考方案1】：

你需要用 Expanded 小部件包裹你的第二个孩子 - Padding。

Dismissible(
      onDismissed: (direction) 
        // launch("tel:0123");
      ,
      background: Card(
          color: Colors.grey,
          child: Padding(
            padding: EdgeInsets.all(3.0),
            child: Align(
              alignment: Alignment.centerRight,
              child: Icon(
                Icons.phone,
                color: Colors.white,
                size: 35.0,
              ),
            ),
          )),
      direction: DismissDirection.endToStart,
      key: Key(DateTime.now().millisecondsSinceEpoch.toString()),
      child: Card(
        margin: EdgeInsets.symmetric(horizontal: 5.0, vertical: 4.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              width: 8.0,
              height: 110.0,
              color: Colors.green,
              child: Card(),
            ),
            Expanded(      //Add this - wrap second Child with Expanded
              child: Padding(
                padding:
                    EdgeInsets.only(left: 1.0, top: 7.0, right: 5.0, bottom: 5.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                 ......//Code Cont

【参考方案2】：

将文本包裹在 FittedBox 中并将 fit 属性设置为 BoxFit.fit 非常适合自动调整大小。