Flutter 容器(7) - DecoratedBox
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的更多相关文章
- Flutter 容器Container类和布局Layout类
1.布局和容器 [布局]是把[容器]按照不同的方式排列起来. Scaffold包含的主要部门:appBar,body,bottomNavigator 其中body可以是一个布局组件,也可以是一个容器组 ...
- Flutter 容器 (1) - Center
Center容器用来居中widget import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { ...
- flutter 容器
Flutter 有着丰富的布局控件库 . Flutter 中的布局整体分为 Single-child layout widget (单子布局部件) Multi-child layout widget ...
- Flutter 容器(8) - SizedOverflowBox | OverflowBox
SizedOverflowBox: 子组件在超出SizedOverflowBox指定的宽高时,不会隐藏,依然进行绘制 OverflowBox: 限制子组件的宽高. import 'package:fl ...
- Flutter 容器(6) - FractionallySizedBox
FractionallySizedBox 用法与SizedBox类似,只不过FractionallySizedBox的宽高是百分比大小,widthFactor,heightFactor参数就是相对于父 ...
- Flutter 容器(5) - SizedBox
SizedBox: 两种用法:一是可用来设置两个widget之间的间距,二是可以用来限制子组件的大小. import 'package:flutter/material.dart'; class Au ...
- Flutter 容器(4) - Container
Container 类似于HTML中的div标签 import 'package:flutter/material.dart'; class AuthList extends StatelessWid ...
- Flutter 容器(3) - AnimatedPadding
AnimatedPadding : 会产生动画效果的padding,在给定时间内缩放到指定padding import 'package:flutter/material.dart'; class A ...
- Flutter 容器 (2) - Padding
Padding: 内边距Widget,与CSS中的padding相似. import 'package:flutter/material.dart'; class AuthList extends S ...
随机推荐
- 解决使用resin服务器Unsupported major.minor version 51.0错误
是因为jdk版本不对,更换成需要的版本
- OSCP Learning Notes - Scanning(1)
TCP vs UDP TCP: Connection-oriented Suited for applications that require high reliablity[HTTP, FTP,T ...
- cube-ui普通编译实践
实践场景(在老的项目添加cube-ui) 查看vue-cli版本 npm info vue-cli // version: '2.9.6', 添加cube-ui依赖 npm install cube- ...
- navcat 增删改查
navcat // sql 语句结尾的地方需要 设置为空 SELECT * FROM users ; UPDATE users SET uname = 'hezhi' WHERE uid = 3 // ...
- Java基础之常用知识点博客汇总
正则: 正则表达式 :https://www.cnblogs.com/lzq198754/p/5780340.html 正则表达式大全:https://blog.csdn.net/zpz2411232 ...
- Python编程初学者指南|百度网盘免费下载|Python新手入门资料
Python编程初学者指南|百度网盘免费下载 提取码:9ozx 目录 · · · · · · 第1章 启程:Game Over程序1.1 剖析Game Over程序1.2 Python简介1.2.1 ...
- css中使用浮动的情况和清除浮动的方法
1.使用浮动时出现的情况: (1)使块元素在一行显示 (2)使内嵌元素支持宽高 (3)不设置宽高的时候宽度由内容撑开 (4)换行不被解析(故使用行内元素的时候清除间隙的方法可以使用浮动) (5)元素添 ...
- xctf-web supersqli
单引号注入,用order by查到了两个column.用union select的时候发现select关键字被过滤了 用分号尝试堆叠注入显示出了两张表 分别查询字段 flag在表19198109311 ...
- Python的条件判断与循环
1.if语句 Python中条件选择语句的关键字为:if .elif .else这三个.其基本形式如下 if condition: blockelif condition: block...else: ...
- 如何查看Oracle的版本
本人使用的软件是DataGrip 在控制台输入 select * from v$version;