Flutter中实现带网格的线性渐变背景技术问询

需求说明 #

• 整体背景为线性渐变，颜色依次为：
  rgba(22, 25, 24, 1)、rgba(22, 25, 24, 0.9417)、rgba(22, 25, 24, 0.8344)、rgba(22, 25, 24, 0.7341)、rgba(22, 25, 24, 0.4)
• 背景上叠加方块网格，单个方块颜色为rgba(217, 217, 217, 1)

现有代码 #

Container(
              height: 191.h,
              width: Get.size.width,
              decoration: BoxDecoration(
                gradient: tempInfo(),
              ),
              child: Padding(
                padding: EdgeInsets.fromLTRB(
                  65.w,
                  65.h,
                  65.w,
                  83.84.h,
                ),
                child: SizedBox(
                  height: 42.16.h,
                  width: 260.w,
                  child: ElevatedButton(
                    onPressed: () {},
                    style: ElevatedButton.styleFrom(
                      backgroundColor: AppColors.color3C.withOpacity(1),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(
                          20.r,
                        ),
                      ),
                    ),
                    child: Text(
                      "View Similar Templates",
                      style: tempInfoButton(),
                    ),
                  ),
                ),
              ),
            ),

LinearGradient tempInfo() => LinearGradient(
      colors: [
        // Color.fromRGBO(22, 25, 24, 1),
        // Color.fromRGBO(22, 25, 24, 0.9417),
        // Color.fromRGBO(22, 25, 24, 0.8344),
        // Color.fromRGBO(22, 25, 24, 0.7341),
        // Color.fromRGBO(22, 25, 24, 0.4),
        AppColors.color18.withOpacity(1),
        AppColors.color18.withOpacity(0.9417),
        AppColors.color18.withOpacity(0.83444),
        AppColors.color18.withOpacity(0.7341),
        AppColors.color18.withOpacity(0.4),
      ],
      begin: AlignmentDirectional.topCenter,
      end: AlignmentDirectional.bottomCenter,
    );

修复与实现方案 #

你的现有代码仅实现了线性渐变背景，缺少方块网格的叠加层。可以通过CustomPaint叠加在渐变背景上来实现完整效果：

步骤1：实现方块网格绘制类 #

创建自定义Painter来绘制规则排列的方块：

class BoxGridPainter extends CustomPainter {
  final Color boxColor;
  final double boxSize;
  final double spacing;

  BoxGridPainter({
    required this.boxColor,
    this.boxSize = 16,
    this.spacing = 8,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = boxColor;
    final totalCellSize = boxSize + spacing;

    // 遍历绘制所有方块
    for (double y = 0; y < size.height; y += totalCellSize) {
      for (double x = 0; x < size.width; x += totalCellSize) {
        canvas.drawRect(
          Rect.fromLTWH(x, y, boxSize, boxSize),
          paint,
        );
      }
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return oldDelegate != this;
  }
}

步骤2：修改容器结构，叠加渐变与方块网格 #

用Stack将方块网格与原有按钮内容叠加在渐变背景上：

Container(
  height: 191.h,
  width: Get.size.width,
  decoration: BoxDecoration(
    gradient: tempInfo(),
  ),
  child: Stack(
    children: [
      // 方块网格层
      CustomPaint(
        painter: BoxGridPainter(
          boxColor: const Color.fromRGBO(217, 217, 217, 1),
          // 可根据设计调整方块大小和间距
          boxSize: 12.w,
          spacing: 6.w,
        ),
      ),
      // 原有按钮内容
      Padding(
        padding: EdgeInsets.fromLTRB(
          65.w,
          65.h,
          65.w,
          83.84.h,
        ),
        child: SizedBox(
          height: 42.16.h,
          width: 260.w,
          child: ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              backgroundColor: AppColors.color3C.withOpacity(1),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.r),
              ),
            ),
            child: Text(
              "查看相似模板",
              style: tempInfoButton(),
            ),
          ),
        ),
      ),
    ],
  ),
);

补充优化 #

1. 渐变部分建议直接使用原始RGB值，避免因AppColors.color18定义偏差导致效果不符：

LinearGradient tempInfo() => LinearGradient(
      colors: const [
        Color.fromRGBO(22, 25, 24, 1),
        Color.fromRGBO(22, 25, 24, 0.9417),
        Color.fromRGBO(22, 25, 24, 0.8344),
        Color.fromRGBO(22, 25, 24, 0.7341),
        Color.fromRGBO(22, 25, 24, 0.4),
      ],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
    );

2. 如果方块需要半透明效果，可在boxColor中添加withOpacity()，比如Color.fromRGBO(217, 217, 217, 0.3)

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