Flutter自动分隔符插件auto_divider的使用

Flutter自动分隔符插件auto_divider的使用

在Flutter中，AutoDivider 是一个方便添加分割线的插件。它受到 Gap 插件的启发，允许你在 Column 或 Row 中轻松添加分隔符。

介绍

当需要在 Column 或 Row 中添加分隔符时，我们通常会直接在 Column 中添加 Divider，在 Row 中添加 VerticalDivider。这种方式非常繁琐。

AutoDivider 是另一种选择。它像 Divider 一样工作，但你无需知道它是放在 Row 还是 Column 中。因此，它比使用 Divider 和 VerticalDivider 更简洁。

获取开始

在你的库中添加以下导入：

import 'package:auto_divider/auto_divider.dart';

然后只需在 Column 或 Row 中添加 AutoDivider，并指定其大小。

return Column(
  children: <Widget>[
    Container(color: Colors.red, height: 20),
    const AutoDivider(mainAxisExtent: 20), // 添加一个20像素高的分隔符。
    Container(color: Colors.red, height: 20),
  ],
);

AutoDivider 小部件也可以用于 Scrollable 小部件，如 ListView。在这种情况下，它将在与 Scrollable 相同的方向上占据空间。

Gap

该插件还包含一个 Gap 小部件。

Gap 小部件会在 Column 或 Row 中添加指定大小的空隙。

其他参数

默认情况下，Gap 在与 Flex 父容器垂直的方向上没有大小。如果你想让 Gap 有颜色，你需要设置 color 和 crossAxisExtent 参数。你还可以使用 Gap.expand 构造函数来扩展 Gap 在与 Flex 父容器垂直的方向上的大小。

SliverGap

还有一个 Gap 的 Sliver 版本：

return CustomScrollView(
  slivers: <Widget>[
    const SliverGap(20), // 添加一个20像素高的空隙。
  ],
);

示例代码

以下是一个完整的示例代码，展示了如何使用 AutoDivider 和 Gap：

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

void main() => runApp(const MyApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gap Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

/// A widget.
class HomePage extends StatelessWidget {
  /// Creates a [HomePage].
  const HomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Gap.expand(20, thickness: 20, color: Colors.red), // 扩展的红色间隙
            Gap(80), // 普通间隙
            Gap.expand(20, thickness: 20, color: Colors.red), // 扩展的红色间隙
            Flexible(
              child: Gap.expand(double.infinity, thickness: double.infinity, color: Colors.blue), // 可以扩展到无限大的蓝色间隙
            ),
            AutoDivider(mainAxisExtent: 30), // 垂直方向上30像素高的分隔符
            IntrinsicHeight(
              child: Row(
                children: <Widget>[
                  Gap(20, thickness: 20, color: Colors.green, crossAxisExtent: 20), // 绿色间隙
                  AutoDivider(mainAxisExtent: 20, color: Colors.green), // 绿色分隔符
                  Gap(50), // 普通间隙
                  AutoDivider(mainAxisExtent: 20, color: Colors.green), // 绿色分隔符
                  Gap(20, thickness: 20, color: Colors.green, crossAxisExtent: 20), // 绿色间隙
                ],
              ),
            ),
            AutoDivider(mainAxisExtent: 30), // 垂直方向上30像素高的分隔符
            Gap.expand(200, thickness: 200, color: Colors.blue), // 扩展的蓝色间隙
          ],
        ),
      ),
    );
  }
}