如何在Flutter中的文本中仅突出显示数字和特殊字符? [英] How to highlight only numbers and special characters inside Text in Flutter?
本文介绍了如何在Flutter中的文本中仅突出显示数字和特殊字符?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试突出显示任何数字&特殊字符(如来自JSON的动态字符串中的'%').这是我当前的实现,但是我不明白如何动态更改它.
I'm trying to highlight any numbers & special characters like '%' from a String that comes dynamically from JSON. This is my current implementation but I can't understand how to change it dynamically.
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)),
],
),
),
推荐答案
最终输出:
您可以尝试以下操作:
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
这篇关于如何在Flutter中的文本中仅突出显示数字和特殊字符?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文