时间戳

首页 > 解决方案 > 如何让透明容器从背景中脱颖而出？

android - 如何让透明容器从背景中脱颖而出？

问题描述

我正在尝试使我的容器透明，并且仍然希望它们能够轻松地从背景颜色中脱颖而出，就像下图一样。（这是PSD图像）

所需布局

我尝试像这样包装Container在一个Material小部件中：

class customBar extends StatelessWidget {
  const customBar({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      elevation: 2,
      borderRadius: BorderRadius.circular(10),
      child: Container(
        width: double.infinity,
        height: 65,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          //color: Color(0xff0a4873),
        ),
        child: Text(
          '',
          textAlign: TextAlign.left,
        ),
      ),
    );
  }
}

但它给了它太多elevation

也尝试使用纯色，但这也不能满足我的要求，

Expanded(
  flex: 4,
  child: Padding(
    padding: const EdgeInsets.all(10.0),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        customBar(),
        Container(
          width: double.infinity,
          height: 60,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Color(0xff0a4873),
          ),
          child: Text(
            '',
            textAlign: TextAlign.left,
          ),
        ),
      ],
    ),
  ),
),

这是输出：

输出

标签： androidflutterdart

解决方案

Material没有必要。如果要调整颜色透明度，请使用Colors.YOUR_COLOR.withOpacity(0.0 .. to .. 1.0)或Color.fromRGBO(RED, BLUE, GREEN, 0.0 .. to .. 1.0)
示例：

Colors.blue.withOpacity(0.3);
// OR
Color.fromRGBO(50, 45, 220, 0.3);

编辑
您可以像这样简化布局。

主页

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomContainer(
        child: Column(
          children: [
            // other widgets and your containers here
          ],
        ),
      ),
    );
  }
}

您的 CustomContainer 小部件

class CustomContainer extends StatelessWidget {
  final Widget child;
  CustomContainer({this.child});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomLeft,
          colors: [
            Color(0xFF1187be),
            Color(0xff061465),
          ],
        ),
      ),
      child: child,
    );
  }
}

推荐阅读