Flutter类型化多值监听构建器插件multi_value_listenable_builder_typed的使用

Flutter类型化多值监听构建器插件multi_value_listenable_builder_typed的使用

MultiValueListenableBuilder 是一个用于在 Flutter 中同时监听多个 ValueListenable 的小部件。

多值监听构建器插件fork的原因

这是一个对原始的 multi_value_listenable_builder 包的重新包装。这个版本的目标是提供类型安全，而不是使用需要在构建器定义时进行类型转换的动态可监听对象。

可用的类型安全变体

1. DualValueListenableBuilder
2. TripleValueListenableBuilder

使用方法

1. 将 multi_value_listenable_builder 作为依赖项添加到你的项目中。
2. 在需要使用的文件中导入 package:multi_value_listenable_builder_typed/multi_value_listenable_builder_typed.dart。
3. 使用类型化的变体来实现类型化的回调。
4. 使用 MultiValueListenableBuilder 来监听更多的可监听对象，就像使用其他小部件一样。

import 'package:multi_value_listenable_builder_typed/multi_value_listenable_builder_typed.dart';

MultiValueListenableBuilder(
  // 添加所有的 ValueListenable
  valueListenables: [
    listenable0,
    listenable1,
    listenable2,
    ...
    listenableN
  ],
  builder: (context, values, child) {
    // 获取每个可监听对象的更新值
    return YourWidget(
      values.elementAt(0),
      values.elementAt(1),
      values.elementAt(2),
      ...
      values.elementAt(N),
      child: child // 可选的子组件
    );
  },
  child: YourOptionalChildWidget()
)

完整示例

以下是一个详细的示例，展示了如何使用 MultiValueListenableBuilder。

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

void main() {
  runApp(
    MaterialApp(
      title: 'Multi-ValueListenableBuilder Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Demo(),
    ),
  );
}

class Demo extends StatefulWidget {
  Demo({Key? key}) : super(key: key);

  [@override](/user/override)
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  List<String> _labels = ['Alpha', 'Red', 'Green', 'Blue'];
  List<ValueNotifier<int>> _argb = [
    ValueNotifier(255), // Alpha
    ValueNotifier(255), // Red
    ValueNotifier(255), // Green
    ValueNotifier(255), // Blue
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multi-ValueListenableBuilder Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 50.0),
              child: MultiValueListenableBuilder(
                valueListenables: _argb,
                builder: (context, values, child) {
                  return Container(
                    decoration: ShapeDecoration(
                      shadows: [BoxShadow(blurRadius: 5)],
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0),
                      ),
                      color: Color.fromARGB(
                        values.elementAt(0), // Alpha
                        values.elementAt(1), // Red
                        values.elementAt(2), // Green
                        values.elementAt(3), // Blue
                      ),
                    ),
                    height: 200,
                    width: 200,
                  );
                },
              ),
            ),
            Column(
              children: [0, 1, 2, 3]
                  .map(
                    (index) => Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Text(
                          _labels.elementAt(index),
                          style: TextStyle(fontSize: 20.0),
                        ),
                        ValueListenableBuilder<int>(
                          valueListenable: _argb.elementAt(index),
                          builder: (BuildContext context, int value, Widget? child) {
                            return Slider(
                              value: value.toDouble(),
                              max: 255,
                              min: 0,
                              onChanged: (newValue) {
                                _argb[index].value = newValue.toInt();
                              },
                            );
                          },
                        )
                      ],
                    ),
                  )
                  .toList(),
            ),
          ],
        ),
      ),
    );
  }
}