颤振-实现CSS径向渐变-前端问题

Flutter - Implementing CSS radial gradients(颤振-实现CSS径向渐变)

本文介绍了颤振-实现CSS径向渐变的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我对扑翼是新手。在应用程序中处理背景，但无法模拟准确的CSS径向渐变。这就是我打算复制的内容：

background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(3,235,255,1) 0%, rgba(152,70,242,1) 100.2% );

这就是我在颤动中尝试的，但没有得到相同的效果(肯定缺少上面提到的渐变中的许多参数)

Container(
          width: deviceSize.width,
          height: deviceSize.height,
          decoration: BoxDecoration(
            gradient: RadialGradient(
              colors: [
                Color.fromRGBO(3,235,255,1),
                Color.fromRGBO(152,70,242,1)
              ],
              radius: 1.0,
            ),
            boxShadow: [
              BoxShadow(blurRadius: 2),
            ],
          ),
          // child: const Image(
          //   image: AssetImage(
          //     'lib/assets/images/main_background.jpg',
          //   ),
          //   fit: BoxFit.cover,
          // ),
        ),

如有任何建议，我们将不胜感激。

推荐答案

您需要使用RadialGradient的Center属性来定位渐变。

使用下面的代码，它应该会给出与css代码相同的颤动设计：

 gradient: RadialGradient(
      center: Alignment(-0.8, -0.6),
      colors: [
        Color.fromRGBO(3, 235, 255, 1),
        Color.fromRGBO(152, 70, 242, 1)
      ],
      radius: 1.0,
    ),

ps：我从docs中得出了-0.8和-0.6的值：

Align(0.0，0.0)表示矩形的中心。从-1.0到+1.0的距离是从矩形的一侧到矩形的另一侧的距离。因此，水平(或垂直)2.0单位等于矩形的宽度(或高度)。

这意味着您的css代码的10%将对应于-0.8，20%将对应于-0.6，依此类推。

这篇关于颤振-实现CSS径向渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！