Flutter文本高亮圆角插件text_highlight_rounded的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter文本高亮圆角插件text_highlight_rounded的使用

Description

TextHighlightRounded 是一个自定义的小部件，用于提供带有圆角高亮效果的文本。它通过 Painter 类实现。

Example

示例 1

example-1 
HighlightTextRounded(
    text: "one line only",
    style: TextStyle(
    fontSize: 20,
    color: Colors.black,
),
)

示例 2

example-2 
HighlightTextRounded(
    text: "and for this\nhighlightText is more\nthan one line\nwith all rounded corners",
    textAlign: TextAlign.center,
    bold: 7,
    isAllCornerRound: true,
    radius: 10,
    markColor: Colors.red[100]!,
    style: const TextStyle(
        fontSize: 25,
        fontWeight: FontWeight.bold,
        color: Colors.purple,
    ),
)

示例 3

example-3 
HighlightTextRounded(
    text: "and for this\nhighlightText is more\nthan one line\nwith basic rounded corner",
    textAlign: TextAlign.right,
    bold: 7,
    radius: 10,
    isAllCornerRound: false,
    markColor: Colors.blue[100]!,
    style: TextStyle(
        fontSize: 25,
        fontWeight: FontWeight.bold,
        color: Colors.blueGrey[800],
    ),
)

参数

  • String text
  • TextStyle style;
  • double? maxWidth;
  • double radius;
  • Color markColor;
  • TextAlign textAlign;
  • double bold;
  • bool isAllCornerRound;

完整示例Demo

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 text_highlight_rounded 插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            // 单行文本
            const HighlightTextRounded(
              text: "one line only",
              style: TextStyle(
                fontSize: 20,
                color: Colors.black,
              ),
            ),
            // 多行文本，所有角落都圆角
            HighlightTextRounded(
              text: "and for this\nhighlightText is more\nthan one line\nwith all rounded corners",
              textAlign: TextAlign.center,
              bold: 7,
              isAllCornerRound: true,
              radius: 10,
              markColor: Colors.red[100]!,
              style: const TextStyle(
                fontSize: 25,
                fontWeight: FontWeight.bold,
                color: Colors.purple,
              ),
            ),
            // 多行文本，部分角落圆角
            HighlightTextRounded(
              text: "and for this\nhighlightText is more\nthan one line\nwith basic rounded corner",
              textAlign: TextAlign.right,
              bold: 7,
              radius: 10,
              isAllCornerRound: false,
              markColor: Colors.blue[100]!,
              style: TextStyle(
                fontSize: 25,
                fontWeight: FontWeight.bold,
                color: Colors.blueGrey[800],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter文本高亮圆角插件text_highlight_rounded的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter文本高亮圆角插件text_highlight_rounded的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是关于如何在Flutter中使用text_highlight_rounded插件来实现文本高亮并添加圆角效果的代码示例。假设你已经将text_highlight_rounded插件添加到了你的pubspec.yaml文件中：

dependencies:
  flutter:
    sdk: flutter
  text_highlight_rounded: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来安装插件。

以下是使用text_highlight_rounded插件的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Text Highlight Rounded Example'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextHighlightRounded(
              text: 'This is a sample text with highlighted words.',
              highlightWords: ['sample', 'highlighted'],
              highlightStyle: TextStyle(
                backgroundColor: Colors.yellow,
                color: Colors.black,
                fontWeight: FontWeight.bold,
              ),
              borderRadius: BorderRadius.circular(12), // 设置圆角半径
              textStyle: TextStyle(
                fontSize: 18,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

代码解释

  1. 导入包：

    import 'package:text_highlight_rounded/text_highlight_rounded.dart';

  2. TextHighlightRounded组件：

    • text：要显示的完整文本。
    • highlightWords：需要高亮的单词列表。
    • highlightStyle：高亮部分的文本样式，这里设置了背景颜色为黄色，文字颜色为黑色，并加粗。
    • borderRadius：设置圆角半径，这里使用了BorderRadius.circular(12)来创建圆角。
    • textStyle：未高亮部分的文本样式，这里设置了字体大小为18。

运行效果

运行上述代码后，你会看到一个包含高亮单词且带有圆角的文本。高亮单词（如"sample"和"highlighted"）将以黄色背景显示，并且整个文本组件的边缘会有圆角效果。

这样，你就成功地在Flutter应用中使用text_highlight_rounded插件实现了文本高亮并添加了圆角效果。

回到顶部