如何创建具有半透明背景和不透明前景的小部件?

本文介绍了如何创建具有半透明背景和不透明前景的小部件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我创建了这个flutter小部件，它显示了半透明的背景和不透明的前景.我使用堆栈来做到这一点.不幸的是，我还必须使用内容来布局背景，因为否则内容的大小将无法正确设置.

I created this flutter widget which shows a semi transparent background with a not transparent foreground. I use a stack to do that. Unfortunately I have to layout the background also with the content because otherwise the content does not size correctly.

有没有一种方法可以让堆栈中的背景知道前景的大小而无需进行两次布局?

Is there a way to let the background in a stack know about the size in the foreground without doing the layout twice?

typedef void OnTapFn(); class Bubble extends StatelessWidget { const Bubble({ @required this.tapFn, @required this.content, this.margin = 4.0, this.color = Colors.grey, }); final OnTapFn tapFn; final double margin; final Widget content; final Color color; @override Widget build(BuildContext context) => new GestureDetector( onTap: () => tapFn, child: new Stack( children: <Widget>[ new Opacity(opacity: 0.5, child: _buildBackground), new Container( margin: new EdgeInsets.all(margin), //same as the Border width child: new Opacity(opacity: 1.0, child: content)) ], )); Container get _buildBackground => new Container( decoration: new BoxDecoration( border: new Border.all(width: margin, color: color), borderRadius: const BorderRadius.all(const Radius.circular(30.0)), ), //placeholder to guarantee that the background is big enough child: new Container( color: color, child: new Opacity(opacity: 0.0, child: content))); }

推荐答案

我想您不需要堆栈即可实现它.您可以通过指定小部件的装饰来直接指定背景.

I suppose you'd not need a stack to achieve it. You can directly specify the background by specifying the decoration for your widget.

示例:

new Container( decoration: new BoxDecoration( border: new Border.all(width: borderWidth ,color: Colors.transparent), //color is transparent so that it does not blend with the actual color specified borderRadius: const BorderRadius.all(const Radius.circular(30.0)), color: new Color.fromRGBO(255, 0, 0, 0.5) // Specifies the background color and the opacity ), child: _content, )

希望有帮助！