如何在 Flutter 中仅突出显示 Text 中的数字和特殊字符?
Posted
技术标签:
【中文标题】如何在 Flutter 中仅突出显示 Text 中的数字和特殊字符?【英文标题】:How to highlight only numbers and special characters inside Text in Flutter? 【发布时间】:2021-04-03 15:36:52 【问题描述】:我试图突出显示动态来自 JSON 的字符串中的任何数字和特殊字符,例如“%”。 这是我当前的实现,但我不明白如何动态更改它。
RichText(
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
maxLines: 4,
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: 'Hey I\'m',
style: TextStyle(
color: kDarkBlue, fontSize: 21)),
TextSpan(
text: '1234 ',
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 24)),
TextSpan(
text: 'and',
style: TextStyle(fontSize: 21)),
TextSpan(
text: '%',
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 24)),
],
),
),
【问题讨论】:
您是否尝试过在这种情况下使用正则表达式? 【参考方案1】:最终输出:
你可以试试这个:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
class MyHomePage extends StatefulWidget
MyHomePage(Key key, this.title) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage>
String str = "Hey I'm 1234 and %";
int findLen(String word)
return word.replaceAll(new RegExp(r'[a-zA-Z]'), "").length;
var styleOne = TextStyle(color: Colors.black87, fontSize: 21);
var styleTwo = TextStyle(
color: Colors.black87, fontWeight: FontWeight.w800, fontSize: 24);
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: RichText(
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
maxLines: 4,
text: TextSpan(
children: str
.split(" ")
.map((word) => TextSpan(
text: word + " ",
style: findLen(word) != word.length ? styleOne : styleTwo))
.toList(),
),
),
);
工作演示:Codepen
【讨论】:
能否请您展示如何编辑它以突出显示两个字母 Rs 以及数字和特殊字符? 请发布问题,我们会调查的。这不会那么难,一点正则表达式的魔法就可以了。 您好,我打开了一个问题,请您看看,谢谢! ***.com/questions/65454893/… 很高兴它有帮助。不客气,编码愉快。【参考方案2】:使用.split()
方法将字符串转换为列表。
分配
list.map((item) => TextSpan( text: item,
style: TextStyle(
fontWeight: isNumeric(item)?
FontWeight.w800 : FontWeight.w800 ,
fontSize: 24))).toList()
到子属性。
也可以参考这个答案https://***.com/a/55358328/10285344
此解决方案只会突出显示数字,您可以创建一个自定义函数,如果列表项即字符是数字或特殊字符(通过使用 Regrex),则返回 ture。 p>
【讨论】:
以上是关于如何在 Flutter 中仅突出显示 Text 中的数字和特殊字符?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Flutter 中禁用 FlatButton 的飞溅突出显示?