跳至主要內容

08.样式

12a2024/10/3大约 5 分钟flutter跨平台前端

08.样式

8.1 基础

坐标系

  • 许多样式变换都需要参考坐标系
  • 坐标系在旋转后也会一起旋转，此处给出的只是默认情况
  • 在flutter中，二维坐标系，x轴正方向在右侧，y轴正方向在下侧

8.2 位置

  • 位置alignment需要一个AlignmentGeometry类型的值，表示子组件在父组件中的起始位置
  • AlignmentGeometry是一个抽象类，它有两个常用的子类：Alignment和FractionalOffset

Alignment

// 将位置的两个坐标x,y值都在[-1, 1]的范围内映射得到
// Alignment Widget会以矩形的中心点作为坐标原点，即Alignment(0.0, 0.0) 
// x、y的值从-1到1分别代表矩形左边到右边的距离和顶部到底边的距离，因此2个水平（或垂直）单位则等于矩形的宽（或高）
// 如Alignment(-1.0, -1.0) 代表矩形的左侧顶点，而Alignment(1.0, 1.0)代表右侧底部终点，而Alignment(1.0, -1.0) 则正是右侧顶点，即Alignment.topRight
// 偏移可以通过公式计算出
// 实际偏移 = (Alignment.x * (parentWidth - childWidth) / 2 + (parentWidth - childWidth) / 2,
//        Alignment.y * (parentHeight - childHeight) / 2 + (parentHeight - childHeight) / 2)
Alignment(this.x, this.y)

// Alignment有定义一些常见的方位
Alignment.topRight = Alignment(1.0, -1.0);

FractionalOffset

// 和Alignment的区别就是坐标原点不同，并且将坐标空间压缩到正半轴[0, 1]正方形部分
// FractionalOffset 的坐标原点为矩形的左侧顶点
// 坐标转换公式为实际偏移 = (FractionalOffse.x * (parentWidth - childWidth), 
//                     FractionalOffse.y * (parentHeight - childHeight))
FractionalOffset(this.x, this.y)

8.3 阴影BoxShadow

  • 阴影BoxShadow包含四个属性：
    • color：阴影的颜色
    • offset：阴影与容器的偏移距离，(x, y)表示向右偏移x像素。向下偏移y像素
    • blurRadius：高斯的标准偏差与盒子的形状卷积。越大阴影越模糊，并向边缘扩散，存在扩散上限
    • spreadRadius：在应用模糊之前，框应该膨胀的量。将阴影向四边都膨胀对应的像素
BoxShadow(
  color: Colors.black.withOpacity(0.5),  // 阴影的颜色
  offset: Offset(10, 20),      // 阴影与容器的距离
  blurRadius: 45.0,       // 高斯的标准偏差与盒子的形状卷积。
  spreadRadius: 0.0,       // 在应用模糊之前，框应该膨胀的量。
),

渐变Gradient

  • 线性渐变LinearGradient
// 从begin 到 end依次绘制颜色列表中的颜色
// 默认是从左到右绘制
LinearGradient({
  this.begin = Alignment.centerLeft,
  this.end = Alignment.centerRight,
  required super.colors,
  // 通过提供和colors长度相同的stops设置每个颜色占百分比
  // 数值相加最好等于1
  super.stops,
  // 平铺模式包括：
  // clamp 复制边缘颜色的平铺，默认，无效果
  // repeated 重复顺序平铺
  // mirror 重复但是镜像的平铺
  // decal 区域外为透明色
  this.tileMode = TileMode.clamp,
  super.transform,
})
  • 波动渐变RadialGradient，效果和滴水入湖的水波效果一致

RadialGradient({
  // 可以通过Alignment(x,y)调整
  this.center = Alignment.center, // 渐变中心
  this.radius = 0.5, // 渐变半径，百分比
  required super.colors,
  // 通过提供和colors长度相同的stops设置每个颜色占百分比
  // 数值相加最好等于1
  super.stops,
  // 平铺模式包括：
  // clamp 复制边缘颜色的平铺，默认，无效果
  // repeated 重复顺序平铺
  // mirror 重复但是镜像的平铺
  // decal 区域外为透明色
  this.tileMode = TileMode.clamp,
  this.focal,
  this.focalRadius = 0.0,
  super.transform,
})
  • 扫描渐变SweepGradient
SweepGradient({
  // 可以通过Alignment(x,y)调整
  this.center = Alignment.center, // 扫描中心
  // 使用弧度制
  this.startAngle = 0.0,  // 开始弧度，0在正右方，顺时针方向增大弧度
  this.endAngle = math.pi * 2,  // 结束时需要到达的弧度
  // 通过提供和colors长度相同的stops设置每个颜色占百分比
  // 数值相加最好等于1
  required super.colors,
  super.stops,
  // 平铺模式包括：
  // clamp 复制边缘颜色的平铺，默认，无效果
  // repeated 重复顺序平铺
  // mirror 重复但是镜像的平铺
  // decal 区域外为透明色
  this.tileMode = TileMode.clamp,
  super.transform,
})

8.4 背景混合模式BlendMode

  • 背景混合模式BlendMode类提供了多种混合模式，每种模式都有其特定的视觉效果：
    • clear：将目标图像设置为完全透明
    • src：显示源图像，忽略目标图像
    • dst：显示目标图像，忽略源图像
    • srcOver：将源图像绘制在目标图像上方
    • dstOver：将目标图像绘制在源图像上方
    • srcIn：仅显示源图像和目标图像重叠的部分，以源图像的透明度为准
    • dstIn：仅显示源图像和目标图像重叠的部分，以目标图像的透明度为准
    • srcOut：仅显示源图像的非重叠部分
    • dstOut：仅显示目标图像的非重叠部分
    • srcATop：将源图像绘制在目标图像上方，但只在两者重叠的地方显示目标图像
    • dstATop：将目标图像绘制在源图像上方，但只在两者重叠的地方显示源图像
    • xor：显示源图像和目标图像的非重叠部分
    • plus：将源图像和目标图像的颜色相加
    • modulate：将源图像和目标图像的颜色相乘，结果更暗
    • screen：将源图像和目标图像相互反转后相乘，结果更亮
    • overlay、darken、lighten、colorDodge、colorBurn、hardLight、softLight、difference、exclusion、multiply等：这些模式通过不同的算法混合源图像和目标图像，创造出丰富的效果，适用于创造阴影、光照效果或调整色彩饱和度等场景
最近更新