Flutter中实现Row内容器溢出时自动换行的方法

你当前用Row布局三个按钮容器，在屏幕宽度不足时会出现元素重叠/溢出的情况，要实现自动换行，直接把Row替换成Wrap组件即可——Wrap天生支持空间不足时自动换行，同时能保持你需要的居中对齐效果。

修改后的核心代码 #

把原来的Row组件替换为Wrap，并可以通过spacing属性统一设置按钮之间的水平间距（替代原来手动加的Padding，代码更简洁）：

Padding(
  padding: EdgeInsets.fromLTRB(0, MediaQuery.of(context).size.height/40, 0, 0),
  child: Column(
    children: [
      Wrap(   // 替换原来的Row为Wrap
        mainAxisAlignment: MainAxisAlignment.center,
        spacing: MediaQuery.of(context).size.width/40, // 按钮之间的水平间距
        children: [
          // Like按钮容器（代码和原内容一致，无需修改）
          Container(    
            width: MediaQuery.of(context).size.width/4,
            height: MediaQuery.of(context).size.height/15,
            decoration: const BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.all(Radius.circular(20)),
              boxShadow: [
                BoxShadow(
                  color: Colors.blue,
                  spreadRadius: 5,
                  blurRadius: 20,
                )
              ]
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(10, 0, 5, 0),
                  child: Icon(
                    Icons.thumb_up, color: Colors.white,
                    size: MediaQuery.of(context).size.height/40,
                  ),
                ),
                Center(
                  child: Text('Like',
                    overflow: TextOverflow.fade,
                    style: TextStyle(
                      fontSize: MediaQuery.of(context).size.height/40,
                      fontFamily: 'Poppins',
                      color: Colors.white,
                    ),
                  ),
                ),
              ],
            ),
          ),
          // Comment按钮容器（移除原来的外层Padding，因为Wrap的spacing已经处理间距）
          Container(    
            width: MediaQuery.of(context).size.width/4,
            height: MediaQuery.of(context).size.height/15,
            decoration: const BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(20)),
              color: Colors.green,
              boxShadow: [
                BoxShadow(
                  color: Colors.green,
                  spreadRadius: 5,
                  blurRadius: 20,
                )
              ]
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Padding(  
                  padding: const EdgeInsets.fromLTRB(30, 0, 5, 0),
                  child: Icon(
                    Icons.message, color: Colors.white,
                    size: MediaQuery.of(context).size.height/40,
                  ),
                ),
                Text('Commenta',
                  overflow: TextOverflow.clip,
                  style: TextStyle(
                    fontSize: MediaQuery.of(context).size.height/40,
                    fontFamily: 'Poppins',
                    color: Colors.white,
                  ),
                ),
              ],),
          ),
          // Share按钮容器（代码和原内容一致，无需修改）
          Container(    
            width: MediaQuery.of(context).size.width/4,
            height: MediaQuery.of(context).size.height/15,
            decoration: const BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(20)),
              color: Colors.red,
              boxShadow: [
                BoxShadow(
                  color: Colors.red,
                  spreadRadius: 5,
                  blurRadius: 20,
                )
              ]
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(10, 0, 5, 0),
                  child: Icon(
                    Icons.share, color: Colors.white,
                    size: MediaQuery.of(context).size.height/40,
                  ),
                ),
                Text('Condividi',
                  style: TextStyle(
                    fontSize: MediaQuery.of(context).size.height/40,
                    fontFamily: 'Poppins',
                    color: Colors.white,
                  ),
                )
              ]
            )
          ),
        ],
      ),
    ],
  ),
)

关键说明 #

1. Wrap组件会自动检测可用空间，当子组件总宽度超过当前行的宽度时，自动将后续子组件换行到下一行
2. 通过spacing属性设置子组件之间的水平间距，替代原来手动给中间按钮加的Padding，代码更简洁易维护
3. 如果需要设置垂直方向的行间距，可以额外添加runSpacing参数

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