为什么我的 RenderFlex 在右侧溢出 8.0 像素 With flutter？

Question

大家好，我正在尝试显示带有 flutter 的警报，但我收到此错误：右侧的 RenderFlex 溢出 8.0 像素。 这是我的代码：

return showDialog(
  context: context,
  barrierColor: Colors.transparent,
  builder: (context) {
    return AlertDialog(
      title: Flexible(
      child: Row(children: [
        Text(
          '  Alert Dialog Title. $a ',
        ),
        Image.asset(
          'assets/alert.png',
          scale: 1.0,
          width: 20,
          height: 20,
          fit: BoxFit.contain,
        ),
      ]),
    ),
  backgroundColor: Colors.deepOrangeAccent[700],
  shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.all(
    Radius.circular(20.0),
  ),
  side: BorderSide(
    color: Colors.white,
    width: 3,
  )),
  alignment: Alignment.topCenter,
);

注意：当我将图片添加到标题时出现了问题。

Answer 1

您需要将 Text 包装在Expanded中并将小部件传递到content属性中并删除Flexible ，如下所示：

showDialog(
          context: context,
          barrierColor: Colors.transparent,
          builder: (context) {
            return AlertDialog(
              contentPadding: EdgeInsets.zero,
              clipBehavior: Clip.antiAlias,
              content: Row(
                children: [
                  Expanded(
                    child: Padding(
                      padding:
                          const EdgeInsets.symmetric(horizontal: 8.0),
                      child: Text(
                        '  Alert Dialog Title. asdasdasdasdasdasdasdasdasd  asdasdasdasd',
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 70,
                    height: 70,
                    child: Image.asset(
                      'assets/images/test.jpeg',
                      fit: BoxFit.cover,
                    ),
                  ),
                ],
              ),
              backgroundColor: Colors.deepOrangeAccent[700],
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(20.0),
                  ),
                  side: BorderSide(
                    color: Colors.white,
                    width: 3,
                  )),
              alignment: Alignment.topCenter,
            );
          },
        );