Flutter - 尽管定义了宽度，图像还是溢出了？

Posted 2023-02-23

【中文标题】Flutter - 尽管定义了宽度，图像还是溢出了？

【英文标题】：Flutter - Image have overflow despite the defined width?

【发布时间】：2021-10-11 20:14:56

【问题描述】：

尽管定义了宽度，我的网络图像是否仍然溢出，为什么？

这里是代码的一个有问题的部分：

Container(
  height: 200,
  width: MediaQuery.of(context).size.width, // This may be helpful, but not in my case...
  decoration: BoxDecoration(
      image: DecorationImage(
      fit: BoxFit.fitWidth,
      image: NetworkImage("$module['thumbnail']"),
      ),
   ),
),

如何解决溢出问题？

A RenderFlex overflowed by 28 pixels on the right.

帮助，我是 Flutter 的新手。谢谢！

附言。将代码从顶部更新为有问题的：

Widget build(BuildContext context) 
    return InkWell(
        onTap: () 
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => SingleModule()),
          );
        ,
        child: Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(5.0),
          ),
          clipBehavior: Clip.antiAlias,
          child: Row(
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    height: 200,
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        fit: BoxFit.cover,
                        image: NetworkImage("$module['thumbnail']"),
                      ),
                    ),
                  ),

【问题讨论】：

能否添加module['thumbnail'] 的图片URL 例如：images.unsplash.com/…

嗨@DineshNagarajan，我不确定我理解你吗？你的意思是？在该变量中是网络 URL。 :)

***.com/a/49614547/2804581

@Nagual，完成！ :)

@Nagual，我已经用Expanded 替换了该行，它的工作！不再溢出，非常感谢。

【参考方案1】：

尝试将padding: EdgeInsets.only(right: 28), 放在您的Container 上，并环绕您的Image Widget。