flutter 抖动：当我添加框阴影时容器的颜色发生变化(不透明度和框阴影效果不佳)

eanckbw9 于 2023-01-27 发布在 Flutter

关注(0)|答案(3)|浏览(147)

我试图做一个简单的容器与阴影效果。这是一个不透明的容器与框阴影效果。但我不认为'。withOpacity'和'boxShadow'一起工作。因为每次我添加'boxShadow'到我的容器，它使我的容器的颜色变化。这是我的代码

return Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage("assets/background/bg_app_background.png"),
          fit: BoxFit.cover,
        ),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          title: const Text("TEST"),
        ),
        body: SafeArea(
          child: Container(
            margin:
                const EdgeInsets.symmetric(horizontal: 20.0, vertical: 30.0),
            alignment: Alignment.center,
            width: double.infinity,
            height: 200,
            decoration: BoxDecoration(
              color: const Color(0xFFFFFFFF).withOpacity(0.4),
              borderRadius: const BorderRadius.all(Radius.circular(8.0)),
              border: Border.all(
                  color: const Color(0xFFFFFFFF),
                  width: 1.0,
                  style: BorderStyle.solid),
              boxShadow: <BoxShadow>[
                BoxShadow (
                    color: const Color(0xFF000000).withOpacity(0.16),
                    offset: const Offset(0.0, 3.0),
                    blurRadius: 6.0,
                    //blurStyle: BlurStyle.outer
                ),
              ],
            ),
          ),
        ),
      ),
    );

这就是我想要的

但这就是我收到的（它更黑暗，对吗？）

是的，我试过'blurStyle：但它使我的容器的边界看起来很糟糕

有没有办法让不透明度和盒影一起工作？

flutter

来源：https://stackoverflow.com/questions/73216278/flutter-containers-color-change-when-i-add-box-shadow-opacity-and-boxshadow-d

3条答案

按热度按时间

2guxujil1#

我认为这是使用BackdropFilter

class GlassMorphism extends StatelessWidget {
  GlassMorphism({
    Key? key,
    required this.blur,
    required this.opacity,
    required this.child,
    required this.color,
    BorderRadius? borderRadius,
  })  : _borderRadius = borderRadius ?? BorderRadius.circular(12),
        super(key: key);
  final Color color;
  final double blur;
  final double opacity;
  final Widget child;

  final BorderRadius _borderRadius;

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: _borderRadius,
      child: BackdropFilter(
        filter: ImageFilter.blur(
          sigmaX: blur,
          sigmaY: blur,
        ),
        child: Container(
          decoration: BoxDecoration(
            color: color.withOpacity(opacity),
            borderRadius: _borderRadius,
            border: Border.all(
              color: color,
            ),
          ),
          child: child,
        ),
      ),
    );
  }
}

利用它

class GSX extends StatelessWidget {
  const GSX({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => Container(
          width: constraints.maxWidth,
          height: constraints.maxHeight,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.amber.shade100,
                Colors.blue.shade100,
              ],
            ),
          ),
          child: Column(
            children: [
              GlassMorphism(
                color: Colors.white,
                blur: 1,
                opacity: .4,
                child: Container(height: 200, width: 100, child: Text("AA")),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2023-01-27

4dbbbstv2#

return Container(
  decoration: const BoxDecoration(
    gradient: LinearGradient(colors:[Color(0xFFd9a7c7),Color(0xFF30E8BF),]),
  ),
  child: Scaffold(
    backgroundColor: Colors.transparent,
    appBar: AppBar(title: const Text("TEST")),
    body: SafeArea(
      child: Container(
        margin:
            const EdgeInsets.symmetric(horizontal: 20.0, vertical: 30.0),
        alignment: Alignment.center,
        width: double.infinity,
        height: 200,
        decoration: BoxDecoration(
          color: const Color(0xFFFFFFFF).withOpacity(0.5),
          borderRadius: const BorderRadius.all(Radius.circular(8.0)),
          border: Border.all(
              color: const Color(0xFFFFFFFF),
              width: 1.0,
              style: BorderStyle.solid),
          boxShadow:  <BoxShadow>[
            BoxShadow(
              color: Colors.black12.withOpacity(0.1),
              offset: Offset(2.0, 4.0),
              blurRadius: 6.0,
              //blurStyle: BlurStyle.outer
            ),
          ],
        ),

      ),
    ),
  ),
);

赞(0）回复(0）举报 2023-01-27

ckocjqey3#

您可以创建自定义长方体阴影，如下所示：

class CustomBoxShadow extends BoxShadow {
  final BlurStyle blurStyle;

  const CustomBoxShadow({
    super.color,
    super.offset,
    super.blurRadius,
    this.blurStyle = BlurStyle.normal,
  });

  @override
  Paint toPaint() {
    final Paint result = Paint()
      ..color = color
      ..maskFilter = MaskFilter.blur(blurStyle, blurSigma);
    assert(() {
      if (debugDisableShadows) {
        result.maskFilter = null;
      }
      return true;
    }());
    return result;
  }
}

然后像这样使用它：

CustomBoxShadow(
  blurRadius: 10,
  color: Colors.white.withOpacity(.3),
  offset: const Offset(0, 5),
  blurStyle: BlurStyle.outer, //<--- this will give shadow outwards
),

赞(0）回复(0）举报 2023-01-27

我来回答

flutter 抖动：当我添加框阴影时容器的颜色发生变化(不透明度和框阴影效果不佳)

3条答案

相关问题

热门标签

最新问答