DecoratedBox: 装饰容器,在其子widget绘制前(或后)绘制一个装饰Decoration(如背景、边框、渐变等)

import 'package:flutter/material.dart';

class AuthList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('代码测试'),
centerTitle: true,
),
body: Container(
margin: EdgeInsets.all(20.0),
child: DecoratedBox(
// decoration
decoration: BoxDecoration(
gradient:
LinearGradient(colors: [Colors.redAccent, Colors.blue]),
borderRadius: BorderRadius.all(Radius.circular(10.0)),
boxShadow: [ // 数组
BoxShadow(
color: Colors.black45, // 阴影颜色
offset: Offset(20.0, 80.0), // 阴影与容器的距离, x轴,y轴
blurRadius: 6.0),
// // 模糊程度
]),
// the decorated container.
child: Container(
height: 200.0,
),
),
));
}
}

Flutter 容器(7) - DecoratedBox的更多相关文章

  1. Flutter 容器Container类和布局Layout类

    1.布局和容器 [布局]是把[容器]按照不同的方式排列起来. Scaffold包含的主要部门:appBar,body,bottomNavigator 其中body可以是一个布局组件,也可以是一个容器组 ...

  2. Flutter 容器 (1) - Center

    Center容器用来居中widget import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { ...

  3. flutter 容器

    Flutter 有着丰富的布局控件库 . Flutter 中的布局整体分为 Single-child layout widget (单子布局部件) Multi-child layout widget ...

  4. Flutter 容器(8) - SizedOverflowBox | OverflowBox

    SizedOverflowBox: 子组件在超出SizedOverflowBox指定的宽高时,不会隐藏,依然进行绘制 OverflowBox: 限制子组件的宽高. import 'package:fl ...

  5. Flutter 容器(6) - FractionallySizedBox

    FractionallySizedBox 用法与SizedBox类似,只不过FractionallySizedBox的宽高是百分比大小,widthFactor,heightFactor参数就是相对于父 ...

  6. Flutter 容器(5) - SizedBox

    SizedBox: 两种用法:一是可用来设置两个widget之间的间距,二是可以用来限制子组件的大小. import 'package:flutter/material.dart'; class Au ...

  7. Flutter 容器(4) - Container

    Container 类似于HTML中的div标签 import 'package:flutter/material.dart'; class AuthList extends StatelessWid ...

  8. Flutter 容器(3) - AnimatedPadding

    AnimatedPadding : 会产生动画效果的padding,在给定时间内缩放到指定padding import 'package:flutter/material.dart'; class A ...

  9. Flutter 容器 (2) - Padding

    Padding: 内边距Widget,与CSS中的padding相似. import 'package:flutter/material.dart'; class AuthList extends S ...

随机推荐

  1. 面试官:请你说下N95应该怎么测试?这样回答让他竖起大拇指!

    随着”新冠疫情“慢慢地消散,各大企业都开始恢复正常的运行. 因为疫情造成很多工作人员的流失,企业也开始疯狂的招聘新鲜的人才,这对于莘莘求职者无疑是个机会. 但是因为求职者众多,很多面试官也开始想方设法 ...

  2. vuex : 用vuex控制侧栏点亮状态

    上代码. xxx.vue <template> <div id="xxx"> <div class="layout"> &l ...

  3. 题解 洛谷 P5311 【[Ynoi2011]成都七中】

    每次询问是关于 \(x\) 所在的连通块,所以考虑用点分树来解决本题. 点分树上每个节点所对应的子树,都是原树中的一个连通块.询问中给定 \(x\) 和区间 \([l,r]\),其就已经确定了原树的一 ...

  4. css盒子流动和block。inline

    回忆一下盒子流动等概念! 1.盒子模型的宽度与高度,都是包括padding的值.(代码的理解如下:) 这样的结果的到就是  宽度和高度都是220了 2.流动型,在标签中存在块级元素和行内元素, 块级元 ...

  5. jmeter接口测试 -- 数据库操作(mysql)

    一.操作类型 语句类型 1.查询语句 2.非查询语句 1)update 2)insert into 3)删除 二.把返回值的化为变量 1.执行语句,并引用变量 2.查看结果

  6. Python网络编程基础|百度网盘免费下载|零基础入门学习资料

    百度网盘免费下载:Python网络编程基础|零基础学习资料 提取码:k7a1 目录: 第1部分 底层网络 第1章 客户/服务器网络介绍 第2章 网络客户端 第3章 网络服务器 第4章 域名系统 第5章 ...

  7. 图书馆管理系统程序+全套开发文档(系统计划书,系统使用说明,测试报告,UML分析与设计,工作记录)

    图书馆管理系统程序+全套开发文档(系统计划书,系统使用说明,测试报告,UML分析与设计,工作记录): https://download.csdn.net/download/qq_39932172/11 ...

  8. js控制语句练习(回顾)

    1.一个小球从100米空中落下,每次反弹一半高度,小球总共经过多少米,请问第10次反弹的高度是多少? //定义初始下落过程高度 var sum1= 0; //定义初始上升高度 var sum2= 0; ...

  9. 删除GIT中的.DS_Store

    转载自:https://www.jianshu.com/p/fdaa8be7f6c3 .DS_Store 是什么 使用 Mac 的用户可能会注意到,系统经常会自动在每个目录生成一个隐藏的 .DS_St ...

  10. html中input提示文字样式修改

    在很多网站上我们都看到input输入框显示提示文字,让我们一起来看看如果在input输入框中显示提示文字.我们只需要在<input>标签里添加:placeholder="提示文字 ...