【问题标题】:Flutter - Image have overflow despite the defined width?Flutter - 尽管定义了宽度,图像还是溢出了?
【发布时间】: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。 :)
  • @Nagual,完成! :)
  • @Nagual,我已经用Expanded 替换了该行,它的工作!不再溢出,非常感谢。

标签: flutter dart overflow


【解决方案1】:

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

【讨论】:

    猜你喜欢
    • 2022-01-23
    • 2018-12-04
    • 1970-01-01
    • 2015-12-01
    • 1970-01-01
    • 1970-01-01
    • 2013-10-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多