Flutter响应式数据绑定插件observable_builder的使用

Flutter响应式数据绑定插件observable_builder的使用

简介

observable_builder 是一个轻量级的Flutter状态管理库，支持本地刷新和状态缓存。

使用

本示例将展示如何使用 observable_builder 插件进行响应式数据绑定。

支持的数据类型

• 1.obs
• '.obs'
• [].obs
• {}.obs
• nocache

示例1：使用 1.obs 类型

class TestWidget extends StatefulWidget {
  @override
  _TestWidgetState createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  // 定义一个可观察的变量
  final countObs = 0.obs;

  @override
  void initState() {
    // 监听状态变化
    observableCounter.listen((state) {
      print(state.current);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 使用ObservableBuilder来构建UI
        ObservableBuilder<BasicClass>(
          create: countObs,
          memo: (state) => [state.current],
          builder: (context, state) {
            // 显示当前值
            return Text('${state.current}');
          },
        ),
        // 添加按钮，用于增加计数器的值
        IconButton(
          onPressed: () => countObs.notify((state) => state.current++),
          icon: Icon(Icons.add),
        )
      ],
    );
  }
}

支持的状态缓存

示例2：使用缓存

class CounterState {
  int counter = 0;
}

var observableCounter = Observable(CounterState());

class TestWidget extends StatefulWidget {
  @override
  _TestWidgetState createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  @override
  void initState() {
    // 监听状态变化
    observableCounter.listen((state) {
      print(state.counter);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 使用ObservableBuilder来构建UI
        ObservableBuilder<CounterState>(
          create: observableCounter,
          memo: (state) => [state.counter],
          builder: (context, state) {
            // 显示当前值
            return Text('${state.counter}');
          },
        ),
        // 添加按钮，用于增加计数器的值
        IconButton(
          onPressed: () => observableCounter.notify((state) => state.counter++),
          icon: Icon(Icons.add),
        )
      ],
    );
  }
}

不使用缓存

示例3：不使用缓存

// 定义一个没有缓存的状态类
class NoCacheCounterState {
  int counter = 0;
}

// 使用没有缓存的状态
var observableCounter = Observable(NoCacheCounterState());

// 定义一个有缓存的状态类
class CacheCounterState {
  int counter;

  CacheCounterState({this.counter = 0});

  // 从JSON解码
  static CacheCounterState fromJson(dynamic json) {
    return CacheCounterState(
      counter: json["counter"],
    );
  }

  // 转换为JSON
  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = Map<String, dynamic>();
    data['counter'] = this.counter;
    return data;
  }
}

// 使用有缓存的状态
var observableCounter = Observable(CacheCounterState(),
    cacheKey: 'CounterState_CacheKey', decoder: CacheCounterState.fromJson);