Flutter如何在Row中放置两个容器，解决内容超出屏幕布局的问题

我在Row组件中包裹了两个Expanded视图，但无法实现自动换行，内容超出了我的屏幕布局范围。

作为Flutter技术的新手，非常感谢大家的帮助。

你原先的代码：

Row(
            mainAxisSize: MainAxisSize.max,
            children: [
              Expanded(
                flex: 1,
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Image.asset('assets/images/checked.png',height: 24,width: 24,),
                    SizedBox(width: 5,),
                    Text('Gated Security',style: Constant.infoTextStyle,)
                  ],
                ),
              ),
              Expanded(
                flex: 1,
                child: Row(
                  children: [
                    Image.asset('assets/images/checked.png',height: 24,width: 24,),
                    SizedBox(width: 5,),
                    Column(
                      children: [
                        Text('Individual slips and along-side docking',style: Constant.infoTextStyle,textAlign: TextAlign.start,),
                      ],
                    )
                  ],
                ),
              ),
            ],
          ),

问题原因 #

问题出在内层Row的文本组件没有被限制最大宽度。你外层的两个Expanded只是平分了父Row的宽度，给到内层的两个子Row，但第二个子Row里的Column没有宽度限制，Row默认会让子组件按照自身内容长度拉伸，所以里面的长文本不会自动换行，直接超出布局范围。

解决方法 #

给第二个子Row里的Column外层再加一层Expanded即可，修正后代码如下：

Row(
  mainAxisSize: MainAxisSize.max,
  children: [
    Expanded(
      flex: 1,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        children: [
          Image.asset('assets/images/checked.png',height: 24,width: 24,),
          SizedBox(width: 5,),
          Text('Gated Security',style: Constant.infoTextStyle,)
        ],
      ),
    ),
    Expanded(
      flex: 1,
      child: Row(
        children: [
          Image.asset('assets/images/checked.png',height: 24,width: 24,),
          SizedBox(width: 5,),
          // 新增Expanded限制Column的最大宽度为当前Row剩余可用宽度
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start, // 可选，让文字左对齐更美观
              children: [
                Text('Individual slips and along-side docking',style: Constant.infoTextStyle,textAlign: TextAlign.start,),
              ],
            ),
          )
        ],
      ),
    ),
  ],
),

如果第一个Row里的文本也可能出现长内容的话，同样给第一个的Text外层也套一层Expanded即可。

内容的提问来源于stack exchange，提问作者Emon Hossain Munna