Flutter中如何将Container分割为多块纯色区域（无渐变过渡）

要实现无颜色过渡的锐利色块分割，有两种简单可行的方案：

方案一：调整LinearGradient的stops和colors参数 #

通过让相邻颜色的stop值完全重合，就能消除颜色过渡，得到锐利的色块边界。具体做法是：

• 给每个色块的起始和结束位置设置相同的stop值
• 对应colors数组中重复每个色块的颜色，确保每个stop位置都有匹配的颜色

修改你的代码如下：

final size = MediaQuery.of(context).size;
// 四个色块：红(0-0.15)、蓝(0.15-0.60)、绿(0.60-0.85)、橙(0.85-1.00)
var colors = [
  Colors.red, Colors.red,
  Colors.blue, Colors.blue,
  Colors.green, Colors.green,
  Colors.orange
];
var stops = [0.0, 0.15, 0.15, 0.60, 0.60, 0.85, 0.85, 1.00];

return SizedBox(
  child: Container(
    width: size.width,
    height: 100, // 按需设置高度
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: colors,
        stops: stops,
      ),
    ),
  ),
);

原理：当两个相邻颜色的stop值相同时，LinearGradient会直接切换颜色，不会产生渐变过渡，从而形成锐利的色块边界。

方案二：使用Row/Column组合多个Container #

如果分割方向是横向或纵向，直接用Row（横向）或Column（纵向）包裹多个Container，每个Container的宽度/高度按比例或固定值设置，这种方式更直观，维护成本更低：

按比例分配宽度 #

final size = MediaQuery.of(context).size;
// 色块比例：红占15%，蓝占45%，绿占25%，橙占15%
var ratios = [0.15, 0.45, 0.25, 0.15];
var colors = [Colors.red, Colors.blue, Colors.green, Colors.orange];

return SizedBox(
  width: size.width,
  height: 100,
  child: Row(
    children: List.generate(ratios.length, (index) {
      return Expanded(
        flex: (ratios[index] * 100).toInt(),
        child: Container(
          color: colors[index],
        ),
      );
    }),
  ),
);

固定宽度分配 #

如果需要精确的固定像素位置，直接给Container设置width属性：

final size = MediaQuery.of(context).size;
// 自定义固定宽度的色块
var widths = [100, 200, 150, size.width - 450];
var colors = [Colors.red, Colors.blue, Colors.green, Colors.orange];

return SizedBox(
  width: size.width,
  height: 100,
  child: Row(
    children: List.generate(widths.length, (index) {
      return Container(
        width: widths[index],
        color: colors[index],
      );
    }),
  ),
);

两种方案对比：

• 方案一更适合斜向分割或动态调整分割位置的复杂场景
• 方案二更直观，代码可读性更高，适合横向/纵向的简单分割场景

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