文本组件的对齐,中文的渲染和英文的渲染有些不同。
在Row([Text, Image])这种类型的渲染过程中,如果默认设置垂直居中的话,英文显示正常,但中文效果会有差异。
因为中文字体是没有衬线的,而绘制是从底部开始的,导致中文整体偏下。
解决办法是让Image做一个很小的padding,用以适配视觉效果的居中
Container(
color: Colors.grey,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text("ABCxyz", style: TextStyle(fontSize: 12, color: Colors.blacks)),
Text("张三李四", style: TextStyle(fontSize: 12, color: Colors.blacks)),
Image.asset('images/ic_arrow_right.png', width: 12, height: 12, fit: BoxFit.cover)
],
),
)