Flutter 纯色矩形

在Flutter中，绘制一个纯色矩形可以通过多种方式实现，最常见的方法是使用Container、DecoratedBox或ClipRRect（带有BoxDecoration的矩形）。以下是几种不同的方法来实现纯色矩形的绘制：

方法1：使用Container

dart 复制代码

Container(
  width: 200, // 宽度
  height: 100, // 高度
  color: Colors.blue, // 颜色
)

方法2：使用DecoratedBox

dart 复制代码

DecoratedBox(
  decoration: BoxDecoration(
    color: Colors.red, // 颜色
  ),
  child: Container(
    width: 150, // 宽度
    height: 80, // 高度
  ),
)

方法3：使用ClipRRect与BoxDecoration

dart 复制代码

ClipRRect(
  borderRadius: BorderRadius.circular(10), // 可选，设置圆角
  child: Container(
    width: 120, // 宽度
    height: 60, // 高度
    color: Colors.green, // 颜色
  ),
)

方法4：使用SizedBox和BoxDecoration

dart 复制代码

SizedBox(
  width: 100, // 宽度
  height: 50, // 高度
  child: DecoratedBox(
    decoration: BoxDecoration(
      color: Colors.purple, // 颜色
    ),
  ),
)

方法5：使用CustomPaint和Paint（更复杂但灵活）

如果你需要更多的控制（例如，绘制渐变或自定义形状），你可以使用CustomPaint。

dart 复制代码

CustomPaint(
  painter: _MyPainter(), // 自定义画家类，继承自CustomPainter
  child: Container( // 可以是其他widget，但不是必须的，因为CustomPaint可以绘制在任意大小的区域上。
    width: double.infinity, // 宽度，例如填充父容器宽度
    height: 100, // 高度
  ),
)

自定义画家类：

dart 复制代码

class _MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.orange; // 设置画笔颜色等属性
    canvas.drawRect(Offset.zero & size, paint); // 绘制矩形，从原点(0,0)开始，到size大小的位置结束。
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false; // 当画家状态不改变时返回false，以优化性能。如果需要重绘，返回true。
  }
}

以上方法可以根据你的具体需求选择使用。通常情况下，使用Container是最简单直接的方式。如果你需要更多定制（如圆角、边框等），则可以使用ClipRRect结合Container或直接使用DecoratedBox。对于更复杂的图形和自定义绘制，则可以使用CustomPaint。