Flutter¥和数字价格不能居底对齐。去掉Flutter文字空白区域

最新推荐文章于 2025-06-28 18:46:58 发布

原创

最新推荐文章于 2025-06-28 18:46:58 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何在Flutter中解决UI价格展示底部不对齐的问题，通过计算文本的Capheight和底部距离，实现数字和符号的精确对齐。

最近有ui走查反馈价格¥和数字没有底部对，所以对flutter的文字绘制做了下了解，以此解决ui一直以来纠结的历史问题。
先看看正常情况和非正常情况的ui展示样式吧
在这里插入图片描述

可以看到数字，汉字和字母(不同的字母所占的高度还不一致) 24呵呵jki这文字
再给出字符的显示规则
在这里插入图片描述

针对价格(数字类型的展示) 其实获取的应该是Capheight,所以在Flutter中需要根据
TextPainter 来获取相关信息
Capheight = BaseLineHeight - o(字符空白区域到顶部距离)，但Capheight距离顶部的距离无法获取，所以需要采取别的方式来。
贴出关键代码

TextPainter textPainter = TextPainter()
List<LineMetrics> list = textPainter.computeLineMetrics();
if (list?.isNotEmpty ?? false) {
   
   
// baseLine高度
toBaseLineHeight = list[0].ascent;
// 顶部空白距离
ascDistance = toBaseLineHeight - list[0].unscaledAscent;
} else {
   
   
  toBaseLineHeight = textPainter.computeDistanceToActualBaseline(TextBaseline.alphabetic);
  ascDistance = 0;
}
Size size = textPainter.size;
// 需要偏移的距离
bottomDistance = size.height - toBaseLineHeight;
// 存入次fontSize对应的数据 防止下次再计算提升性能
if (fontSizeInfo == null) {
   
   
  fontSizeMap[textStyle.fontSize] = FontSizeInfo(toBaseLineHeight, bottomDistance, ascDistance);
}
capheight = toBaseLineHeight - ascDistance - bottomDistance + 1 // 加1是防止小数,且1像素影响不大

稍后会合进develop分支
使用示例

Container(
  color: Colors.amber,
  margin: EdgeInsets.only(top: 6,bottom: 6),
  child: ExPrice('123456', TextStyle(fontSize: 50,height: 1.0),leftPriceUnit: '¥',leftPriceUnitStyle: TextStyle(fontSize: 12),),
),

完整代码如下

import 'dart:ui';

import 'package:flutter/material.dart';

/// 价格展示模块 修正控件底部有间距 导致不居中的问题 主要针对 ¥1234这种情况 不针对汉字 但如果需要可以借鉴此写法
class ExPrice extends StatelessWidget {
   
   
final String price; // 价格字符串
final TextStyle textStyle; // 价格Style
final String leftPriceUnit;