Flutter文本平衡处理插件text_balancer的使用

Flutter文本平衡处理插件text_balancer的使用

Flutter 包，用于使文本更易读。它支持固定宽度和可变宽度字体。

如何使用

/// Widget
TextBalancer('text');

/// Text Extension
Text('text').balance(
  context,
  maxWidth: constraints.maxWidth,
);

/// String Extension
'text'.balance(
  textStyle: textStyle,
  maxWidth: constraints.maxWidth,
)

性能

• 时间复杂度 : n^2

参考资料

• https://xxyxyz.org/line-breaking

示例代码

以下是一个完整的示例，展示了如何在 Flutter 应用程序中使用 text_balancer 插件：

import 'package:example/widget/container_size_slider.dart';
import 'package:example/widget/font_size_slider.dart';
import 'package:example/widget/min_lines_slider.dart';
import 'package:example/widget/section.dart';
import 'package:example/widget/tile.dart';
import 'package:flutter/material.dart';
import 'package:text_balancer/text_balancer.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true),
      home: const ExamplePage(),
    ),
  );
}

class ExamplePage extends StatefulWidget {
  const ExamplePage({super.key});

  [@override](/user/override)
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  bool isKorean = false;

  // 获取要显示的文本
  String get text =>
      isKorean
          ? "Flutter是整个应用程序开发流程的变革者。"
          : "Flutter transforms the entire app development process.";

  // 容器宽度的通知器
  final ValueNotifier<double> containerWidthNoti = ValueNotifier(1);

  // 字号的通知器
  final ValueNotifier<double> fontSizeNoti = ValueNotifier(0.5);

  // 最小行数的通知器
  final ValueNotifier<double> minLinesNoti = ValueNotifier(0);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TextBalancer'),
        actions: [
          // 切换语言按钮
          TextButton(
            onPressed: () {
              setState(() {
                isKorean = !isKorean;
              });
            },
            child: Text(isKorean ? 'EN' : 'KO'),
          ),
        ],
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Expanded(
                child: LayoutBuilder(
                  builder: (context, constraints) => ValueListenableBuilder(
                    valueListenable: containerWidthNoti,
                    builder: (context, value, child) {
                      final double maxWidth = constraints.maxWidth;
                      return Tile(
                        width: (1 + value) * maxWidth / 2,
                        child: child,
                      );
                    },
                    child: ValueListenableBuilder(
                      valueListenable: fontSizeNoti,
                      builder: (context, value, child) => DefaultTextStyle(
                        style: TextStyle(
                          fontSize: 12 * (1 + 3 * value),
                          color: Colors.black,
                        ),
                        child: child!,
                      ),
                      child: SingleChildScrollView(
                        child: Column(
                          children: [
                            // 默认文本
                            Section(
                              title: '默认',
                              child: Text(text),
                            ),
                            const SizedBox(height: 32),

                            // 使用TextBalancer
                            Section(
                              title: 'Text Balancer',
                              child: ValueListenableBuilder(
                                valueListenable: minLinesNoti,
                                builder: (context, v, child) {
                                  final minLines = (v * 3 + 1).toInt();
                                  return TextBalancer(
                                    text,
                                    minLines: minLines,
                                  );
                                },
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 12),

              // 容器大小滑块
              ContainerSizeSlider(containerWidthNoti: containerWidthNoti),
              const SizedBox(height: 12),

              // 字号滑块
              FontSizeSlider(fontSizeNoti: fontSizeNoti),
              const SizedBox(height: 12),

              // 最小行数滑块
              MinLinesSlider(minLinesNoti: minLinesNoti),
            ],
          ),
        ),
      ),
    );
  }
}