【Flutter】容器类组件之装饰容器
前言
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】容器类组件之装饰容器的更多相关文章
- 【Flutter】容器类组件之Container容器
前言 Container是一个组合类容器,它本身不对应具体的RenderObject,它是DecoratedBox.ConstrainedBox.Transform.Padding.Align等组件组 ...
- 【Flutter实战】定位装饰权重组件及柱状图案例
老孟导读:Flutter中有这么一类组件,用于定位.装饰.控制子组件,比如 Container (定位.装饰).Expanded (扩展).SizedBox (固定尺寸).AspectRatio (宽 ...
- 【Flutter】容器类组件之Scaffold、TabBar、底部导航
前言 一个完整的路由页可能会包含导航栏.抽屉菜单(Drawer)以及底部Tab导航菜单等.Flutter Material组件库提供了一些现成的组件来减少开发任务.Scaffold是一个路由页的骨架, ...
- flutter Container组件和Text组件
在开始之前,我们先写一个最简单的入口文件: 后面,都是在这个结构的基础上面完成的. 由于Container组件和Text组件都是写在body里面的,所以下面,先将body抽离成一个组件的形式. ...
- Flutter 基础组件:进度指示器
前言 Material 组件库中提供了两种进度指示器:LinearProgressIndicator和CircularProgressIndicator,它们都可以同时用于精确的进度指示和模糊的进度指 ...
- 8、组件注册-@Import-给容器中快速导入一个组件
8.组件注册-@Import-给容器中快速导入一个组件 8.1 给容器中注册组建的方式 包扫描+组建标注注解(@Controller.@Service.@Repository.@Component)[ ...
- Flutter 父子组件传值
Flutter 父子组件传值 一父传子: 父中: void onButtonChange(val1,val2,val3){ print('============================子向父 ...
- Flutter InkWell - Flutter每周一组件
Flutter Inkwell使用详解 该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://gi ...
- Flutter ListTile - Flutter每周一组件
该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://github.com/xj124456/fl ...
随机推荐
- 题解-CF1437F Emotional Fishermen
题面 CF1437F Emotional Fishermen 给 \(n\) 个数的序列 \(a_i\),求有多少种 \(n\) 个数的排列 \(p_i\),使得 \[\frac{a_{p_i}}{\ ...
- 题解-洛谷P4724 【模板】三维凸包
洛谷P4724 [模板]三维凸包 给出空间中 \(n\) 个点 \(p_i\),求凸包表面积. 数据范围:\(1\le n\le 2000\). 这篇题解因为是世界上最逊的人写的,所以也会有求凸包体积 ...
- Java集合源码分析(七)——TreeMap
简介 TreeMap 是一个有序的key-value集合,它的内部是通过红黑树实现的. TreeMap 继承于AbstractMap,所以它是一个Map,即一个key-value集合. TreeMap ...
- The Linux Scheduler: a Decade of Wasted Cores
The Linux Scheduler: a Decade of Wasted Cores 这是一篇介绍Linux调度问题的文章,源自这篇文章.文章中涉及到的一些问题可能已经得到解决,但可以学习一下本 ...
- vue 分支结构
分支循环结构 分支循环结构指令 v-if v-else v-else-if v-show v-if 指令 可以直接在元素中添加指令,添加判断的值 最后运行可以得到结果是: v-show v-show ...
- js下 Day05、DOM案例
一.简易购物车 效果图: 功能思路分析: 功能一:数量加减 \1. 找到所有的加号按钮,循环绑定点击事件.点击加号时让对应的数量+1 (找清楚加号和数量的关系,让数量标签的内容++) \2. 找到所有 ...
- windows jupyter lab中.ipynb转中文PDF
在jupyter lab中,File-Export Notebook as-Export Notebook to PDF,可以导出成PDF格式的文档,但在操作前需要安装些程序.1. 安装pandocA ...
- AD PCB模块复用
该文档为原创,转发需注明出处!https://www.cnblogs.com/brianblog/ 在画图的时候如果遇到PCB中有多个模块原理图是一模一样的时候,我们便会想能不能偷点懒,只画一个模块, ...
- 关于AES-CBC模式字节翻转攻击(python3)
# coding:utf-8 from Crypto.Cipher import AES import base64 def encrypt(iv, plaintext): if len(plaint ...
- Asp.Net WebApi使用Websocket
直接上代码 /// <summary> /// WebSocket Handler /// </summary> public class QWebSocketHandler ...