我的文本溢出像素,我该如何解决这个问题以及如何增加图像的大小

My text is overflowing Pixels, how can I fix that and how do I increase the size of image

我试过使用 Expanded 和 Flexible,其中 none working.I 我无法理解 why.Also 这是增加大小的最佳方法吗图片的大小,因为我希望我的图片在所有设备上看起来大小都一样。

Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: size.width * 0.4,
                    height: size.width * 0.6,
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage('images/brushOne.jpg'),
                            fit: BoxFit.fill)),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 40.0),
                    child: Text(
                      'Thank you for letting me do what I love, your support is contagious If I could put all 10,000 of you in a room and give you all a hug I WOULD. Your support makes my heart grow and glow. Thank you for helping me create a business and a family.I love you all ',
                      
                    ),
                  ),
                ],
              )

我建议你使用 ,

        SizedBox(
            width: 100,
            child: Text(
              "Thank you for letting me do what I love, your support is contagious If I could put all 10,000 of you in a room and give you all a hug I WOULD. Your support makes my heart grow and glow. Thank you for helping me create a business and a family.I love you all ",
              maxLines: 5,
              overflow: TextOverflow.ellipsis,
            ),
          ),
Row(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Container(
        width: MediaQuery.of(context).size.width * 0.4,
        height: MediaQuery.of(context).size.width * 0.6,
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage('assets/images.jpg'),
                fit: BoxFit.fill)),
      ),
      Container(
        child: Container(
          padding: EdgeInsets.only(top: 40),
          child: Text(
            'Thank you for letting me do what I love, your support is contagious If I could put all 10,000 of you in a room and give you all a hug I WOULD. Your support makes my heart grow and glow. Thank you for helping me create a business and a family.I love you all ',
          ),
        width: MediaQuery.of(context).size.width * 0.6,
        ),
      ),
    ],
  )

您将第一个容器设置为 40%。 宽度:MediaQuery.of(上下文)。size.width * 0.4 如果将 second 容器的宽度设置为 60%, 宽度:MediaQuery.of(上下文)。size.width * 0.6 问题将得到解决。如果需要,您可以使用 sizedbox() 在两个容器之间留下 space。

包装填充小部件修复了问题:

区别在于传递给 Text 的约束。

使用 Expanded 时,约束是固定大小的:

没有 Expanded,约束是无穷大:

Expanded 应该像这个快速模型中演示的那样工作 here

就像 Engin 提到的那样,MediaQuery 是将内容缩放到设备屏幕的最佳选择,但是如果您将 MediaQuery 应用于 Row 的两个部分,则每次选择调整大小时都必须更新两个大小一个元素。如果您将来选择向 Row 添加其他元素,这会累积不必要的技术债务,这种债务将会加剧。另一方面,每次更改 UI 元素时,扩展将占据剩余的 space,无需手动计算大小。