一、Text文本组件(单一格式的文本)
是具有单一风格的文本字符串,可以跨多行显示,也可全部显示在同一行中,具体显示样子,取决于布局约束。
常用属性:
1.overflow : TextOverflow.values 处理文本溢出,可选值有:
clip:剪切溢出的文本;
ellipsis:用省略号代替溢出部分文本;
fade: 是将溢出的文本淡入透明;
visible:显示溢出文本。
若不设置overfl属性,则默认为clip属性,即剪切溢出的文本。
2.textAlign:TextAlign.values 文本水平对齐样式,可选个样式有:
center : 水平居中对齐;
end:在容器的后沿上对齐文本;对于从左到右的文本,是右边缘。对于从右到左的文本,是左边缘。
start:将文本对齐容器的前边缘;对于从左到右的文本,是左边缘;对于从右到左的文本,是右边缘。
justify:向文本两端对齐;
left:向容器的左边缘对齐。
right:向容器的右边缘对齐文本。
3.style: TextStyle(values) 如果不为null,则为该文本使用的样式。常用属性右:
backgroundColor: 背景颜色设置。
color:字体颜色设置。
textDirecrion:TextDirection :在文本附近绘制的线性装饰,上划线(overline)、下划线(underline )、文字中划线(lineThrough);
fontFamily :设置字体;
fontSize :设置字体大小;
fontStyle:设置字体样式,例如斜体;
fontWeight :设置字体粗细;
wordSpacing:设置单词间距;
letterSpacing:设置字母之间的间距;
二、Container(容器控件)是Flutter中经常使用的控件,就相当于HTML中的div标签一样,每个页面或者视图都离不开它。常用属性:
alignment:Alignment 常用选项,各个属性可以顾名思义。
bottomCenter
:下部居中对齐。
botomLeft
: 下部左对齐。
bottomRight
:下部右对齐。
center
:纵横双向居中对齐。
centerLeft
:纵向居中横向居左对齐。
centerRight
:纵向居中横向居右对齐。
topLeft
:顶部左侧对齐。
topCenter
:顶部居中对齐。
topRight
: 顶部居左对齐。
width ,height,color 属性 设置宽、高和颜色属性是相对容易的,只要在属性名称后面加入浮点型数字就可以了,比如要设置宽是100,高是100,颜色为亮蓝色。代码如下:
width: 1000.0,
height: 100.0,
decoration属性(需要注意的是如果你在decoration设置了color相关的属性,就不要再设置color属性了,因为这样会冲突)
border: Border.all(width: 1.0,color: Colors.redAccent,) (边框属性)
三、Image图片组件
image载入的4中方式:
Image.asset:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径。
Image.network:网络资源图片,意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
Image.file:加载本地图片,就是加载本地文件中的图片,这个是一个绝对路径,跟包体无关。
Image.memory: 加载Uint8List资源图片。
fit属性的设置:(fit属性可以控制图片的拉伸和挤压,这些都是根据图片的父级容器来的)
BoxFit.fill:全图显示,图片会被拉伸,并充满父容器。
BoxFit.contain:全图显示,显示原比例,可能会有空隙。
BoxFit.cover:显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)。
BoxFit.fitWidth:宽度充满(横向充满),显示可能拉伸,可能裁切。
BoxFit.fitHeight :高度充满(竖向充满),显示可能拉伸,可能裁切。
BoxFit.scaleDown:效果和contain差不多,但是此属性不允许显示超过源图片大小,可小不可大。
repeat属性设置:
ImageRepeat.repeat : 横向和纵向都进行重复,直到铺满整个画布。
ImageRepeat.repeatX: 横向重复,纵向不重复。
ImageRepeat.repeatY:纵向重复,横向不重复。
上述事例代码:
child: new Image.network(
),