如何将容器的不透明度放在颤动中

Posted 2023-02-23

【中文标题】如何将容器的不透明度放在颤动中

【英文标题】：How to put opacity for container in flutter

【发布时间】：2019-08-13 03:34:15

【问题描述】：

我想为包含十六进制颜色代码的容器设置不透明度。我是新来的。请帮我。这是代码。提前致谢。

final body = Container(
  width: MediaQuery.of(context).size.width,

  margin: const EdgeInsets.only(left: 40.0, right: 40.0),
  padding: EdgeInsets.all(28.0),
   decoration: new BoxDecoration(
     color:   const Color(0xFF0E3311),//here i want to add opacity

   border: new Border.all(color: Colors.black54,
   ),
       borderRadius: new BorderRadius.only(
           topLeft: const Radius.circular(40.0),
           topRight: const Radius.circular(40.0),
       bottomLeft: const Radius.circular(40.0),
       bottomRight:const Radius.circular(40.0) )
),

  child: Column(
    children: <Widget>[ email, password,loginButton],
  ),
);

【参考方案1】：

换行

const Color(0xFF0E3311)

到

const Color(0xFF0E3311).withOpacity(0.5)

或任何你想要的值。

【讨论】：

我们应该在构造函数中给出背景时使用，如下面的“backgroundColor: Colors.black.withOpacity(0.5)”，否则会显示编译错误消息。

【参考方案2】：

如果您只想为颜色设置不透明度，只需在颜色代码前添加 2 个十六进制数字即可。检查此answer 以了解所有值。

但是如果你想改变所有小部件的不透明度，在你的情况下是一个容器，你可以像这样将它包装成一个不透明度小部件：

double _opacityValue = 0.50;//This value goes from 0.0 to 1.0. In this case the opacity is from 50%

final Widget _bodyWithOpacity = Opacity(
  opacity: _opacityValue,
  child: body,
);

如果您想了解更多信息，请查看 here Opacity 的文档和快速查看 video！

【参考方案3】：

Flutter 使用十六进制 ARGB 值作为颜色，其格式为 const Color(0xAARRGGBB)。第一对字母 AA 代表 Alpha 通道。您必须将十进制不透明度值转换为十六进制值。

十六进制不透明度值：

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

例如：

static const Color mainColor = Color(0xff0097A7);

到：

static  Color accentColor = Color(0x1A0097A7);

将不透明度更改为 10%。

【参考方案4】：

Flutter 使用 ARGB 格式的 32 位颜色值，其中 A = Alpha，R = RED，G = GREEN，B = BLUE。

因此，要控制不透明度，您可以更改const Color(0xFF0E3311) 中十六进制值的前两位的值，您可以使用范围为0x000E3311、0x010E3311....0xFF0E3311 的值。

希望有帮助！

【参考方案5】：

我们也可以使用Color.fromRGBO(255, 255, 255, 0.5) 来表示不透明度。

【参考方案6】：

在代码中 const Color(0xFF0E3311) 0x 之后的两个值（在上面的代码“FF”中）用于不透明度。 'FF' 表示不透明，'00' 表示完全透明。所以通过改变这个值，你可以改变颜色的不透明度。 我们还通过颜色类获得白色和黑色的差异不透明度值颜色。例如 Colors.white70 表示不透明度为 70% 的白色