如何在Flutter中实现图中所示的旋转小矩形渐变背景？

核心实现思路 #

通过重复渐变图案叠加基础渐变背景，配合旋转角度，就能实现图中的效果。以下是前端CSS的具体实现方案：

CSS代码示例 #

HTML结构

<div class="gradient-panel"></div>

CSS样式

.gradient-panel {
  width: 400px;
  height: 300px;
  /* 旋转重复的小矩形图案 */
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 14px,
    rgba(255, 255, 255, 0.12) 14px,
    rgba(255, 255, 255, 0.12) 20px
  ),
  /* 底层渐变背景 */
  linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 6px;
}

参数调整说明 #

• 调整45deg可以改变小矩形的旋转角度，改成-45deg就能得到反向倾斜的矩形
• 修改14px和20px可以控制小矩形的宽度和间距：前者是透明间隔的宽度，后者是矩形+间隔的总宽度
• 替换rgba(255,255,255,0.12)可以改变小矩形的颜色和透明度，换成深色值（比如rgba(0,0,0,0.08)）能适配浅色背景
• 底层的linear-gradient可以替换成任意渐变配色，匹配你的设计需求

设计工具实现方式（PS/Figma） #

1. 绘制一个小矩形，旋转到目标角度
2. 使用「重复网格」或「图案填充」功能，将矩形铺满画布
3. 给矩形图层设置低透明度，再在下方叠加渐变背景图层

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