Flutter文本样式插件css_text的使用

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

Flutter文本样式插件css_text的使用

CSS Text 插件介绍

css_text 是一个用于将HTML和CSS内容转换为Flutter RichText 小部件的库。它支持大多数与文本内容相关的CSS属性，但不包括文本对齐相关属性。

示例HTML内容：

<body>
<p style="font-size:2.5em;color:darkseagreen">This is a test</p>
<p style="font-size:1.8em;color:#ff3311">So is this</p>
<p style="font-size:45px;background:#3311ff;color:yellow">And this!</p>
<br/>
<br/>
<p style="font-size:1.5em">
Hello <b style="font-style:italic;color:#bb0000;background:#eeff00">World</b>!!
<br/>
How are you <span style="font-family:RobotoBlack;color:#ff0000;">today?</span>
<br/>
<b>But</b> why are you doing <a href="https://google.com">this?</a><br/>
<br/>
<span style="text-decoration: underline wavy; font-size:2em">Can you tell <del>me</del>?</span>
<br/>
Multiple <span style="font-weight:100">font</span> 
<span style="font-weight:600">weights</span><br/><br/>
Please visit <a style="font-weight:bold;" href="https://docs.flutter.io">Flutter docs</a>
<br/>
<br/>
<span style="color:#990000ff;background:#4400ff00">
This text is slightly transparent, and has a slightly transparent background too.
</span>
</p>
</body>

使用方法

1. 添加依赖

首先，在pubspec.yaml文件中添加css_text依赖：

dependencies:
  css_text: ^latest_version # 替换为最新版本号

2. 导入库

在Dart代码中导入css_text库：

import 'package:css_text/css_text.dart';

3. 创建 RichText 小部件

通过调用HTML.toTextSpan()或HTML.toRichText()方法从任何HTML内容创建RichText小部件：

String htmlContent = """
<p style="font-size:1.5em;color:#99ff0011">Hello <b>World</b>
""";

// 方法一：创建TextSpan对象
var myTextSpan = HTML.toTextSpan(context, htmlContent);

// 方法二：直接创建RichText小部件
var myRichText = HTML.toRichText(context, htmlContent);

4. 处理链接

如果HTML内容包含链接，可以使用linksCallback参数来处理它们：

String htmlContent = """<span style="font-size:2em">
Please click <a href="https://pub.dartlang.org">here</a> or 
<a href="https://old.reddit.com">here</a>.<br/>
<br/>
Go ahead! Try it.
</span>""";

var myRichText = HTML.toRichText(context, htmlContent, linksCallback: (link) {
    // 可以使用url_launcher库打开链接，或者在应用内处理链接
    print(link); // 例如打印链接
});

完整示例Demo

下面是一个完整的Flutter应用程序示例，演示了如何使用css_text插件显示带样式的HTML内容，并处理其中的链接点击事件：

import 'package:flutter/material.dart';
import 'package:css_text/css_text.dart';
import 'package:logger/logger.dart';

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

Logger logger = Logger();

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

  @override
  Widget build(BuildContext context) {
    String htmlContent = """
<body>
<p style="font-size:2.5em;color:darkseagreen">This is a test</p>
<p style="font-size:1.8em;color:#ff3311">So is this</p>
<p style="font-size:45px;background:#3311ff;color:yellow">And this!</p>
<br/>
<br/>
<p style="font-size:1.5em">
Hello <b style="font-style:italic;color:#bb0000;background:#eeff00">World</b>!!
<br/>
How are you <span style="font-family:RobotoBlack;color:#ff0000;">today?</span>
<br/>
<b>But</b> why are you doing <a href="https://google.com">this?</a><br/>
<br/>
<span style="text-decoration: underline wavy; font-size:2em">Can you tell <del>me</del>?</span>
<br/>
Multiple <span style="font-weight:100">font</span> 
<span style="font-weight:600">weights</span><br/><br/>
Please visit <a style="font-weight:bold;" href="https://docs.flutter.io">Flutter docs</a>
<br/>
<br/>
<span style="color:#990000ff;background:#4400ff00">
This text is slightly transparent, and has a slightly transparent background too.
</span>
</p>
</body>
""";

    var myRichText =
        HTML.toRichText(context, htmlContent, linksCallback: (link) {
      logger.i("You clicked on $link");
    });

    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: const Text("Demo")),
            body: Container(
                padding: const EdgeInsets.all(16.0), child: myRichText)));
  }
}

这个示例展示了如何使用css_text插件来解析并显示带有样式的HTML文本，并且能够响应HTML中的链接点击事件。希望这能帮助您更好地理解和使用css_text插件。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用css_text插件来应用CSS样式的文本的一个示例。css_text插件允许你将CSS样式应用到Flutter的文本组件中。

首先，确保你已经将css_text插件添加到你的pubspec.yaml文件中：

dependencies:
  flutter:
    sdk: flutter
  css_text: ^最新版本号  # 请替换为最新版本号

然后，运行flutter pub get来获取依赖。

以下是一个完整的示例代码，展示了如何使用css_text插件：

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

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

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

class MyHomePage extends StatelessWidget {
  final String cssStyledText = """
    <div>
      <p style="color: red; font-size: 24px; font-weight: bold;">
        这是一个红色、24号字体、粗体的段落。
      </p>
      <p style="color: blue; font-size: 18px; text-decoration: underline;">
        这是一个蓝色、18号字体、带下划线的段落。
      </p>
      <p style="color: green; font-size: 16px; text-align: center;">
        这是一个绿色、16号字体、居中对齐的段落。
      </p>
    </div>
  """;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter CSS Text Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: CssText(
          data: cssStyledText,
          styleBuilder: (TextStyle defaultStyle, Map<String, String> styles) {
            // 这里你可以根据CSS样式自定义TextStyle
            return defaultStyle.merge(TextStyle(
              color: Color(int.parse(styles['color'] ?? '0xFF000000', radix: 16)),
              fontSize: double.tryParse(styles['font-size'] ?? '16') ?? 16.0,
              fontWeight: styles['font-weight'] == 'bold' ? FontWeight.bold : FontWeight.normal,
              textDecoration: TextDecoration.values.firstWhereOrNull((decoration) => 
                  decoration.toString().split('.').last == styles['text-decoration']?.split('-').last,
                  orElse: null) ?? TextDecoration.none,
              textAlign: TextAlign.values.firstWhereOrNull((align) => 
                  align.toString().split('.').last == styles['text-align'],
                  orElse: TextAlign.start),
            ));
          },
        ),
      ),
    );
  }
}

解释

  1. 导入必要的包：

    • package:flutter/material.dart：Flutter的基础Material组件。
    • package:css_text/css_text.dart：css_text插件。

  2. 定义CSS样式的字符串：

    • cssStyledText变量包含了HTML格式的字符串，其中包括了CSS样式。

  3. CssText组件：

    • data属性：接受包含CSS样式的HTML字符串。
    • styleBuilder属性：一个回调函数，用于将CSS样式转换为Flutter的TextStyle。你可以根据CSS属性自定义TextStyle，比如颜色、字体大小、字体粗细、文本装饰和文本对齐方式。

  4. 解析CSS样式：

    • 在styleBuilder中，我们解析了color、font-size、font-weight、text-decoration和text-align等CSS属性，并应用到了TextStyle中。

通过这种方式，你可以将CSS样式应用到Flutter的文本组件中，使你的文本更加美观和灵活。

回到顶部