Flutter布局插件equal_space的使用

关于Equal Space

Equal Space 是一个 Flutter 插件，它允许你在 Flutter 应用中停止使用 SizedBox 来添加间距。这个插件简化了创建均匀间隔的行和列的过程。它提供了两个自定义小部件：SpacedRow 和 SpacedColumn，使管理子小部件的间距和对齐方式变得容易。

功能

• 可定制的间距：轻松调整子小部件之间的间距。
• 灵活的对齐方式：支持主轴和交叉轴对齐。
• 简化的代码：减少行和列中间距的样板代码。

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  equal_space: ^latest_version

然后运行以下命令来安装插件：

flutter pub get

在 Dart 文件中导入插件：

import 'package:equal_space/equal_space.dart';

示例代码

SpacedColumn 示例

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SpacedColumn(
      space: 26.0,
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.end,
      textDirection: TextDirection.rtl,
      verticalDirection: VerticalDirection.down,
      textBaseline: TextBaseline.alphabetic,
      children: [
        Container(width: 50, height: 50, color: Colors.red),
        Container(width: 50, height: 50, color: Colors.green),
        Container(width: 50, height: 50, color: Colors.blue),
      ],
    );
  }
}

SpacedRow 示例

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SpacedRow(
      space: 26.0,
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.end,
      textDirection: TextDirection.rtl,
      verticalDirection: VerticalDirection.down,
      textBaseline: TextBaseline.alphabetic,
      children: [
        Container(width: 50, height: 50, color: Colors.red),
        Container(width: 50, height: 50, color: Colors.green),
        Container(width: 50, height: 50, color: Colors.blue),
      ],
    );
  }
}

完整示例应用

以下是一个完整的示例应用，展示了如何在同一个页面中使用 SpacedRow 和 SpacedColumn：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Spaced Widgets Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: SpacedColumn(
            space: 0,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text('SpacedRow Example:', style: TextStyle(fontSize: 18)),
              SpacedRow(
                space: 26.0,
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.end,
                textDirection: TextDirection.rtl,
                verticalDirection: VerticalDirection.down,
                textBaseline: TextBaseline.alphabetic,
                children: [
                  Container(width: 50, height: 50, color: Colors.red),
                  Container(width: 50, height: 50, color: Colors.green),
                  Container(width: 50, height: 50, color: Colors.blue),
                ],
              ),
              
              const SizedBox(height: 40),
              const Text('SpacedColumn Example:',
                  style: TextStyle(fontSize: 18)),
              SpacedColumn(
                space: 16.0,
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.end,
                textDirection: TextDirection.ltr,
                verticalDirection: VerticalDirection.up,
                textBaseline: TextBaseline.alphabetic,
                children: [
                  Container(width: 50, height: 50, color: Colors.orange),
                  Container(width: 50, height: 50, color: Colors.purple),
                  Container(width: 50, height: 50, color: Colors.yellow),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解释

• 概述：停止在小部件中使用 SizedBox 来添加间距。
• 功能：你可以使用 mainAxisAlignment 和 crossAxisAlignment 属性，并结合 space 属性来控制间距。
• 优势：示例中的 SpacedRow 和 SpacedColumn 小部件展示了这个插件的有效性。
• 示例：如何运行示例应用。
• 贡献：欢迎 fork 仓库并提交 PR。
• 许可证：MIT 许可证。
• 联系我们：点击下方链接访问我的 YouTube 频道和 GitHub。