TextStyle 文本样式
- color 字体颜色
- fontSize （逻辑）字体大小，默认14
- fontWeight 字体粗细 一般使用的属性：FontWeight normal（默认） 、FontWeight bold（粗体）
- fontStyle 字体：normal和italic
- fontFamily 设置字体，注意和 fontStyle的区别
- letterSpacing 字母间距，默认0，负数间距越小，正数 间距越大
- wordSpacing 单词 间距，默认0，负数间距越小，正数 间距越大，注意和letterSpacing的区别，比如hello，h、e、l、l、o各是一个字母，hello是一个单词
- textBaseline 字体基线
- height 类似 css 的 line-height 小数表示
- foreground 和 background 感觉用不到
- shadows 字体阴影
- decoration 文字划线：下划线、上划线、中划线
- decorationColor 划线颜色
- decorationStyle 划线样式：虚线、双线等
Text 文本
正常字体
Text(
'正常文本'
)
下划线，中划线
image.png
Text(
'下划线文本',
style: TextStyle(
decoration: TextDecoration.underline
),
),
Text(
'中划线文本',
style: TextStyle(
decoration: TextDecoration.lineThrough
),
),
Text(
'上划线文本',
style: TextStyle(
decoration: TextDecoration.overline
),
),
粗体
image
Text(
'加粗文本',
style: TextStyle(
fontWeight: FontWeight.bold
),
),
Text(
'加粗文本',
style: TextStyle(
fontWeight: FontWeight.w200
),
),
斜文本
image.png
Text(
'斜体文本',
style: TextStyle(
fontStyle: FontStyle.italic
),
),
字体大小
image
Text(
'大号文本',
style: TextStyle(
fontSize: 30
),
),
Text(
'中号文本',
style: TextStyle(
fontSize: 20
),
),
Text(
'小号文本',
style: TextStyle(
fontSize: 10
),
),
-
textAlign 设置文本对齐。多行文本才能表现出来
image textDirection 文本方向。
softWrap 是否自动换行，默认为 true
-
overflow 溢出时如何展示。
image
ellipsis 和 clip 都和 css 一样，fade 有一个半透明的效果
textScaleFactor 字体缩放
maxLines 最大显示行
semanticsLabel 语义化
如果需要显示富文本需要使用 Text.rich 和 textSpan
image
Text.rich(
TextSpan(
style: TextStyle(
color: Colors.red
),
text: 'hello world',
children: [
TextSpan(
style: TextStyle(
color: Colors.blue
),
text: 'hello world'
)
]
)
);
这么展示富文本也太费劲了。
Image
return Image.asset(
'assets/images/title.png',
semanticLabel: '这是一张 title 图片',
excludeFromSemantics: false,
width: 60,
height: 60,
fit: BoxFit.contain,
alignment: Alignment.bottomCenter,
matchTextDirection: true,
filterQuality: FilterQuality.high
);
属性
- semanticLabel 图片语义化。类似 image 的 alt 属性。
- excludeFromSemantics 不提供图片的语义，默认是 false。对于对 app 没有意义的图片使用。
- width 宽度
- height 宽度
- color 会和图片像素重合。
- colorBlendMode [ color ] 和 图片的混合方式。[ color ] 是源, 图片是目标。
- fit 控制图片的布局，类型是 BoxFit。 可选值为 BoxFit[ fill, contain, cover, fitWidth, fitHeight, none, scaleDown ]。
- alignment 对齐方式。类型是 Alignment。
- repeat 重复方式。取值 ImageRepeat。
- centerSlice 不能和 fit 同时设置。指定中心区域进行九个补丁图像，在中心切片内的图像区域将水平和垂直拉伸，以使图像适合其目的地。 中心切片上方和下方的图像区域将仅水平拉伸，而中心切片左侧和右侧的图像区域仅垂直拉伸。应该是设置九宫格图片用的。
- matchTextDirection 如果是在文本中，是否根据文本方向翻转图片。
- gaplessPlayback 当图像提供者发生变化时，是继续显示旧图像，默认不显示！
- filterQuality 图片过滤器, 类型 FilterQuality。 可选值为: [ none, low, medium, high ]，默认是 low。
创建图片容器的方法有下面几种：
- new Image.asset 展示本地图片
return Image.asset(
'assets/images/title.png'
);
- new Image.network
return Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553355447588&di=7df0e766c457cd950a09f3c3d016cb9a&imgtype=0&src=http%3A%2F%2Fdn-p-tystore.qbox.me%2Fp%2Fchapter%2Fattachment%2FEtIUE_bte-%2FEgfvEBITe_-W4B6ve_2wElu16gjT7UL68vmn6MiB6m9tJh9pHUfV9t2.jpg'
);
- new Image.file 展示从 [ file ] 中获取的图片
- new Image memory 展示从 [Uint8List] 中获取的图片
Icon
return Icon(
Icons.star,
color: Colors.red,
);
Icons 提供了很多内置的图标，如果需要别的图标可以借鉴 ：
https://blog.csdn.net/kangshaojun888/article/details/86719741
Placeholder 占位符
image
return Placeholder(
color: Colors.red, // 颜色
strokeWidth: 2.0, // 线条的宽度
fallbackHeight: 100,
fallbackWidth: 100, // 当占位符处于宽度无界的情况时使用的宽度。
);