一个RenderFlex右边溢出了3.0像素/Flutter答案

【问题标题】：A RenderFlex overflowed by 3.0 pixels on the right /Flutter一个RenderFlex右边溢出了3.0像素/Flutter
【发布时间】：2021-05-14 04:36:09
【问题描述】：

我已经编码了几个小时。我是新来的，这个错误出现在我的项目中： RenderFlex 右侧溢出 3.0 像素。 相关的导致错误的小部件是行 溢出的 RenderFlex 的方向为 Axis.horizontal。

请问你有解决办法吗

下面是我的代码

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Card(
     elevation: 3.0,
     shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0)
     ),
     child: Container(
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(15.0),
         image: DecorationImage(
           fit: BoxFit.cover,
           image: AssetImage(
            'assets/brownies.jpg',
      )
    )
  ),
  child: ListTile(
    contentPadding: EdgeInsets.fromLTRB(50, 50, 50, 50),
    leading: ConstrainedBox(
      constraints: BoxConstraints(
        minWidth: 250,
        minHeight: 250,
        maxWidth: 250,
        maxHeight: 250,
      ),
      child: Column(
        children: [
          Text(
            'Čokoládové brownies',
            style: GoogleFonts.caveat(
              fontSize: 25.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 0),
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.grey.withOpacity(0.5),
              ),
              width: 75,
              child: Row(
                children: [
                  Icon(
                    Icons.access_time,
                  ),
                  Text(
                    '45 min.',
                    overflow: TextOverflow.ellipsis,
                    softWrap: true,
                    style: GoogleFonts.poppins(
                      fontSize: 15.0,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      )
    ),
    trailing: Icon(
      Icons.arrow_forward_ios,
      size: 27.0,
    ),
    onTap: () {
      Navigator.push(
      context,
      PageTransition(child: Brownies(), type: PageTransitionType.rightToLeft),
      );
    },
  ),
),

【问题讨论】：

标签： flutter dart

【解决方案1】：

大概就是这个部分：

             Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.grey.withOpacity(0.5),
                  ),
                  width: 75,
                  child: Row(
                    children: [
                      Icon(
                        Icons.access_time,
                      ),
                      Text(
                        '45 min.',
                        overflow: TextOverflow.ellipsis,
                        softWrap: true,
                        style: GoogleFonts.poppins(
                          fontSize: 15.0,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ],
                  ),

您不应该设置包含 Row 的容器的宽度。

             Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.grey.withOpacity(0.5),
                  ),
                  child: Row(
                    children: [

【讨论】：

没问题。然后你应该接受答案 =)