flutter-Text 以字符的方式截断
2023-09-11 14:20:21 时间
本文主要介绍Text 以字符的方式截断
Text 以字符的方式截断
https://github.com/flutter/flutter/issues/52869
在flutter中,Text控件默认的溢出显示模式是TextOverflow.fade
,就是淡出
在iOS或者Android平台默认的文件截断模式一般是…省略,flutter里面对应的截断模式为TextOverflow.ellipsis
,不过这里的截断是英文按照单词来的,这样的模式会导致如果最后一个单词很长时,截断显示会整理省略而不是最后超出的字符省略,导致模块可能有一大块空白。
Dart系统定义的截断模式
/// How overflowing text should be handled.
///
/// A [TextOverflow] can be passed to [Text] and [RichText] via their
/// [Text.overflow] and [RichText.overflow] properties respectively.
enum TextOverflow {
/// Clip the overflowing text to fix its container.
clip,
/// Fade the overflowing text to transparent.
fade,
/// Use an ellipsis to indicate that the text has overflowed.
ellipsis,
/// Render overflowing text outside of its container.
visible,
}
如何解决英文单词被整体截断呢?
将单词的每个字符切割开,插入宽度0的占位字符,打破系统默认的机制,这样就可以以字符为单位省略了
需要注意。这种方式相当于修改了文本的内容,一般文本最大一行显示可以用,如果文本支持2行以及以上的显示的话,将会导致换行不再按照字符进行而按照单词进行
下面是Example实现
extension TextOverflowUtil on String {
/// 将flutter系统默认的单词截断模式转换成字符截断模式
/// 通过向文本中插入宽度为0的空格实现
static String toCharacterBreakStr(String word) {
if (word == null || word.isEmpty) {
return word;
}
String breakWord = '';
word.runes.forEach((element) {
breakWord += String.fromCharCode(element);
breakWord += '\u200B';
});
return breakWord;
}
}
相关文章
- js 字符实体互相转换
- 不合法的请求字符,不能包含uxxxx格式的字符
- Java实现 蓝桥杯VIP 算法训练 统计字符次数
- Flutter Android Toast Message(flutter访问Android Toast Message)
- 最长回文字符(需要补)
- [Flutter] 因为不讲这个重点, 全网 flutter 实战视频沦为二流课程
- [Flutter] lib/main.dart:1: Warning: Interpreting this as package URI, 'package:flutter_app/main.dart'.
- Flutter之 flutter_after_layout组件的作用:监听页面渲染的第一帧
- 【华为机试真题 Python实现】带空白字符的字符串匹配
- Leetcode 387. 字符串中的第一个唯一字符(超时未解决)
- 神经网络识别车牌字符
- 易飞-凭证打印异常(字符中含有空格,自己主动分行导致显示异常)
- 字符串的字符格式会让程序报错
- 第十章 linux-深入学习字符设备驱动编程②(深入学习cdev结构)
- 在一个字符串中找到第一个仅仅出现一次的字符。
- 循环遍历Java字符串字符的规范方法——类似python for ch in string
- MySql数据库时区异常 The server time zone value 字符乱码 版本问题query_cache_size