最近有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;

本文介绍如何在Flutter中解决UI价格展示底部不对齐的问题,通过计算文本的Capheight和底部距离,实现数字和符号的精确对齐。
最低0.47元/天 解锁文章
1万+

被折叠的 条评论
为什么被折叠?



