Flutter学习笔记边框

最新推荐文章于 2024-04-30 22:52:07 发布

我好菜啊~

最新推荐文章于 2024-04-30 22:52:07 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter

本文链接：https://blog.csdn.net/weixin_42215775/article/details/100978168

Flutter 专栏收录该内容

19 篇文章

订阅专栏

本文深入解析Flutter中的BoxDecoration装饰器，展示如何通过该组件实现颜色、边框、圆角、阴影及渐变效果，帮助开发者掌握美化Widget的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BoxDecoration（装饰器）

const BoxDecoration({
  this.color,
  this.image,
  this.border,
  this.borderRadius,
  this.boxShadow,
  this.gradient,
  this.backgroundBlendMode,
  this.shape = BoxShape.rectangle,
})

例：

在这里插入图片描述

      body: Center(
        child: Container(
          height: 100.0,
          width: 100.0,
//          color: Colors.pinkAccent,   //会跟decoration里的Color冲突
          decoration: BoxDecoration(
            color: Colors.blue,
            border: Border.all(
              color: Colors.yellow,
              width: 5.0,
              style: BorderStyle.solid,
            ),
            borderRadius: BorderRadius.circular(20.0),
            //圆角
            boxShadow: [
              BoxShadow(
                offset: Offset(5.0, 5.0), //偏移
                color: Colors.grey,
                blurRadius: 10.0, //阴影的模糊
                spreadRadius: 10.0, //阴影的扩散
              ),
            ],
            //shape: BoxShape.rectangle,    //形状，注意与borderRadius冲突
            gradient:
                //镜像渐变
//            RadialGradient(colors: [
//              Color.fromRGBO(7, 102, 255, 1.0),
//              Color.fromRGBO(3, 28, 128, 1.0)
//            ]),
                //线性渐变
                LinearGradient(
              colors: [
                Color.fromRGBO(7, 102, 255, 1.0),
                Color.fromRGBO(3, 28, 128, 1.0)
              ],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
            ),
          ),
        ),
      ),