Flutter文本编辑与展示插件flutter_portabletext_fork的使用

简介

flutter_portabletext_fork 是对 flutter_portabletext 包的修改版本，用于在 Flutter 应用中渲染来自 Sanity.io 的富文本内容。它遵循 PortableText 规范，允许开发者轻松展示复杂的富文本内容。

特性

• 渲染符合 PortableText 规范的富文本。
• 支持链接点击事件。
• 提供样式自定义选项。

安装

在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_portabletext_fork: ^版本号

然后运行以下命令安装：

flutter pub get

使用方法

以下是一个完整的示例代码，展示如何使用 flutter_portabletext_fork 来渲染富文本。

示例代码

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_portabletext_fork/flutter_portabletext.dart';
import 'package:flutter_portabletext_fork/portable_text.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter PortableText Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.orangeAccent),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter PortableText Demo'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<PortableText>? portableText;

  @override
  void initState() {
    super.initState();

    // 初始化富文本数据（从 JSON 文件加载）
    initPortableTextWithJson() async {
      rootBundle.loadString('assets/ex.json').then((value) async {
        final data = await json.decode(value) as List<dynamic>;
        final List<PortableText> listPortableText = [];
        for (var dynamicPort in data) {
          final portableText = PortableText.fromJson(dynamicPort);
          listPortableText.add(portableText);
        }
        setState(() {
          portableText = listPortableText;
        });
      });
    }

    initPortableTextWithJson();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            if (portableText != null)
              SizedBox(
                width: double.infinity,
                child: PortableTextRichText(
                  portableText: portableText!, // 渲染的富文本列表
                  onTapLink: (value) => print(value), // 点击链接时触发回调
                ),
              ),
          ],
        ),
      ),
    );
  }
}

说明

1. 初始化数据：

   • 使用 rootBundle.loadString 加载本地 JSON 文件。
   • 将 JSON 数据解析为 List<dynamic>，并将其转换为 PortableText 对象。

2. 渲染富文本：

   • 使用 PortableTextRichText 小部件来展示富文本内容。
   • onTapLink 回调可以捕获用户点击链接的行为。

3. 自定义样式： 如果需要更改默认样式，可以通过配置 mapStyle 和其他参数来自定义。

自定义样式

如果需要修改默认的文本样式，可以通过以下方式调整：

this.mapStyle = const {
  'h1': TextStyle(fontSize: 24),
  'h2': TextStyle(fontSize: 22),
  'h3': TextStyle(fontSize: 20),
  'h4': TextStyle(fontSize: 18),
  'h5': TextStyle(fontSize: 16),
  'h6': TextStyle(fontSize: 14),
  'blockquote': TextStyle(fontSize: 12),
},
this.quoteStyle = const TextStyle(
  fontSize: 12,
),
this.normalStyle = const TextStyle(fontSize: 10),
this.externalLinkColor = const Color(0xFF0645AD),
this.codeBackgroundColor = Colors.grey,
this.externalLinkDecoration = TextDecoration.underline,