【Flutter】容器类组件之Container容器
前言
Container是一个组合类容器,它本身不对应具体的RenderObject,它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器,所以只需通过一个Container组件可以实现同时需要装饰、变换、限制的场景。
接口描述
Container({
Key key,
// 文字对齐方式
this.alignment,
// 容器内补白,属于decoration的装饰范围
this.padding,
// 背景色
Color color,
// 背景装饰
Decoration decoration,
// 前景装束
this.foregroundDecoration,
// 容器的宽度和高度
double width,
double height,
// 容器大小的限制范围
BoxConstraints constraints,
// 容器外补白,不属于decoration的装饰范围
this.margin,
// 变换
this.transform,
this.child,
})
接口说明
- 容器的大小可以通过width、height属性来指定,也可以通过constraints来指定;如果它们同时存在时,width、height优先。实际上Container内部会根据width、height来生成一个constraints。
- color和decoration是互斥的,如果同时设置它们则会报错!实际上,当指定color时,Container内会自动创建一个decoration。
代码示例
// Container容器
// Container是一个组合类容器,它本身不对应具体的RenderObject,它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器,
// 所以只需通过一个Container组件可以实现同时需要装饰、变换、限制的场景。
import 'package:flutter/material.dart';
class ContainerTest extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Container容器'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//
Container(
// 容器外填充
margin: EdgeInsets.only(top: 50.0, left: 120.0),
// 卡片大小
constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0),
// 背景修饰
decoration: BoxDecoration(
// 背景径向渐变
gradient: RadialGradient(
colors: [Colors.red, Colors.orange],
center: Alignment.topLeft,
radius: .98,
),
// 卡片阴影
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2.0, 2.0),
blurRadius: 4.0
)
]
),
// 卡片倾斜变换
transform: Matrix4.rotationZ(.2),
alignment: Alignment.center,
child: Text('Hello', style: TextStyle(color: Colors.white, fontSize: 40.0),),
)
],
),
);
}
}
总结
可以发现,直观的感觉就是margin的留白是在容器外部,而padding的留白是在容器内部,需要记住这个重要差异。事实上,Container内margin和padding都是通过Padding 组件来实现的。
通过以下代码对比:
Container(
margin: EdgeInsets.all(20.0), //容器外补白
color: Colors.orange,
child: Text("Hello world!"),
),
Container(
padding: EdgeInsets.all(20.0), //容器内补白
color: Colors.orange,
child: Text("Hello world!"),
),
等价于
Padding(
padding: EdgeInsets.all(20.0),
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.orange),
child: Text("Hello world!"),
),
),
DecoratedBox(
decoration: BoxDecoration(color: Colors.orange),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text("Hello world!"),
),
),
【Flutter】容器类组件之Container容器的更多相关文章
- 【Flutter】容器类组件之装饰容器
前言 DecoratedBox可以在其子组件绘制前后绘制一些装饰,例如背景,边框,渐变等. 接口描述 const DecoratedBox({ Key key, // 代表要绘制的装饰 @requir ...
- Flutter Container容器组件、Text文本组件详解
import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } class MyApp extends Stateles ...
- Flutter常用组件(Widget)解析-Container
一个组件它往往包含了一些常见的painting, positioning和sizing这样的小部件. Container相当于我们常用的div,在Flutter中用的非常多,现在来看看Containe ...
- 【Flutter】容器类组件之Scaffold、TabBar、底部导航
前言 一个完整的路由页可能会包含导航栏.抽屉菜单(Drawer)以及底部Tab导航菜单等.Flutter Material组件库提供了一些现成的组件来减少开发任务.Scaffold是一个路由页的骨架, ...
- Flutter 基础组件:进度指示器
前言 Material 组件库中提供了两种进度指示器:LinearProgressIndicator和CircularProgressIndicator,它们都可以同时用于精确的进度指示和模糊的进度指 ...
- Flutter 父子组件传值
Flutter 父子组件传值 一父传子: 父中: void onButtonChange(val1,val2,val3){ print('============================子向父 ...
- flutter 基础组件
TextWidget class TextWidget extends StatelessWidget { final TextStyle _textStyle = TextStyle( fontSi ...
- Flutter InkWell - Flutter每周一组件
Flutter Inkwell使用详解 该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://gi ...
- 关于Container容器以及IoC注入机制的认识
container 容器的概念: 1 container 是一个Java 所编写的程序,用于对象之间之间管理对象关系. 主要的java EE 容器如下: Java容器类包含List.ArrayList ...
随机推荐
- Codeforces Edu Round 60 A-E
A. Best Subsegment 显然,选择数列中的最大值当做区间(长度为\(1\)).只要尝试最大值这个区间是否能扩展(左右两边值是否跟它一样就行了) #include <cstdio&g ...
- 我对js数据类型的理解和深浅(copy)的应用场景
本人毕业一所专科院校,所学专业是计算机应用技术,在大学时对前端有了一定的了解之后,觉得自己对前端的兴趣十分强烈,开始自学前端,一路上也是坎坎坷坷,也有想要放弃的时候,还好坚持了下来,并且从事前端开发已 ...
- 搭建yum仓库服务器
环境:服务端centos6.9 客户端要求 能上网(可以ping通baidu.com) 1.yum的配置文件信息在/etc/yum.repos.d/下,我们配置的是自己的网络yum源,所以这些文件我们 ...
- 微信小程序自动化,记录趟过的坑!
项目思想:关键字+数据驱动混合测试 基于Android-微信小程序自动化的关键是:webview的切换 对于微信App来说如何从NATIVE切换到webview的过程 测试版本信息 1.微信版本:7. ...
- MetaException(message:Could not connect to meta store using any of the URIs provided. Most recent failure: org.apache.thrift.transport.TTransportException: java.net.ConnectException: 拒绝连接 (Connection
hive在hive-site.xml中配置hive.metastore.uris属性,后启动异常 hive异常 [fan@master hive-0.13.1-cdh5.3.6]$ bin/hive ...
- NO.001- 简说 Java 并发编程史
这篇文章是Java并发编程思想系列的第一篇,主要从理解Java并发编程历史的原因和Java并发演进过程两部分,以极简地回溯并发编程的历史,帮助大家从历史这个角度去了解一门语言一个特性的演进.对历史理解 ...
- SpringBoot从入门到精通教程(三)
在上一篇中,我们已经讲了,SpringBoot 如何构建项目,和SpringBoot的HelloWorld, 那这一节我们继续讲 Thymeleaf Thymeleaf 官网: Thymeleaf T ...
- 5分钟看懂系列:Python 线程池原理及实现
概述 传统多线程方案会使用"即时创建, 即时销毁"的策略.尽管与创建进程相比,创建线程的时间已经大大的缩短,但是如果提交给线程的任务是执行时间较短,而且执行次数极其频繁,那么服务器 ...
- JavaScript实现自定义右键菜单
JavaScript实现自定义右键菜单,思路如下: 1. 屏蔽默认右键事件: 2. 隐藏自定义的菜单模块(如div.ul等): 3. 右键点击特定或非特定区域,显示菜单模块: 4. 再次点击,隐藏菜单 ...
- python三大流程
一.三大流程 1. 顺序:按照顺序依次逐行执行代码的过程.自左向右,自上而下 2. 分支:程序按照不同的条件执行不同的处理代码的过程. 分支分为单分支,双分支,多分支 经常用到的分支结构是if语句 i ...