如何使容器不透明

Question

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

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],
  ),
);

Answer 1

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

\n

十六进制不透明度值：

\n

100% \xe2\x80\x94 FF\n95% \xe2\x80\x94 F2\n90% \xe2\x80\x94 E6\n85% \xe2\x80\x94 D9\n80% \xe2\x80\x94 CC\n75% \xe2\x80\x94 BF\n70% \xe2\x80\x94 B3\n65% \xe2\x80\x94 A6\n60% \xe2\x80\x94 99\n55% \xe2\x80\x94 8C\n50% \xe2\x80\x94 80\n45% \xe2\x80\x94 73\n40% \xe2\x80\x94 66\n35% \xe2\x80\x94 59\n30% \xe2\x80\x94 4D\n25% \xe2\x80\x94 40\n20% \xe2\x80\x94 33\n15% \xe2\x80\x94 26\n10% \xe2\x80\x94 1A\n5% \xe2\x80\x94 0D\n0% \xe2\x80\x94 00\n

\n

例如：

\n

static const Color mainColor = Color(0xff0097A7);\n

\n

到：

\n

static  Color accentColor = Color(0x1A0097A7);\n

\n

会将不透明度更改为 10%。

\n

Answer 2

换线

const Color(0xFF0E3311)

至

const Color(0xFF0E3311).withOpacity(0.5)

或您想要的任何值。

Answer 3

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

但是，如果要更改所有小部件的不透明度（在您的容器中），则可以将其包装为不透明度小部件，如下所示：

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,
);

如果您想了解更多信息，请查看此处的Opacity文档和此快速视频！

Answer 4

我们Color.fromRGBO(255, 255, 255, 0.5)也可以用于不透明度。