flutter之Container

简介: flutter之Container

Container类似于iOS中的UIView,具有绘制、定位、调整大小功能。通常用来装载其它子控件,假如Container没有子控件,它将自动填充整个屏幕;反之,会根据子控件大小,调整自身大小,从而达到自适应效果。

注意:使用Container时,通常要有一个父控件,一般情况下不单独使用Container。常用的父控件有Center widget、Padding Widget、Column Widget、Row Widget、Scaffold Widget。  


构造函数

Container({  this.alignment, //设置子元素的对齐方式  this.padding, //容器内边距,属于decoration的装饰范围  Color color, // 背景色  Decoration decoration, // 背景装饰  Decoration foregroundDecoration, //前景装饰  double width,//容器的宽度  double height, //容器的高度  BoxConstraints constraints, //容器大小的限制条件  this.margin,//容器外补白,不属于decoration的装饰范围  this.transform, //变换  this.child,})


1.alignment设置子widget的在container中的对齐方式,其对齐方式有:

1.居中下对齐

alignment:Alignment.bottomCenter;

2.左下角对齐

alignment:Alignment.bottomLeft;

3.右下角对齐

alignment:Alignment.bottomRight;

4.居中对齐

alignment:Alignment.center;

5.居中左对齐

alignment:Alignment.centerLeft;

6.居中有对齐

alignment:Alignment.centerRight;

7.居中上对齐

alignment:Alignment.topCenter;

8.右上角对齐

alignment:Alignment.topRight;

9.左上角对齐

alignment:Alignment.topLeft;


2.padding:设置container的内边距

1.根据需求设置

padding: EdgeInsets.only(top: 10.0,bottom: 10.0,left: 10.0,right: 10.0)

这里的top,bottom,left,right可以根据自己需求设置,不一定每个都要设置,不设置的就是0.0。

2.转圈设置

padding:EdgeInsets.fromLTRB(20.0, 20.0, 30.0, 20.0)

LTRB分别代表left,top,right,bottom。

3.水平垂直方向设置

padding: EdgeInsets.symmetric(vertical: 20.0,horizontal: 10.0)

vertical代表垂直方向,horizontal代表水平方向.


3.margin:设置container的外边距,其值的设置方式和padding一样

1.根据需求设置

margin: EdgeInsets.only(top: 10.0,bottom: 10.0,left: 10.0,right: 10.0)

这里的top,bottom,left,right可以根据自己需求设置,不一定每个都要设置,不设置的就是0.0。

2.转圈设置

margin:EdgeInsets.fromLTRB(20.0, 20.0, 30.0, 20.0)

LTRB分别代表left,top,right,bottom。

3.水平垂直方向设置

margin: EdgeInsets.symmetric(vertical: 20.0,horizontal: 10.0)

vertical代表垂直方向,horizontal代表水平方向.


4.color:设置container的背景颜色

1.十六进制表示方法

color: Color(0xffFFFFFF)

这里的0x是固定的,ff代表颜色的透明度,后面的六位代表颜色的值

2.ARGB表示方法

color: Color.fromARGB(2, 29, 30, 10)

A透明度,取值范围是0~255;

R红色,取值范围是0~255;

G绿色,取值范围是0~255;

B蓝色,取值范围是0~255。

3.RGBO表示方法

color: Color.fromRGBO(20, 30, 100, .9)

R红色,取值范围是0~255;

G绿色,取值范围是0~255;

B蓝色,取值范围是0~255;

O透明度,取值范围是0~1;

5.width:container的宽,用double类型的数字表示

width: 250,

6.height:container的高,用double类型的数字表示

height: 250,

7.child:container的子widget

child: Text("内容"),


相关文章
|
3月前
|
容器
Flutter Container设置 width 无效
Flutter Container设置 width 无效
flutter系列之:flutter中常用的container layout详解
在上一篇文章中,我们列举了flutter中的所有layout类,并且详细介绍了两个非常常用的layout:Row和Column。 掌握了上面两个基本的layout还是不够的,如果需要应付日常的layout使用,我们还需要掌握多一些layout组件。今天我们会介绍一个功能强大的layout:Container layout。
flutter系列之:flutter中常用的container layout详解
了解Flutter中的Container组件
在开发过程中,可以看到万物皆Widget,后续有时间将详细读源码。
|
前端开发 容器
Flutter基础:Flutter中的div——Container(下)
将Container比做成Flutter中的div并不恰当,但这并不妨碍前端同学用Container做为起点来学习Flutter。Flutter官方的文档阅读起来不是很直观,对于习惯了看前端类有直观示例的文档的同学来说不是很友好,故简单的总结了一下,从Container的基础用法开始。
|
前端开发 容器
Flutter基础:Flutter中的div——Container(中)
将Container比做成Flutter中的div并不恰当,但这并不妨碍前端同学用Container做为起点来学习Flutter。Flutter官方的文档阅读起来不是很直观,对于习惯了看前端类有直观示例的文档的同学来说不是很友好,故简单的总结了一下,从Container的基础用法开始。
|
前端开发 容器
Flutter基础:Flutter中的div——Container(上)
将Container比做成Flutter中的div并不恰当,但这并不妨碍前端同学用Container做为起点来学习Flutter。Flutter官方的文档阅读起来不是很直观,对于习惯了看前端类有直观示例的文档的同学来说不是很友好,故简单的总结了一下,从Container的基础用法开始。
|
iOS开发 容器
Flutter基础widgets教程-Container篇
Flutter基础widgets教程-Container篇
117 0
|
容器
Flutter之Container
Flutter之Container
156 0
Flutter之Container
|
4月前
|
开发框架 前端开发 测试技术
Flutter开发常见问题解答
Flutter开发常见问题解答