Flutter分离功能插件 separate 的使用

概述

separate 是一个实用的小型包，它为列表/可迭代对象带来了 separate 扩展方法。这个包在Flutter中特别有用，例如在 Row 或 Column 中插入间隔元素，类似于 ListView.separated。

它可以非常直观地在Flutter中实现类似Figma中的元素间距效果。

基本用法

这个包可以操作列表/可迭代对象，因此非常灵活。以下是几个在 Column 中添加元素间隔的示例：

固定间距

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

class Header extends StatelessWidget {
  final String url;

  Header({required this.url});

  @override
  Widget build(BuildContext context) {
    return Image.network(url);
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final imgUrl = "https://example.com/image.png";
    final name = "John Doe";
    final age = "30";

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Separate Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              if (imgUrl != null) Header(url: imgUrl),
              Text(name),
              if (age != null) Text(age),
            ].separate((i, e0, e1) => const SizedBox(height: 16)),
          ),
        ),
      ),
    );
  }
}

动态间距

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

class Header extends StatelessWidget {
  final String url;

  Header({required this.url});

  @override
  Widget build(BuildContext context) {
    return Image.network(url);
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final imgUrl = "https://example.com/image.png";
    final name = "John Doe";
    final age = "30";

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Dynamic Separate Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              if (imgUrl != null) Header(url: imgUrl),
              Text(name),
              if (age != null) Text(age),
            ].separate(
              (i, e0, e1) => const SizedBox(
                height: e0 is Header ? 24 : 16,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在前后插入元素

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

class Header extends StatelessWidget {
  final String url;

  Header({required this.url});

  @override
  Widget build(BuildContext context) {
    return Image.network(url);
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final imgUrl = "https://example.com/image.png";
    final age = "30";

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Before and After Separate Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              if (imgUrl != null) Header(url: imgUrl),
              if (age != null) Text(age),
            ].separate(
              // 不在元素之间插入任何内容
              (i, e0, e1) => null,
              // 如果有元素，则顶部间隙为32
              before: (first) => const SizedBox(height: 32),
              // 如果最后一个元素是Header，则底部添加Divider
              after: (last) => last is Header ? const Divider() : null,
            ),
          ),
        ),
      ),
    );
  }
}

作者

• Martin Sellergren

示例代码

以下是一些额外的示例代码，展示了如何在非UI环境中使用 separate 包：

import 'package:separate/separate.dart';

void main() async {
  print([].separate((i, e0, e1) => null)); // []
  print([].separate((i, e0, e1) => 0)); // []
  print([1, 2, 3].separate((i, e0, e1) => null)); // [1, 2, 3]
  print([1, 2, 3].separate((i, e0, e1) => 0)); // [1, 0, 2, 0, 3]
  print([1, 2, 3].separate((i, e0, e1) => e0 == 2 ? 0 : null)); // [1, 2, 0, 3]
  print([].separate(
    (i, e0, e1) => null,
    before: (first) => -1000,
    after: (last) => 1000,
  )); // []
  print([1, 2, 3].separate(
    (i, e0, e1) => null,
    before: (first) => -1000,
    after: (last) => 1000,
  )); // [-1000, 1, 2, 3, 1000]
}

通过这些示例，您可以更好地理解如何在Flutter项目中使用 separate 插件来实现灵活的布局和间距控制。