flutter 里面的渐变色设置

清风细雨_林木木2025-09-28 12:25

实例

复制代码

// 样式
decoration: BoxDecoration(
  gradient: LinearGradient(
    begin: Alignment(0, -1),
    end: Alignment(0, -0.5),
    colors: [Color(0xFFBDCAF9), Color(0xFFF6F6F6)],
  ),
  // 圆角
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(34.r),
    topRight: Radius.circular(34.r),
  ),
),

位置坐标

Alignment	x	y	描述
`topLeft`	-1	-1	左上角
`topCenter`	0	-1	顶部中间
`topRight`	1	-1	右上角
`center`	0	0	正中央
`bottomCenter`	0	1	底部中间

具体解释

想象一个矩形

复制代码

┌─────────────┐  y=-1
│             │
│             │
│             │  y=0
│             │
│             │
└─────────────┘  y=1
x=-1         x=0          x=1

topCenter 的位置

复制代码

┌─────────────┐
│      ●      │ ← topCenter (0, -1)
│             │
│             │
│             │
└─────────────┘

topCenter 代码：

复制代码

gradient: LinearGradient(
  begin: Alignment.topCenter,   // 起点在顶部中间
  end: Alignment.bottomCenter,  // 终点在底部中间
  colors: [Color(0xFFBDCAF9), Color(0xFFF6F6F6)],
),

再次理解：

Alignment	x	y	描述
`Alignment.topLeft`	-1	-1	左上角
`Alignment.topCenter`	0	-1	顶部居中
`Alignment.topRight`	1	-1	右上角
`Alignment.centerLeft`	-1	0	左中
`Alignment.center`	0	0	正中央
`Alignment.centerRight`	1	0	右中
`Alignment.bottomLeft`	-1	1	左下角
`Alignment.bottomCenter`	0	1	底部居中
`Alignment.bottomRight`	1	1	右下角

结论

常用的位置属性的含义其实就是不同位置的含义。