Flutter中如何创建带像素化边框的复古风格容器

要实现图中的复古像素风格边框，这里有几种实用方案：

1. 自定义CustomPaint绘制 #

自己写绘制器控制像素边框样式，灵活性最高：

class PixelBorderPainter extends CustomPainter {
  final Color borderColor;
  final int pixelBlockSize;
  final double borderWidth;

  PixelBorderPainter({
    required this.borderColor,
    this.pixelBlockSize = 2,
    this.borderWidth = 4.0,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = borderColor;
    final halfBorder = borderWidth / 2;

    // 顶部像素线
    for (double x = halfBorder; x < size.width - halfBorder; x += pixelBlockSize * 2) {
      canvas.drawRect(
        Rect.fromLTWH(x, halfBorder, pixelBlockSize, borderWidth),
        paint,
      );
    }

    // 底部像素线
    for (double x = halfBorder; x < size.width - halfBorder; x += pixelBlockSize * 2) {
      canvas.drawRect(
        Rect.fromLTWH(x, size.height - borderWidth - halfBorder, pixelBlockSize, borderWidth),
        paint,
      );
    }

    // 左侧像素线
    for (double y = halfBorder; y < size.height - halfBorder; y += pixelBlockSize * 2) {
      canvas.drawRect(
        Rect.fromLTWH(halfBorder, y, borderWidth, pixelBlockSize),
        paint,
      );
    }

    // 右侧像素线
    for (double y = halfBorder; y < size.height - halfBorder; y += pixelBlockSize * 2) {
      canvas.drawRect(
        Rect.fromLTWH(size.width - borderWidth - halfBorder, y, borderWidth, pixelBlockSize),
        paint,
      );
    }

    // 四个角的实心像素块
    canvas.drawRect(Rect.fromLTWH(halfBorder, halfBorder, borderWidth, borderWidth), paint);
    canvas.drawRect(Rect.fromLTWH(size.width - borderWidth - halfBorder, halfBorder, borderWidth, borderWidth), paint);
    canvas.drawRect(Rect.fromLTWH(halfBorder, size.height - borderWidth - halfBorder, borderWidth, borderWidth), paint);
    canvas.drawRect(Rect.fromLTWH(size.width - borderWidth - halfBorder, size.height - borderWidth - halfBorder, borderWidth, borderWidth), paint);
  }

  @override
  bool shouldRepaint(PixelBorderPainter oldDelegate) {
    return oldDelegate.borderColor != borderColor ||
        oldDelegate.pixelBlockSize != pixelBlockSize ||
        oldDelegate.borderWidth != borderWidth;
  }
}

使用时用CustomPaint包裹Container：

CustomPaint(
  painter: PixelBorderPainter(borderColor: Colors.amber, pixelBlockSize: 3),
  child: Container(
    width: 220,
    height: 160,
    color: const Color(0xFF2D2D2D),
    child: const Center(
      child: Text(
        '复古容器',
        style: TextStyle(color: Colors.white, fontSize: 16),
      ),
    ),
  ),
)

2. 用图片作为边框（快速实现） #

提前制作像素边框PNG图，通过DecorationImage实现：

Container(
  width: 220,
  height: 160,
  color: const Color(0xFF2D2D2D),
  child: const Center(
    child: Text(
      '复古容器',
      style: TextStyle(color: Colors.white, fontSize: 16),
    ),
  ),
  decoration: BoxDecoration(
    border: Border.all(width: 8), // 边框宽度要和图片对应
    image: DecorationImage(
      image: const AssetImage('assets/pixel_border.png'),
      fit: BoxFit.fill,
    ),
  ),
)

注意：需将图片放入项目assets目录，并在pubspec.yaml配置资源路径。

3. 借助第三方包 #

追求快速开发可使用flutter_pixel_ui（先在pubspec.yaml添加依赖）：

PixelContainer(
  borderColor: Colors.amber,
  borderWidth: 4,
  pixelSize: 2,
  child: Container(
    width: 220,
    height: 160,
    color: const Color(0xFF2D2D2D),
    child: const Center(
      child: Text(
        '复古容器',
        style: TextStyle(color: Colors.white, fontSize: 16),
      ),
    ),
  ),
)

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