Flutter状态变化监听插件status_change的使用

Flutter状态变化监听插件status_change的使用

示例

Easy Status Change package for Flutter! 👌

注意事项

注意：此包处于早期阶段。尚不足以保证稳定性。某些API可能会发生变化。

示例

竖直方向状态变化	水平方向状态变化
[]	[]

特性

状态变化及其每个组件都是小部件

• 支持竖直和水平方向。
• 可以与Flutter小部件（如Row, Column, CustomScrollView等）组合使用。

安装

1. 添加依赖

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

dependencies:
  status_change: ^[latest_version]

2. 安装依赖

通过命令行安装包：

$ flutter pub get

你也可以通过IDE支持的工具来安装包，具体请查看相应文档。

3. 导入库

在Dart代码中导入库：

import 'package:status_change/status_change.dart';

基本用法

StatusChange.tileBuilder(
  theme: StatusChangeThemeData(
    direction: Axis.vertical, // 设置为竖直方向
    connectorTheme: ConnectorThemeData(
      space: 1.0, // 连接器间距
      thickness: 1.0, // 连接器厚度
    ),
  ),
  builder: StatusChangeTileBuilder.connected(
    itemWidth: (_) => MediaQuery.of(context).size.width / _processes.length, // 设置每个项目的宽度
    contentWidgetBuilder: (context, index) {
      return Padding(
        padding: const EdgeInsets.all(15.0),
        child: Text(
          'add content here', // 在这里添加具体内容
          style: TextStyle(
            color: Colors.blue, // 文字颜色
          ),
        ),
      );
    },
    nameWidgetBuilder: (context, index) {
      return Padding(
        padding: const EdgeInsets.all(20),
        child: Text(
          'your text ', // 文字内容
          style: TextStyle(
            fontWeight: FontWeight.bold,
            color: getColor(index), // 根据索引动态设置文字颜色
          ),
        ),
      );
    },
    indicatorWidgetBuilder: (_, index) {
      if (index <= _processIndex) { // 当前索引小于等于处理索引时，显示圆点指示器
        return DotIndicator(
          size: 35.0,
          border: Border.all(color: Colors.green, width: 1),
          child: Padding(
            padding: const EdgeInsets.all(6.0),
            child: Container(
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.green,
              ),
            ),
          ),
        );
      } else { // 否则显示空心圆点指示器
        return OutlinedDotIndicator(
          size: 30,
          borderWidth: 1.0,
          color: todoColor,
        );
      }
    },
    lineWidgetBuilder: (index) {
      if (index > 0) {
        if (index == _processIndex) { // 当索引等于处理索引时，显示渐变线连接器
          final prevColor = getColor(index - 1);
          final color = getColor(index);
          var gradientColors;
          gradientColors = [
            prevColor,
            Color.lerp(prevColor, color, 0.5)
          ];
          return DecoratedLineConnector(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: gradientColors,
              ),
            ),
          );
        } else { // 否则显示纯色线连接器
          return SolidLineConnector(
            color: getColor(index),
          );
        }
      } else {
        return null; // 第一个元素不显示线连接器
      }
    },
    itemCount: _processes.length, // 设置项目总数
  ),
),

完整示例

你可以查看以下示例代码，该代码位于GitHub上。

import 'package:flutter/material.dart';

import 'example_vertical/vertical_example.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VerticalExample(), // 运行竖直方向示例
    );
  }
}