Flutter间距管理插件gapplus的使用

Flutter间距管理插件gapplus的使用

当在Column或Row内部添加空隙时，我们有多种选择：

  • 我们可以在这些小部件周围添加一个Padding，但这会非常冗长。
  • 或者我们可以在这之间添加SizedBox小部件。

Gap是一个选项。它就像SizedBox一样，但你不必知道它是位于Row还是Column内。因此，使用Gap比使用SizedBox更简洁。

开始使用

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

import 'package:gapplus/gapplus.dart';

然后只需在一个Column或Row中添加一个指定大小的Gap即可。

return Column(
  children: <Widget>[
    Container(color: Colors.red, height: 20),
    const Gap(20), // 添加20像素的空隙。
    Container(color: Colors.red, height: 20),
  ],
);

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

MaxGap

该包还附带了一个MaxGap小部件。 MaxGap小部件将在Column或Row中尝试以指定大小填充可用空间。如果可用空间小于指定大小，MaxGap小部件将只占用可用空间。

这在你希望间隙缩小以避免溢出时很有用。

return  const Scaffold(
  body: SafeArea(
    child: Column(
      children: <Widget>[
         Gapplus.expand(20, color: Colors.red),
         Gapplus(80),
         Gapplus.expand(20, color: Colors.red),
         MaxGap(2000),
         Gapplus.expand(20, color: Colors.red),
        Row(
          children: <Widget>[
            Gapplus(20, color: Colors.green, crossAxisExtent: 20),
            Gapplus(50),
            Gapplus(20, color: Colors.green, crossAxisExtent: 20),
          ],
        ),
         Gapplus.expand(200, color: Colors.blue),
      ],
    ),
  ),
);

其他参数

默认情况下，Gap在其Flex父元素相反的方向上没有大小。如果你希望Gap具有颜色，你需要设置color和crossAxisExtent参数。你还可以使用Gap.expand构造函数来扩展Gap，使其在其Flex父元素相反的方向上占据空间。

SliverGap

还有一个Gap小部件的Sliver版本：

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

更多关于Flutter间距管理插件gapplus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter间距管理插件gapplus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


GapPlus 是一个用于 Flutter 应用的间距管理插件，它可以帮助开发者更方便地管理布局中的间距，尤其是在处理响应式设计时。通过 GapPlus，你可以轻松地定义和使用间距值，而不需要手动计算或重复定义相同的间距值。

安装 GapPlus

首先，你需要在 pubspec.yaml 文件中添加 gapplus 依赖：

dependencies:
  flutter:
    sdk: flutter
  gapplus: ^1.0.0  # 请检查最新版本

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

基本用法

1. 导入包

import 'package:gapplus/gapplus.dart';

2. 初始化 GapPlus

在使用 GapPlus 之前，你需要初始化它。通常，你可以在 main.dart 中进行初始化：

void main() {
  GapPlus.init(
    baseSpacing: 8.0,  // 基础间距单位，默认为 8.0
    scaleFactor: 1.0,  // 缩放因子，默认为 1.0
  );
  runApp(MyApp());
}

3. 使用 GapPlus 设置间距

GapPlus 提供了多种方法来设置间距：

  • GapPlus.space(double multiplier): 返回一个 SizedBox，其高度和宽度都为 baseSpacing * multiplier。
  • GapPlus.horizontal(double multiplier): 返回一个 SizedBox，其宽度为 baseSpacing * multiplier。
  • GapPlus.vertical(double multiplier): 返回一个 SizedBox，其高度为 baseSpacing * multiplier。
示例
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GapPlus Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Hello, GapPlus!'),
              GapPlus.vertical(2), // 2倍基础间距高度的空白
              GapPlus.space(1),    // 1倍基础间距的空白
              GapPlus.horizontal(3), // 3倍基础间距宽度的空白
              Text('End of Example'),
            ],
          ),
        ),
      ),
    );
  }
}

自定义间距

你可以在初始化时设置 baseSpacing 和 scaleFactor 来调整间距的大小。例如，如果你希望基础间距为 10.0，并且整体间距放大 1.5 倍，可以这样设置：

GapPlus.init(
  baseSpacing: 10.0,
  scaleFactor: 1.5,
);
回到顶部