Flutter缩小屏幕时容器内文本溢出问题求助

我设置了一个宽度为MediaQuery.of(context).size.width / 1.75的容器，当屏幕尺寸缩小时，容器内的文本会出现溢出情况，效果如下：

当前代码如下：

class ProfileTopPortion extends StatelessWidget {
  const ProfileTopPortion({
    Key? key,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(18.0),
            child: Container(
              width: MediaQuery.of(context).size.width / 1.75,
              decoration: BoxDecoration(
                border: Border.all(color: Color(0xffEBEBEB), width: 0.4),
                color: Color(0xfffbfbfa),
              ),
              child: Row(
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(left: 20.0),
                    child: MouseRegion(
                      cursor: SystemMouseCursors.click,
                      child: GestureDetector(
                          onTap: () {
                            //  Get.toNamed('/events',arguments: 0);
                          },
                          child: Padding(
                            padding: const EdgeInsets.only(top: 0.0),
                            child: SvgPicture.asset(
                              allowDrawingOutsideViewBox: true,
                              Images.avatar,
                            ),
                          )),
                    ),
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  Column(
                    // mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'First Name',
                      ),
                      SizedBox(
                        height: 6,
                      ),
                      Text(
                        'Engineer',
                      ),
                      SizedBox(
                        height: 20,
                      ),
                      Row(
                        children: [
                          Column(
                            // mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                'Email',
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Text(
                                'Organization',
                              ),
                            ],
                          ),
                          SizedBox(
                            width: 30,
                          ),
                          Column(
                            mainAxisSize: MainAxisSize.min,
                            // mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                'testEmail1235@gmail.com',
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Text("Test12346@gma.com"),
                            ],
                          )
                        ],
                      ),
                      SizedBox(
                        height: 25,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

我已经尝试过使用Flexible和Expanded组件，但问题依然存在，希望能得到解决方法。

解决方法 #

问题核心是嵌套的Row和Column没有正确分配可用空间，导致文本无法自动换行。按以下步骤修改即可解决：

1. 给右侧信息Column套Expanded：让它占据容器内除头像外的剩余宽度，避免内容超出容器边界。
2. 给邮箱/组织文本添加换行属性：在Text组件中设置softWrap: true，确保文本空间不足时自动换行。
3. 给内部邮箱信息Column套Expanded：让它在Row中合理分配剩余空间，避免被挤压溢出。

修改后的关键代码片段：

// 容器内的Row部分修改
Row(
  mainAxisSize: MainAxisSize.max,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    // 头像部分保持不变
    Padding(
      padding: const EdgeInsets.only(left: 20.0),
      child: MouseRegion(
        cursor: SystemMouseCursors.click,
        child: GestureDetector(
            onTap: () {
              //  Get.toNamed('/events',arguments: 0);
            },
            child: Padding(
              padding: const EdgeInsets.only(top: 0.0),
              child: SvgPicture.asset(
                allowDrawingOutsideViewBox: true,
                Images.avatar,
              ),
            )),
      ),
    ),
    SizedBox(width: 20),
    // 给右侧信息Column套Expanded
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('First Name'),
          SizedBox(height: 6),
          Text('Engineer'),
          SizedBox(height: 20),
          // 内部Row修改
          Row(
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('Email'),
                  SizedBox(height: 10),
                  Text('Organization'),
                ],
              ),
              SizedBox(width: 30),
              // 给邮箱信息Column套Expanded
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'testEmail1235@gmail.com',
                      softWrap: true,
                    ),
                    SizedBox(height: 10),
                    Text(
                      "Test12346@gma.com",
                      softWrap: true,
                    ),
                  ],
                ),
              )
            ],
          ),
          SizedBox(height: 25),
        ],
      ),
    ),
  ],
)

另外，可给容器添加最小宽度约束，避免屏幕过小时容器被压缩得太窄：

Container(
  width: MediaQuery.of(context).size.width / 1.75,
  constraints: BoxConstraints(minWidth: 300), // 添加最小宽度约束
  // 其他属性保持不变
)

内容的提问来源于stack exchange，提问作者Developer