1. 关于

TextDivider 提供了一个可定制的 Flutter 小部件，可以轻松地在 Divider 的中间显示文本。

使用 TextDivider，您可以轻松显示在网站和移动应用中经常看到的以下对象。此外，TextDivider 具有灵活的自定义选项，可让您根据自己的喜好更改样式。

  • 著名的文本分隔符

スクリーンショット 2022-02-08 18 00 39

TextDivider 也支持垂直和水平方向。

要确切了解使用 TextDivider 可以获得什么样的输出，请参阅使用 Flutter 和 TextDivider 构建的此 GitHub Pages。

1.1. 引言

1.1.1. 安装库

使用 Dart

 dart pub add text_divider

使用 Flutter

 flutter pub add text_divider

1.1.2. 导入

import 'package:text_divider/text_divider.dart';

1.1.3. 使用 TextDivider

import 'package:text_divider/text_divider.dart';

class ExampleTextDivider extends StatelessWidget {
  const ExampleTextDivider({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(20),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // Outputs a horizontal Divider with the text placed in the center.
                TextDivider.horizontal(text: const Text('Horizontal Test')),
                // Outputs a vertical Divider with the text placed in the center.
                TextDivider.vertical(text: const Text('Vertical Test')),
              ],
            ),
          ),
        ),
      );
}

1.2. 详细信息

1.2.1. 自定义选项

名称 类型 必需 初始值 备注
text 文本 ✅ – 这是一个包含在常用 Material 包中的 Text 小部件。在此 Text 小部件中设置的文本数据将显示在 Divider 的中心。
direction 方向 ❌ Direction.horizontal 此选项指定要输出的 Divider 的方向。
size double? ❌ 16.0 如果 Divider 方向为水平，则此选项表示 高度；如果 Divider 方向为垂直，则表示 宽度。
粗细 double? ❌ 0.0 在分隔符内绘制的线条的粗细。
缩进 double? ❌ 0.0 分隔符前缘的空白空间量。
结束缩进 double? ❌ 0.0 分隔符后缘的空白空间量。
color Color? ❌ DividerThemeData.color 或 ThemeData.dividerColor 绘制线条时使用的颜色。

1.2.2. 水平构造函数

可以通过默认构造函数的参数指定 Divider 的方向，但更简单的方法是使用 horizontal 构造函数。但是，请注意，如果您使用此 horizontal 构造函数，则无法在 TextDivider 的调用者中指定 const。

1.2.3. 垂直构造函数

您还可以使用 vertical 构造函数来实现垂直方向。但是，请注意，如果您使用此 vertical 构造函数，则无法在 TextDivider 的调用者中指定 const。

1.3. 许可证

Copyright (c) 2022, Kato Shinya. All rights reserved.
Use of this source code is governed by a
BSD-style license that can be found in the LICENSE file.

1.4. 更多信息

TextDivider 由 **加藤慎也** 设计和实现。