Flutter Text组件 文字的对齐、数字和字母对齐中文

Posted 2023-04-02

参考技术A 对齐的效果

Text的高度 是根据 height 乘于 fontSize 进行计算的、这里指定heiht即可、不指定的会出现 无法对齐的情况，如下：

同样字体下，这种就是无法对齐的情况

Flutter 学习 ---- ContainText

Flutter Contain、Text组件

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