Flutter基础widgets教程-Container篇

简介: Flutter基础widgets教程-Container篇

1 Container

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

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

2 构造函数

Container({
    this.alignment, 
    this.padding, 
    Color color, 
    Decoration decoration, 
    Decoration foregroundDecoration, 
    double width,
    double height, 
    BoxConstraints constraints, 
    this.margin,
    this.transform, 
    this.child,
})

复制

3 常用属性

3.1 alignment设置子widget的在container中的对齐方式

3.1.1 居中下对齐

alignment:Alignment.bottomCenter,

复制

3.1.2 左下角对齐

alignment:Alignment.bottomLeft,

复制

3.1.3 右下角对齐

alignment:Alignment.bottomRight,

复制

3.1.4 居中对齐

alignment:Alignment.center,

复制

3.1.5 居中左对齐

alignment:Alignment.centerLeft,

复制

3.1.6 居中右对齐

alignment:Alignment.centerRight,

复制

3.1.7 居中上对齐

alignment:Alignment.topCenter,

复制

3.1.8 右上角对齐

alignment:Alignment.topRight,

复制

3.1.9 左上角对齐

alignment:Alignment.topLeft,

复制

3.2 padding:设置container的内边距

3.2.1 根据需求设置

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

复制

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

3.2.2 转圈设置

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

复制

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

3.2.3 水平垂直方向设置

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

复制

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

3.3 margin:设置container的外边距

3.3.1 根据需求设置

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

复制

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

3.3.2 转圈设置

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

复制

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

3.3.3 水平垂直方向设置

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

复制

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

3.4 color:设置container的背景颜色

3.4.1 十六进制表示方法

color: Color(0xffFFFFFF)

复制

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

3.4.2 ARGB表示方法

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

复制

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

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

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

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

3.4.3 RGBO表示方法

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

复制

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

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

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

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

3.5 width:container的宽

width: 250,

复制

3.6 height:container的高

height: 250,

复制

3.7 child:container的子widget

child: Text("内容"),
相关文章
|
2月前
|
开发者 Windows
Flutter笔记:Widgets Easier组件库(9)使用弹窗
Flutter笔记:Widgets Easier组件库(9)使用弹窗
74 3
|
2月前
|
数据安全/隐私保护 Android开发 开发者
Flutter笔记:Widgets Easier组件库-使用隐私守卫
Flutter笔记:Widgets Easier组件库-使用隐私守卫
33 2
|
2月前
|
UED 开发者
Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗
Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗
42 2
|
2月前
|
开发者
Flutter笔记:Widgets Easier组件库(5)使用加减器
Flutter笔记:Widgets Easier组件库(5)使用加减器
33 2
|
2月前
|
开发者 容器
Flutter笔记:Widgets Easier组件库(4)使用按钮组
Flutter笔记:Widgets Easier组件库(4)使用按钮组
28 2
|
2月前
|
开发者 容器
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
29 2
|
2月前
|
开发者
Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝(Tip Toasts)
Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝(Tip Toasts)
33 1
|
2月前
|
开发者
Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)
Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)
74 0
|
2月前
|
开发者
Flutter笔记:Widgets Easier组件库(12)使用消息吐丝(Notify Toasts)
Flutter笔记:Widgets Easier组件库(12)使用消息吐丝(Notify Toasts)
62 0
|
2月前
|
数据安全/隐私保护 UED 开发者
Flutter笔记:Widgets Easier组件库(10)快速处理承若型对话
Flutter笔记:Widgets Easier组件库(10)快速处理承若型对话
27 0
下一篇
无影云桌面