Flutter文本断行与连字符插件hyphenatorx的使用

hyphenatorx 是一个用于Flutter应用的插件，它实现了基于TeX定义的多种语言的断字算法。这个插件提供了多种功能，包括将字符串断字并根据可用宽度进行换行显示。以下是如何在Flutter项目中使用该插件的详细指南和示例代码。

快速开始

首先，确保在你的 pubspec.yaml 文件中添加 hyphenatorx 依赖：

dependencies:
  flutter:
    sdk: flutter
  hyphenatorx: ^最新版本号

然后运行 flutter pub get 来安装依赖。

示例代码

以下是一个完整的Flutter应用程序示例，展示了如何使用 hyphenatorx 插件。

import 'package:flutter/material.dart';
import 'package:hyphenatorx/hyphenatorx.dart';
import 'package:hyphenatorx/widget/texthyphenated.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HyphenatorExampleWidget(),
    );
  }
}

class HyphenatorExampleWidget extends StatefulWidget {
  const HyphenatorExampleWidget({Key? key}) : super(key: key);

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

class _HyphenatorExampleWidgetState extends State<HyphenatorExampleWidget> {
  String text = "subdivision";
  final controller = TextEditingController();
  late Future<Hyphenator> _future;

  @override
  void initState() {
    super.initState();
    controller.text = text;
    controller.addListener(() {
      setState(() {
        text = controller.text;
      });
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _future = Hyphenator.loadAsync(Language.language_en_us, symbol: '_');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<Hyphenator>(
          future: _future,
          builder: (BuildContext context, AsyncSnapshot<Hyphenator> snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const Center(child: CircularProgressIndicator());
            }
            final Hyphenator hyphernator = snapshot.data!;

            return SingleChildScrollView(
                child: Center(
                    child: SizedBox(
                        width: MediaQuery.of(context).size.width * 2 / 3,
                        child: Column(
                          children: [
                            TextField(
                              controller: controller,
                              decoration: const InputDecoration(
                                  hintText: 'Enter some text'),
                            ),
                            const SizedBox(height: 16),
                            text.isEmpty
                                ? const Text('Enter some text')
                                : Text(hyphernator.hyphenateText(text),
                                    style: const TextStyle(fontSize: 32)),
                            const SizedBox(height: 32),
                            text.isEmpty
                                ? const SizedBox.shrink()
                                : Text(
                                    'Cached hyphenated:\n\n${hyphernator.cachedHyphendWords}',
                                    textAlign: TextAlign.center,
                                  ),
                            const SizedBox(height: 16),
                            text.isEmpty
                                ? const SizedBox.shrink()
                                : Text(
                                    'Cached non-hyphenated:\n\n${hyphernator.cachedNonHyphendWords}',
                                    textAlign: TextAlign.center,
                                  ),
                            const Divider(),
                            const Text("Widget Test:"),
                            const SizedBox(height: 16),
                            const Text(
                                "TextHyphenated('subdivision', 'en_us', symbol:'@')"),
                            const SizedBox(height: 16),
                            const TextHyphenated('subdivision', 'en_us',
                                symbol: '@'),
                          ],
                        ))));
          }),
    );
  }
}

使用说明

同步实例化

同步实例化时，数据会被编译到项目中，所有71种语言文件总共大约有13.3 MB。

import 'package:hyphenatorx/hyphenatorx.dart';
import 'package:hyphenatorx/languages/language_en_us.dart';

final config = Language_en_us();

final hyphenator = Hyphenator(
  config,
  symbol: '_',
);

异步实例化

异步实例化时，数据会从本地的 assets 文件夹按需加载，这种方式占用的内存较少。

import 'package:hyphenatorx/hyphenatorx.dart';

final hyphenator = await Hyphenator.loadAsync(
    Language.language_en_us, 
    symbol: '_');

// 或者这样：
final hyphenator = await Hyphenator.loadAsyncByAbbr(
    'en_us', 
    symbol: '_');

小部件使用

TextHyphenated 小部件输出一个 Text 组件，并根据可用宽度对输入字符串进行断字和换行。

import 'package:hyphenatorx/widget/texthyphenated.dart';

TextHyphenated('subdivision', 
  'en_us',
  style: TextStyle(fontSize: 56))

函数调用

通过函数调用在所有可能的位置插入连字符符号。

final hyphenator = Hyphenator(Language_en_us());

print(
  hyphenator.hyphenateText('subdivision subdivision', 
    hyphenAtBoundaries: true)); // 'sub_di_vi_sion_ _sub_di_vi_sion'

print(
  hyphenator.hyphenateText('subdivision subdivision')); // 'sub_di_vi_sion sub_di_vi_sion'

print(
  hyphenator.hyphenateWord('subdivision')); // 'sub_di_vi_sion'

print(
  hyphenator.syllablesWord('subdivision')); // ['sub', 'di', 'vi', 'sion']

手动断字

手动迭代标记树以实现自定义的断字方法。

final text = """A vast subdivision of culture, 
    composed of many creative endeavors and disciplines.""";

final hyphenator = Hyphenator(Language_en_us());
final List<TextPartToken> tokens = hyphenator.hyphenateTextToTokens(text);

tokens.forEach((part) {
  if (part is NewlineToken) {
    print(part.text); // = is always a single newline
  } else if (part is TabsAndSpacesToken) {
    print(part.text); // tabs and spaces found in `text`
  } else if (part is WordToken) {
    part.parts.forEach((syllableAndSurrounding) {
      print(syllableAndSurrounding.text); // sub / di / vi / sion.
    });
  }
});

以上是 hyphenatorx 插件的基本使用方法和一些示例代码，希望对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时联系我。