计算 RadialGradient 中的 radius：实现绚烂的渐变效果

前端

2024-01-23 01:50:40

Flutter 小技巧：计算 RadialGradient 中的 radius

在 Flutter 中，RadialGradient 控件可轻松创建令人惊艳的径向渐变效果。它使您可以指定一系列颜色，并通过radius属性控制渐变的形状和大小。

四种情况

情况 1：radius 为空

当 radius 为空时，RadialGradient 将创建一个覆盖整个画布的渐变。这种效果类似于 LinearGradient，从画布中心向外辐射。

情况 2：radius 小于 0.5

如果 radius 小于 0.5，渐变将形成一个圆形，其中心位于画布中心。渐变的半径将等于画布对角线长度乘以 radius。

情况 3：radius 等于 0.5

当 radius 等于 0.5 时，渐变将形成一个半圆，其边缘与画布边缘相切。

情况 4：radius 大于 0.5

当 radius 大于 0.5 时，渐变将形成一个椭圆形，其中心位于画布中心。渐变的半径将大于画布对角线长度乘以 radius。

计算 radius

步骤 1：确定画布尺寸

要计算 radius，您需要知道画布的大小。您可以使用 MediaQuery.of(context).size 来获取画布尺寸。

步骤 2：计算对角线长度

一旦您知道了画布的尺寸，就可以计算出对角线长度。对角线长度是使用勾股定理计算的：

对角线长度 = sqrt(宽度^2 + 高度^2)

步骤 3：计算半径

最后，您可以使用以下公式计算 radius：

radius = 半径值 * 对角线长度

其中 半径值 是您希望渐变形成的形状的半径。例如，对于半圆，半径值 为 0.5。

示例代码

以下示例代码展示了如何计算 RadialGradient 中的 radius 以创建半圆形渐变：

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final diagonalLength = sqrt(size.width * size.width + size.height * size.height);
    final radius = 0.5 * diagonalLength;

    return Container(
      decoration: BoxDecoration(
        gradient: RadialGradient(
          colors: [Colors.red, Colors.yellow, Colors.green],
          radius: radius,
        ),
      ),
    );
  }
}