Flutter列分隔插件separated_column的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter列分隔插件separated_column的使用

SeparatedColumn pub package

这是一个用于渲染带有分隔符的Column子组件的Flutter包。

此外，你也可以试试 SeparatedRow pub package！

example.gif

使用方法

SeparatedColumn 和 Column 之间的唯一区别在于 separatorBuilder 和 includeOuterSeparators 属性。

  • separatorBuilder - 每当需要插入分隔符时执行。
  • includeOuterSeparators - 如果为 true，则在第一个和最后一个元素之前和之后添加分隔符。

下面是一个简单的示例代码，展示了如何使用 SeparatedColumn 插件：

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

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

class Application extends StatelessWidget {
  const Application({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SeparatedColumn Demo',
      home: HomePage('SeparatedColumn Demo'),
    );
  }
}

class HomePage extends StatelessWidget {
  final String title;

  HomePage(this.title);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: SeparatedColumn(
          children: <Widget>[
            Text("Item 1"),
            Text("Item 2"),
            Text("Item 3"),
          ],
          separatorBuilder: (BuildContext context, int index) {
            return Divider(height: 8, color: Colors.grey);
          },
          includeOuterSeparators: true,
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
        ),
      ),
    );
  }
}

示例说明

在这个例子中，我们创建了一个包含三个文本项的 SeparatedColumn。每个文本项之间都有一个灰色的分割线（Divider），并且在第一项之前和最后一项之后也各有一个分割线，因为 includeOuterSeparators 设置为了 true。

你可以根据自己的需求调整 separatorBuilder 函数中的内容，以创建不同样式的分隔符。例如，可以使用容器（Container）来创建自定义高度或颜色的分隔符，或者甚至添加图标、图片等更复杂的分隔符。

通过这种方式，SeparatedColumn 可以帮助你快速地构建出具有清晰分隔效果的列表布局，使你的应用界面更加整洁美观。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter中使用separated_column插件的示例代码。separated_column插件允许你在列（Column）中的每个子项之间添加分隔符。虽然这不是Flutter官方提供的插件，但假设其工作原理类似于自定义的Column组件，我们可以实现类似的功能。

首先，确保你已经在pubspec.yaml文件中添加了separated_column（假设存在这样的包，或者你可以使用自定义实现）。

dependencies:
  flutter:
    sdk: flutter
  separated_column: ^x.y.z  # 假设版本号存在，请替换为实际版本号

然后运行flutter pub get来获取依赖。

以下是一个使用separated_column（或自定义实现）的示例代码：

import 'package:flutter/material.dart';
import 'package:separated_column/separated_column.dart';  // 假设存在这样的包

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Separated Column Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Separated Column Example'),
        ),
        body: Center(
          child: SeparatedColumn(
            separatorBuilder: (context, index) {
              return Divider(
                color: Colors.grey,
                thickness: 1.0,
              );
            },
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.home),
                title: Text('Home'),
              ),
              ListTile(
                leading: Icon(Icons.star),
                title: Text('Favorites'),
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Settings'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 如果没有separated_column包，你可以自定义一个类似的组件
class CustomSeparatedColumn extends StatelessWidget {
  final List<Widget> children;
  final WidgetBuilder separatorBuilder;

  CustomSeparatedColumn({required this.children, required this.separatorBuilder});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: List.generate(
        children.length,
        (index) {
          if (index < children.length - 1) {
            return Column(
              children: <Widget>[
                children[index],
                separatorBuilder(context, index),
              ],
            );
          } else {
            return children[index];
          }
        },
      ),
    );
  }
}

// 使用自定义的SeparatedColumn
// void main() {
//   runApp(MyAppCustom());
// }

// class MyAppCustom extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       title: 'Custom Separated Column Example',
//       theme: ThemeData(
//         primarySwatch: Colors.blue,
//       ),
//       home: Scaffold(
//         appBar: AppBar(
//           title: Text('Custom Separated Column Example'),
//         ),
//         body: Center(
//           child: CustomSeparatedColumn(
//             separatorBuilder: (context, index) {
//               return Divider(
//                 color: Colors.grey,
//                 thickness: 1.0,
//               );
//             },
//             children: <Widget>[
//               ListTile(
//                 leading: Icon(Icons.home),
//                 title: Text('Home'),
//               ),
//               ListTile(
//                 leading: Icon(Icons.star),
//                 title: Text('Favorites'),
//               ),
//               ListTile(
//                 leading: Icon(Icons.settings),
//                 title: Text('Settings'),
//               ),
//             ],
//           ),
//         ),
//       ),
//     );
//   }
// }

上面的代码展示了如何使用separated_column（如果存在的话）以及如何实现一个自定义的SeparatedColumn。如果你找不到separated_column包，可以直接使用自定义的CustomSeparatedColumn组件。

注意：由于separated_column包可能不存在，我提供了一个自定义实现的例子。如果你找到了真实的separated_column包，你可以直接使用它，而不需要自定义实现部分。

回到顶部