(原创)Flutter基础入门:装饰器Decoration

文章介绍了Flutter中的Decoration机制,用于组件样式设计,如BoxDecoration用于边框、圆角、阴影等效果,ShapeDecoration则提供形状装饰。通过Decoration,开发者可以实现类似Android中的控件样式。此外,文章还提到了自定义Decoration的方法,并提供了相关资源链接。

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

前言

作为一个Android开发,最近打算把自己学的Flutter相关知识做个积累,所以这会是一个系列的博客。里面讲的都会是一些Flutter相关的知识,有基础的,也有比较深入的,由浅入深嘛。

那么今天作为开篇,就先讲讲Flutter中的装饰器:Decoration

在Android开发中,我们经常会对控件做一些样式的改变,比如背景色,shape,遮罩等等,Android有自己的一套实现方案,对应到Flutter,我们要实现这样类似的效果,就要用到Decoration这个类

Decoration作为一个接口,它是有很多的实现类的,具体如下:
在这里插入图片描述
比较常用的例如:BoxDecoration和ShapeDecoration,这篇文章都会讲到
那么Decoration是怎么用的呢?
可以看到我们的一些组件,比如Container组件、DecoratedBox组件,它们的构造方法里面有一个decoration属性,其实就是Decoration类,我们就可以通过配置我们自己的Decoration装饰,来完成组件的样式的配置,例如:

child: Container(
  width: 100,
  height: 100,
  alignment: Alignment.center,
  child: Text('Button'),
  decoration: BoxDecoration(
      borderRadius: BorderRadiusDirectional.circular(10),
      color: Colors.blue),
),

这样我们就实现了一个文字组件的圆角样式
在这里插入图片描述
下面我们具体讲一下它的实现类

Decoration的子类

BoxDecoration

BoxDecoration主要用来实现边框、圆角、阴影、形状、渐变、背景图像等装饰
可以看它的构造方法里面:

const BoxDecoration({
    this.color,//填充色
    this.image,//图片
    this.border,//描边
    this.borderRadius,//圆角
    this.boxShadow,//阴影
    this.gradient,//渐变
    this.backgroundBlendMode,//混合模式
    this.shape = BoxShape.rectangle,//样式:圆形还是长方形
  })

如果我们要实现Android中类似Shape的效果,用BoxDecoration就没错了

ShapeDecoration

ShapeDecoration和BoxDecoration类似,可以理解为精简版
看它的构造:

  const ShapeDecoration({
    this.color,
    this.image,
    this.gradient,
    this.shadows,
    required this.shape,
  })

可以看到有一个shape属性,这个属性比较特殊,它是一个ShapeBorder抽象类
ShapeBorder常用来实现各种描边的效果
在下一篇中我们讲Shape描边效果实现中也会提到

这个抽象类也有很多子类的实现,其实也是flutter提供给我们的一些已经定制好的shape样式:
在这里插入图片描述
比较常用的如:Border、CircleBorder、BoxBorder等
具体的可以参考这篇博客,它列举出了一些常用的效果:
Flutter shape类型组件

FlutterLogoDecoration

照例看它的构造方法:

  const FlutterLogoDecoration({
    this.textColor = const Color(0xFF757575),
    this.style = FlutterLogoStyle.markOnly,
    this.margin = EdgeInsets.zero,
  })

正常情况下基本没有用,这个就是flutter的logo。

UnderlineTabindicator

UnderlineTabindicator主要是给组件划线,默认是放到组件下面
所以可以实现简单的下划线功能
这边举个例子:

decoration: UnderlineTabIndicator(
    borderRadius:BorderRadius.circular(10), //下划线的圆角
    borderSide: BorderSide(color: Colors.blue, width: 3.0),//下划线颜色和宽度
    insets: EdgeInsets.fromLTRB(0, 0, 0, 5)),//下划线起始位置距离上下左右的距离,默认都是0,

这边特意说下insets这个属性
默认都是0,这时候默认位置就是在组件的左下方开始绘制
我这边设置bottom为5,意味着距离组件下方5个单位
如果组件高度为10的话,其实就是画了个中划线了
类似这种:
在这里插入图片描述

MagnifierDecoration

这个暂时还没用过,后面补充

自定义Decoration

我们也可以自己定义自己的装饰器
可以参考这篇博客
Flutter 自定义Decoration

结尾

本文相关资料:
在 Flutter 中如何给组件设置背景色、圆角、边框、形状、阴影、渐变色、背景图片等效果
关于Decoration大概就是这些内容,下一篇打算讲Flutter中如何实现Android中各种Shape的效果
链接如下:
Flutter基础入门:实现各种Shape效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值