[Flutter] Text组件没有对齐

6,615 阅读1分钟

文本组件的对齐,中文的渲染和英文的渲染有些不同。

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)
    ],
  ),
)