如何在 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 中仅显示一英里内的帖子

如何在 Flutter 中禁用 FlatButton 的飞溅突出显示?

Flutter:如何在 DatePicker 中仅启用特定日期的日期

text 如何在Stackoverflow中突出显示代码?

如何在 tkinter Text 小部件中突出显示文本

如何从 firestore 检查有多少项目具有真值或假值并在列表中仅显示真值? - 颤动