Flutter自定义分隔行插件separated_row的使用

SeparatedRow

Flutter package for rendering separated Row children.

也试试 !

使用方法 Usage

SeparatedRow 与 Row 的唯一区别在于 separatorBuilder 和 includeOuterSeparators 属性。

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

示例代码 Example Code

以下是一个完整的示例demo，展示了如何在项目中使用 SeparatedRow 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SeparatedRow Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'SeparatedRow Demo Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: IntrinsicHeight(
          child: SeparatedRow(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            separatorBuilder: (BuildContext context, int index) {
              return Container(
                width: 1.0,
                height: 15.0,
                color: Colors.grey,
              );
            },
            includeOuterSeparators: true,
            children: [
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.favorite),
              ),
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.favorite_border),
              ),
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.check),
              ),
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.close),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个简单的 Flutter 应用程序，其中包含一个 SeparatedRow 小部件。该小部件包含了四个图标按钮，并且每个按钮之间都有灰色的分隔线。此外，由于设置了 includeOuterSeparators 为 true，所以在第一个和最后一个图标按钮的外部也有分隔线。

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

gougou168 1楼•3 天前

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

当然，以下是一个关于如何在Flutter中使用separated_row插件来自定义分隔行的代码示例。separated_row是一个方便的插件，用于在行中的各个项目之间添加分隔符。虽然Flutter本身并没有官方的separated_row插件，但我们可以使用类似的功能来实现相同的效果。如果你指的是第三方插件，通常其功能可以通过Flutter的内置功能或简单封装实现。

这里，我将展示如何使用Flutter的内置功能来实现一个自定义分隔行的效果，这在功能上相当于一个separated_row插件。

使用Flutter内置功能实现自定义分隔行

创建一个Flutter项目（如果你还没有项目的话）。
在你的pubspec.yaml文件中添加依赖（通常不需要额外依赖，除非你有特定的UI需求，如使用图标或特殊分隔符）。
在你的Dart文件中实现自定义分隔行。

以下是一个示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Separated Row Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Separated Row Demo'),
        ),
        body: Center(
          child: CustomSeparatedRow(),
        ),
      ),
    );
  }
}

class CustomSeparatedRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: List.generate(
        5, // 假设我们有5个项目
        (index) {
          final isLast = index == 4; // 检查是否为最后一个项目
          return Column(
            children: <Widget>[
              Text('Item ${index + 1}'), // 项目内容
              if (!isLast) Divider( // 如果不是最后一个项目，则添加分隔符
                color: Colors.grey,
                height: 16,
                thickness: 1,
                indent: 16,
                endIndent: 16,
              ),
            ],
          );
        },
      ),
    );
  }
}

解释

Row：用于水平排列子部件。
List.generate：生成一个包含5个子部件的列表，每个子部件都是一个Column。
Column：用于垂直排列子部件，这里我们用它来组合文本和分隔符。
Divider：作为分隔符，如果当前项目不是最后一个项目，则在项目后添加分隔符。
条件渲染：使用if语句来确保分隔符不会被添加到最后一个项目之后。

这种方法虽然使用了Column和条件渲染来模拟分隔行，但效果上等同于一个自定义的separated_row插件。如果你的项目中确实有一个名为separated_row的第三方插件，你可以查阅其文档并按照其用法进行集成，但大多数情况下，Flutter的内置功能已经足够强大，能够满足大多数自定义布局需求。