前言

DecoratedBox可以在其子组件绘制前后绘制一些装饰,例如背景,边框,渐变等。

接口描述

const DecoratedBox({
Key key,
// 代表要绘制的装饰
@required this.decoration,
// 决定在哪里绘制Decoration。它接收DecorationPosition的枚举类型,该枚举类有两个值:background:在子组件之后绘制,即背景装饰;foreground:在子组件之上绘制,即前景。
this.position = DecorationPosition.background,
Widget child,
}) : assert(decoration != null),
assert(position != null),
super(key: key, child: child); oxDecoration({
Color color, //颜色
DecorationImage image,//图片
BoxBorder border, //边框
BorderRadiusGeometry borderRadius, //圆角
List<BoxShadow> boxShadow, //阴影,可以指定多个
Gradient gradient, //渐变
BlendMode backgroundBlendMode, //背景混合模式
BoxShape shape = BoxShape.rectangle, //形状
})

代码示例

// 装饰容器(DecoratedBox)
// DecoratedBox可以在其子组件绘制前后绘制一些装饰,例如背景,边框,渐变等。 import 'package:flutter/material.dart'; class DecoratedBoxTest extends StatelessWidget { @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('带阴影的背景色渐变按钮'),
),
body: Container(
child: Column(
children: <Widget>[
// 装饰容器
DecoratedBox(
// 绘制修饰
decoration: BoxDecoration(
// 背景渐变
gradient: LinearGradient(colors: [Colors.red, Colors.orange[700]]),
// 3像素圆角
borderRadius: BorderRadius.circular(3.0),
// 阴影
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2.0, 2.0),
blurRadius: 4.0,
)
]
), child: Padding(
padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
child: Text('Login', style: TextStyle(color: Colors.white),),
), ),
],
),
),
);
}
}

总结

虽然我们实现了一个渐变按钮的外观,但是它不是一个标准的按钮,即不能响应点击事件。例子中使用了LinearGradient类,它用于定义线性渐变的类。Flutter中还提供了其他渐变配置类,例如如RadialGradient、SweepGradient等。

【Flutter】容器类组件之装饰容器的更多相关文章

  1. 【Flutter】容器类组件之Container容器

    前言 Container是一个组合类容器,它本身不对应具体的RenderObject,它是DecoratedBox.ConstrainedBox.Transform.Padding.Align等组件组 ...

  2. 【Flutter实战】定位装饰权重组件及柱状图案例

    老孟导读:Flutter中有这么一类组件,用于定位.装饰.控制子组件,比如 Container (定位.装饰).Expanded (扩展).SizedBox (固定尺寸).AspectRatio (宽 ...

  3. 【Flutter】容器类组件之Scaffold、TabBar、底部导航

    前言 一个完整的路由页可能会包含导航栏.抽屉菜单(Drawer)以及底部Tab导航菜单等.Flutter Material组件库提供了一些现成的组件来减少开发任务.Scaffold是一个路由页的骨架, ...

  4. flutter Container组件和Text组件

    在开始之前,我们先写一个最简单的入口文件:     后面,都是在这个结构的基础上面完成的. 由于Container组件和Text组件都是写在body里面的,所以下面,先将body抽离成一个组件的形式. ...

  5. Flutter 基础组件:进度指示器

    前言 Material 组件库中提供了两种进度指示器:LinearProgressIndicator和CircularProgressIndicator,它们都可以同时用于精确的进度指示和模糊的进度指 ...

  6. 8、组件注册-@Import-给容器中快速导入一个组件

    8.组件注册-@Import-给容器中快速导入一个组件 8.1 给容器中注册组建的方式 包扫描+组建标注注解(@Controller.@Service.@Repository.@Component)[ ...

  7. Flutter 父子组件传值

    Flutter 父子组件传值 一父传子: 父中: void onButtonChange(val1,val2,val3){ print('============================子向父 ...

  8. Flutter InkWell - Flutter每周一组件

    Flutter Inkwell使用详解 该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://gi ...

  9. Flutter ListTile - Flutter每周一组件

    该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://github.com/xj124456/fl ...

随机推荐

  1. 题解-CF1437F Emotional Fishermen

    题面 CF1437F Emotional Fishermen 给 \(n\) 个数的序列 \(a_i\),求有多少种 \(n\) 个数的排列 \(p_i\),使得 \[\frac{a_{p_i}}{\ ...

  2. 题解-洛谷P4724 【模板】三维凸包

    洛谷P4724 [模板]三维凸包 给出空间中 \(n\) 个点 \(p_i\),求凸包表面积. 数据范围:\(1\le n\le 2000\). 这篇题解因为是世界上最逊的人写的,所以也会有求凸包体积 ...

  3. Java集合源码分析(七)——TreeMap

    简介 TreeMap 是一个有序的key-value集合,它的内部是通过红黑树实现的. TreeMap 继承于AbstractMap,所以它是一个Map,即一个key-value集合. TreeMap ...

  4. The Linux Scheduler: a Decade of Wasted Cores

    The Linux Scheduler: a Decade of Wasted Cores 这是一篇介绍Linux调度问题的文章,源自这篇文章.文章中涉及到的一些问题可能已经得到解决,但可以学习一下本 ...

  5. vue 分支结构

    分支循环结构 分支循环结构指令 v-if v-else v-else-if v-show v-if 指令 可以直接在元素中添加指令,添加判断的值 最后运行可以得到结果是:  v-show v-show ...

  6. js下 Day05、DOM案例

    一.简易购物车 效果图: 功能思路分析: 功能一:数量加减 \1. 找到所有的加号按钮,循环绑定点击事件.点击加号时让对应的数量+1 (找清楚加号和数量的关系,让数量标签的内容++) \2. 找到所有 ...

  7. windows jupyter lab中.ipynb转中文PDF

    在jupyter lab中,File-Export Notebook as-Export Notebook to PDF,可以导出成PDF格式的文档,但在操作前需要安装些程序.1. 安装pandocA ...

  8. AD PCB模块复用

    该文档为原创,转发需注明出处!https://www.cnblogs.com/brianblog/ 在画图的时候如果遇到PCB中有多个模块原理图是一模一样的时候,我们便会想能不能偷点懒,只画一个模块, ...

  9. 关于AES-CBC模式字节翻转攻击(python3)

    # coding:utf-8 from Crypto.Cipher import AES import base64 def encrypt(iv, plaintext): if len(plaint ...

  10. Asp.Net WebApi使用Websocket

    直接上代码 /// <summary> /// WebSocket Handler /// </summary> public class QWebSocketHandler ...