众所周知,图片和文本对齐有很多种实现方式,并且基于中轴线对的很齐
其中一个例子,如下:
利用 Row 的 crossAxisAlignment 属性
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.only(
left: 14.0,
right: 14.0,
),
child: SvgPicture.asset( // 加载本地svg图片
'图片地址',
width: 28.0,
height: 28.0,
),
),
SizedBox(height: 40.0),
Expanded(
child: Container(
child: Text(
'我是文字,与图片对齐',
style: TextStyle(
color: Colors.black,
fontSize: ScreenTool.dp(28),
),
),
),
),
],
),
效果:
这种情况下要是文字超长,需要换行,把 crossAxisAlignment 设置成 CrossAxisAlignment.start 会发现并没有跟第一行文本对齐。
我们给文字设置背景色,可以找到原因
原因是:文字自带的行高和间距在捣乱
解决办法:当然是手动调整行高和间距
注意:若只设置行高为图片高度。此时行距极小不美观,需要单独设置行距。
若设置行距:还需向上偏移半个行距,才会最终实现对齐效果。
完整示例如下:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(
left: 14.0,
right: 14.0,
),
child: SvgPicture.asset(
'图片地址',
width: 28.0,
height: 28.0,
),
),
/// 多行文本的第一个行与图片对齐
/// 解决办法:设置行高为图片高度。此时行距极小不美观,需要单独设置行距。
/// 若设置行距:还需向上偏移半个行距,才会最终实现对齐效果
Expanded(
child: Transform.translate(
offset: Offset(0, -7.0), //StrutStyle 的 leading的值的一半
child: Text(
"我是文字,与图片对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐",
style: TextStyle(
color: Colors.black,
fontSize: 28.0,
height: 28.0, // 行高
),
strutStyle: StrutStyle(
forceStrutHeight: true,
height: 1,
leading: 0.5, //行距(0.5即行高的一半)
),
),
),
),
],
),
现在对齐啦 ~~~