flutter-04(Flutter Container 组件、Text 组件详解)-Fly 博客

flutter-04(Flutter Container 组件、Text 组件详解)

2020-04-29【Flutter】1750人已围观

简介> Flutter Container 组件、、Text 组件详解 ## 一、Flutter Text 名称 | 功能 ---|--- textAlign | 文本对齐方式（center 居中，left 左对齐，right 右对齐，justfy 两端对齐） textDirection | 文本方向（ltr 从左至右，rtl 从右至左） overflow | 文字超出屏幕之后的处理方式（clip裁剪，fade 渐隐，ellipsis 省略号） textScaleFactor |

Flutter Container 组件、、Text 组件详解

一、Flutter Text

名称	功能
textAlign	文本对齐方式（center 居中，left 左对齐，right 右对齐，justfy 两端对齐）
textDirection	文本方向（ltr 从左至右，rtl 从右至左）
overflow	文字超出屏幕之后的处理方式（clip裁剪，fade 渐隐，ellipsis 省略号）
textScaleFactor	字体显示倍率
maxLines	文字显示最大行数
style	字体的样式设置

下面是 TextStyle 的数参数

名称	功能
decoration	文字装饰线（none 没有线，lineThrough 删除线，overline 上划线，underline 下划线）
decorationColor	文字装饰线颜色
decorationStyle	文字装饰线风格（[dashed,dotted]虚线，
double	两根线，solid 一根实线，wavy 波浪线）
wordSpacing	单词间隙（如果是负值，会让单词变得更紧凑
letterSpacing	字母间隙（如果是负值，会让字母变得更紧凑）
fontStyle	文字样式（italic 斜体，normal 正常体）
fontSize	文字大小
color	文字颜色
fontWeight	字体粗细（bold 粗体，normal 正常体）

二、Flutter Container

名称	功能
alignment	topCenter：顶部居中对齐 topLeft：顶部左对齐 topRight：顶部右对齐 center：水平垂直居中对齐 centerLeft：垂直居中水平居左对齐 centerRight：垂直居中水平居右对齐 bottomCenter 底部居中对齐 bottomLeft：底部居左对齐 bottomRight：底部居右对齐
decoration	decoration: BoxDecoration( color: Colors.blue, border: Border.all( color: Colors.red, width: 2.0, ), borderRadius:BorderRadius.all( Radius.circular(8.0) ) )
margin	margin 属性是表示 Container 与外部其他组件的距离。EdgeInsets.all(20.0),
padding	padding 就是 Container 的内边距，指Container 边缘与 Child 之间的距离padding: EdgeInsets.all(10.0)
transform	让 Container 容易进行一些旋转之类的transform: Matrix4.rotationZ(0.2)
height	容器高度
width	容器宽度 width: double.infinity, 铺满最大值
child	容器子元素