如何在Flutter中突出显示特定字母的文本? [英] How to highlight text of specific letters in Flutter?

问题描述

我正在尝试突出显示两个特定的字母"Rs"，例如％或！"的任何特殊字符.和1234等数字.

对于这个问题，我已经有一半的答案了-

您可以尝试以下操作:

  import'package:flutter/material.dart';void main()=>runApp(MyApp());MyApp类扩展了StatelessWidget {@override窗口小部件build(BuildContext context){返回MaterialApp(标题:"Flutter演示"，debugShowCheckedModeBanner:否，主题:ThemeData(primarySwatch:Colors.blue，)，主页:MyHomePage(标题:"Flutter演示首页")，);}}类MyHomePage扩展了StatefulWidget {MyHomePage({Key key，this.title}):超级(key:key);最终的字符串标题；@override_MyHomePageState createState()=>_MyHomePageState();}类_MyHomePageState扩展State< MyHomePage>{字符串str =嘿，我是1234，％Rs10"；int findLen(String word){返回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窗口小部件build(BuildContext context){返回脚手架(appBar:AppBar(标题:文本(widget.title)，)，正文:RichText(溢出:TextOverflow.ellipsis，textAlign:TextAlign.center，maxLines:4文字:TextSpan(孩子:str.split(").map((word)=> TextSpan(文字:单词+""，样式:findLen(word)== word.length ||word.substring(0，2).contains("Rs")?风格二:styleOne)).toList()，)，)，);}} 

正在运行的演示: Codepen

I am trying to highlight two letters 'Rs' in specific, any special characters like '% or !' and numbers like 1234 etc.

I already have half my answer from this question - How to highlight text in Flutter? but i'm not sure how to edit it for letters as I am new to RegEx?

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(),
        ),
      ),
    );
  }
} 

解决方案

You can try something like this:

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 % Rs10";
  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 ||
                          word.substring(0, 2).contains("Rs")
                      ? styleTwo
                      : styleOne))
              .toList(),
        ),
      ),
    );
  }
}

Working demo: Codepen

这篇关于如何在Flutter中突出显示特定字母的文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！