Flutter中如何为多个自定义Flexible组件之间添加间距

问题核心原因 #

你当前的布局问题源于**Flexible的自适应宽度逻辑和子组件固定width属性冲突**：Flexible本就会根据flex值自动分配Row的可用宽度，你给内部Container额外设置固定宽度会导致布局计算混乱，这也是调整flex值时长文本容易被拆分换行的核心诱因。

具体解决步骤 #

1. 自定义组件删除固定宽度参数，新增margin控制盒子间距
2. 给Text组件新增行数限制配置，避免长文本换行
3. 调用时移除冗余的width传参即可

修改后代码示例 #

自定义Flexible组件代码

Widget customFlexibleWidget(flex, bgcolor, text1, text2, height) {
  return Flexible(
    flex: flex,
    child: Container(
      // horizontal值控制盒子左右间距，可按需调整
      margin: const EdgeInsets.symmetric(horizontal: 4),
      decoration: BoxDecoration(
          color: bgcolor, borderRadius: BorderRadius.all(Radius.circular(10))),
      height: height,
      // 移除原有的固定width配置
      child: Padding(
        padding: EdgeInsets.only(top: 15),
        child: Center(
          child: Column(
            children: <Widget>[
              Text(text1,
                  // 新增配置：限制最大1行，超长显示省略号，不换行
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      fontFamily: 'montserrat',
                      fontSize: 10,
                      color: Colors.white,
                      fontWeight: FontWeight.w300)),
              Text(text2,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      fontFamily: 'montserrat',
                      fontSize: 15,
                      color: Colors.white,
                      fontWeight: FontWeight.w300)),
            ],
          ),
        ),
      ),
    ),
  );
}

调用代码

Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        child:  Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    customFlexibleWidget(
                        10,
                        Colors.blue,
                        "Order",
                        "50",
                        MediaQuery.of(context).size.height * 0.12),
                    customFlexibleWidget(
                        10,
                        Colors.blue,
                        "Cancelled",
                        "50",
                        MediaQuery.of(context).size.height * 0.12),
                    customFlexibleWidget(
                        13,
                        Colors.blue,
                        "Unattended",
                        "50",
                        MediaQuery.of(context).size.height * 0.12),
                    customFlexibleWidget(
                        7,
                        Colors.blue,
                        "Served",
                        "50",
                        MediaQuery.of(context).size.height * 0.12),
                    customFlexibleWidget(
                          11,
                          Colors.blue,
                          "Remaining",
                          "50",
                          MediaQuery.of(context).size.height * 0.12),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

如果需要文本完全不显示省略号也不换行，可给Text组件增加softWrap: false配置，同时对应调整flex值分配足够宽度即可。

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