Flutter中Text组件和Container组件详解

445 阅读1分钟

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]虚线,douoble两根线,solid一根实线,wavy波浪线)
wordSpacing单词间隙(如果是负值,会让单词变得更紧凑)
letterSpacing字母间隙(如果是负值,会让字母变得更加紧凑)
fontStyle文字样式(italic斜体,normal正常体)
fontSize文字大小
color文字颜色
fontWright字体粗细(bold粗体,normal正常体)

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|容器宽度| |child|容器子元素|