Flutter分隔符插件easy_separator的使用

Flutter分隔符插件easy_separator的使用

easy_separator 是一个用于在Flutter中创建带有分隔符的列（Column）和行（Row）的插件。它可以帮助开发者更方便地添加分隔符，而无需手动为每个子元素添加分隔符。

Easy Separated Column

EasySeparatedColumn 是 easy_separator 插件提供的一个组件，用于创建带有分隔符的列。下面是一个示例，展示了如何使用 EasySeparatedColumn 来创建一个带有文本分隔符的列：

EasySeparatedColumn(
  // 设置列内子元素的交叉轴对齐方式
  crossAxisAlignment: CrossAxisAlignment.center,
  // 设置列内子元素的主轴对齐方式
  mainAxisAlignment: MainAxisAlignment.center,
  // 分隔符构建器，用于定义每个分隔符的内容
  separatorBuilder: (BuildContext context, int index) {
    return const Text('<Easy Separator>',);  // 分隔符内容为文本 "<Easy Separator>"
  },
  // 子元素列表
  children: [
    Container(height: 20, color: Colors.purple),  // 紫色容器
    Container(height: 20, color: Colors.lightBlue),  // 浅蓝色容器
    Container(height: 20, color: Colors.green),  // 绿色容器
    Container(height: 20, color: Colors.yellow),  // 黄色容器
    Container(height: 20, color: Colors.orange),  // 橙色容器
    Container(height: 20, color: Colors.red),  // 红色容器
  ],
)

Easy Separated Row

EasySeparatedRow 是 easy_separator 插件提供的另一个组件，用于创建带有分隔符的行。下面是一个示例，展示了如何使用 EasySeparatedRow 来创建一个带有旋转文本分隔符的行：

EasySeparatedRow(
  // 分隔符构建器，用于定义每个分隔符的内容
  separatorBuilder: (BuildContext context, int index) {
    return const RotatedBox(
      quarterTurns: 3,  // 旋转90度
      child: Text(
        '<Easy Separator>',  // 分隔符内容为文本 "<Easy Separator>"
      ),
    );
  },
  // 子元素列表
  children: [
    Container(width: 20, color: Colors.purple),  // 紫色容器
    Container(width: 20, color: Colors.lightBlue),  // 浅蓝色容器
    Container(width: 20, color: Colors.green),  // 绿色容器
    Container(width: 20, color: Colors.yellow),  // 黄色容器
    Container(width: 20, color: Colors.orange),  // 橙色容器
    Container(width: 20, color: Colors.red),  // 红色容器
  ],
)

完整示例Demo

为了更好地理解 easy_separator 插件的使用，下面是一个完整的示例代码，包含了 EasySeparatedColumn 和 EasySeparatedRow 的用法：

import 'package:flutter/material.dart';
import 'package:easy_separator/easy_separator.dart';  // 导入 easy_separator 包

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Easy Separator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Easy Separator Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // EasySeparatedColumn 示例
            Expanded(
              child: Card(
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: EasySeparatedColumn(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    separatorBuilder: (BuildContext context, int index) {
                      return const Text('<Easy Separator>',);
                    },
                    children: [
                      Container(height: 20, color: Colors.purple),
                      Container(height: 20, color: Colors.lightBlue),
                      Container(height: 20, color: Colors.green),
                      Container(height: 20, color: Colors.yellow),
                      Container(height: 20, color: Colors.orange),
                      Container(height: 20, color: Colors.red),
                    ],
                  ),
                ),
              ),
            ),
            SizedBox(height: 16.0),
            // EasySeparatedRow 示例
            Expanded(
              child: Card(
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: EasySeparatedRow(
                    separatorBuilder: (BuildContext context, int index) {
                      return const RotatedBox(
                        quarterTurns: 3,
                        child: Text('<Easy Separator>',),
                      );
                    },
                    children: [
                      Container(width: 20, color: Colors.purple),
                      Container(width: 20, color: Colors.lightBlue),
                      Container(width: 20, color: Colors.green),
                      Container(width: 20, color: Colors.yellow),
                      Container(width: 20, color: Colors.orange),
                      Container(width: 20, color: Colors.red),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}