flutter 设置阴影

淡淡的烟草味﹌ 2023-02-17 05:17 33阅读 0赞

1、主要是 **boxShadow** 这个属性

Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(28)),
        boxShadow: [
          BoxShadow(
              color: Colors.red,  //底色,阴影颜色
              offset: Offset(0, 0), //阴影位置,从什么位置开始
              blurRadius: 1,  // 阴影模糊层度
              spreadRadius: 0,  //阴影模糊大小
        ],
      ),
      child: Container(),
    ),

2、效果，边缘有阴影

![20200612170258252.png][]

3、扩展

**boxShadow 是一个数组，可以设置多个，效果更炫酷**

Container(
      width: 20,
      height: 20,
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.all(Radius.circular(20)),
        boxShadow: [
          BoxShadow(color: Colors.green,offset: Offset(0, 0),blurRadius: 1,spreadRadius: 5),
          BoxShadow(color: Colors.yellowAccent,offset: Offset(0, 0),blurRadius: 1,spreadRadius: 4),
          BoxShadow(color: Colors.blue,offset: Offset(0, 0),blurRadius: 1,spreadRadius: 3),
        ],
      ),
      child: Container(),
    );

效果

![20200612171109446.png][]

[20200612170258252.png]: https://img-blog.csdnimg.cn/20200612170258252.png
[20200612171109446.png]: https://img-blog.csdnimg.cn/20200612171109446.png

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关 Qt设置边框阴影效果

1.运行界面 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u...

心已赠人/ 2024年04月18日 08:40/ 0 赞/ 214 阅读

相关 UIView设置阴影

//UIView设置阴影 [[viewTest layer] setShadowOffset:CGSizeMake(1, 1)]; [[

小灰灰/ 2023年10月18日 14:19/ 0 赞/ 272 阅读

相关 Flutter开发 - 总结了两种设置阴影比较友好的方式

给view加阴影这个需求还算是比较常见的，在flutter中也同样，回顾过去的开发内容，一共用过两种加阴影的方式，今天分享给大家，看下效果图： ![在这里插入图片描述][w

àì夳堔傛蜴生んèń/ 2023年10月04日 08:03/ 0 赞/ 62 阅读

相关设置css阴影和取消css阴影

之前用mui布局样式，但是一直都会有这个阴影，在浏览器调试也调试没用 ![在这里插入图片描述][20191010172507832.png] 这是设置阴影 /

雨点打透心脏的1/2处/ 2023年06月06日 08:16/ 0 赞/ 174 阅读

相关 flutter 设置阴影

1、主要是 boxShadow 这个属性 Container( width: 50, height: 50, decoration

淡淡的烟草味﹌/ 2023年02月17日 05:17/ 0 赞/ 34 阅读

相关阴影背景 android,Android 给控件设置带阴影背景

最简单的方法就是用背景图片了，哈哈，不过这里说下用xml实现，主要用到标签，看例子： android:id="@+id/id\_done\_tv" android:layo

骑猪看日落/ 2022年10月17日 11:22/ 0 赞/ 350 阅读

相关 android阴影字体设置

原文：[http://www.oschina.net/question/157182\_45893][http_www.oschina.net_question_157182_

深碍√TFBOYSˉ_/ 2022年10月02日 13:50/ 0 赞/ 352 阅读

相关 CSS3 box-shadow 设置元素阴影、text-shadow 设置文本阴影

目录 box-shadow 设置元素阴影 text-shadow 设置文本阴影 -------------------- box-shadow 设置元素阴影 bo

青旅半醒/ 2022年04月14日 01:54/ 0 赞/ 649 阅读

相关 flutter 给icon图标添加阴影

众所周知flutter material库提供的Icon部件没有提供阴影熟悉，而有时候需要给图标添加阴影，那怎么办呢？先看看icon怎么写的 ![20190125183

た入场券/ 2022年03月22日 04:06/ 0 赞/ 538 阅读

相关 flutter 启动页设置

1、在main.dart的MaterialApp内,将home对应的组件内容设置成,启动页所在组件 2、在启动页所在路由设置启动图片等 3、在initS

素颜马尾好姑娘i/ 2021年07月24日 11:20/ 0 赞/ 893 阅读