Flutter文本高亮插件flutter_highlight_text的使用

Flutter文本指定文字或者指定分割符高亮，高亮文字点击之后回调点击内容。

使用方法

以下是一个完整的示例代码，展示了如何使用flutter_highlight_text插件来实现文本高亮功能。

import 'package:flutter/material.dart';
import 'package:flutter_highlight_text/flutter_highlight_text.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 应用程序根组件
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  String text =
      '可能说起 Flutter 绘制，大家第一反应就是用 `CustomPaint` 组件，自定义 `CustomPainter` 对象来画。Flutter 中所有可以看得到的组件，比如 Text、Image、Switch、Slider 等等，追其根源都是`画出来`的，但通过查看源码可以发现，Flutter 中绝大多数组件并不是使用 `CustomPaint` 组件来画的，其实 `CustomPaint` 组件是对框架底层绘制的一层封装。这个系列便是对 Flutter 绘制的探索，通过`测试`、`调试`及`源码分析`来给出一些在绘制时`被忽略`或`从未知晓`的东西，而有些要点如果被忽略，就很可能出现问题。';

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            HighLightText(
              style: TextStyle(fontSize: 14, color: Colors.black),
              highLightTextStyle:
                  TextStyle(color: Colors.red, fontSize: 18, fontWeight: FontWeight.bold),
              text: text,
              highLightWords: ['Flutter', '可'],
              splitString: '`',
              highLightType: HighLightType.keyWords,
              wordClickAction: (word) {
                print("=====$word");
              },
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

解释

1. 导入库：

   import 'package:flutter/material.dart';
   import 'package:flutter_highlight_text/flutter_highlight_text.dart';
   

2. 主应用类：

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   

3. 主页状态类：

   class MyHomePage extends StatefulWidget {
     MyHomePage({Key? key, required this.title}) : super(key: key);
     final String title;
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   

4. 主页状态实现类：

   class _MyHomePageState extends State<MyHomePage> {
     int _counter = 0;
     String text = '...'; // 文本内容
   
     void _incrementCounter() {
       setState(() {
         _counter++;
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               HighLightText(
                 style: TextStyle(fontSize: 14, color: Colors.black),
                 highLightTextStyle:
                     TextStyle(color: Colors.red, fontSize: 18, fontWeight: FontWeight.bold),
                 text: text,
                 highLightWords: ['Flutter', '可'],
                 splitString: '`',
                 highLightType: HighLightType.keyWords,
                 wordClickAction: (word) {
                   print("=====$word");
                 },
               ),
               Text(
                 '$_counter',
                 style: Theme.of(context).textTheme.headline4,
               ),
             ],
           ),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: _incrementCounter,
           tooltip: 'Increment',
           child: Icon(Icons.add),
         ),
       );
     }
   }