Flutter组合功能插件combos的使用

关于

Combos 是一个为 Flutter 提供组合小部件的库。它包含多种组合小部件，可用于构建复杂的用户界面。

alt text

包含的功能：

  • Combo - 自定义子部件和弹出内容的简单组合小部件。
  • AwaitCombo - 带有延迟弹出内容生成器的组合小部件，用于加载数据并显示进度指示。
  • ListCombo - 显示项目列表的组合小部件。
  • SelectorCombo - 带有选定值的项目列表显示组合小部件。
  • TypeaheadCombo - 带有文本输入和自定义“搜索”方法的类型提示小部件。
  • MenuItemCombo - 用于显示弹出菜单的菜单项小部件。

示例

Combo 示例

Combo(
  child: const Padding(
    padding: EdgeInsets.all(16),
    child: Text('Combo child'),
  ),
  popupBuilder: (context, mirrored) => const Material(
    elevation: 4,
    child: Padding(
      padding: EdgeInsets.symmetric(vertical: 48, horizontal: 16),
      child: Center(child: Text('Combo popup')),
    ),
  ),
)

AwaitCombo 示例

AwaitCombo(
  child: const Padding(
    padding: EdgeInsets.all(16),
    child: Text('Combo child'),
  ),
  popupBuilder: (context) async {
    await Future.delayed(const Duration(milliseconds: 500));
    return const Material(
      elevation: 4,
      child: Padding(
        padding: EdgeInsets.symmetric(vertical: 48, horizontal: 16),
        child: Center(child: Text('Combo popup')),
      ),
    );
  },
)

ListCombo 示例

ListCombo<String>(
  child: const Padding(
    padding: EdgeInsets.all(16),
    child: Text('Combo child'),
  ),
  getList: () async {
    await Future.delayed(const Duration(milliseconds: 500));
    return ['Item1', 'Item2', 'Item3'];
  },
  itemBuilder: (context, parameters, item) => ListTile(title: Text(item)),
  onItemTapped: (item) {},
)

SelectorCombo 示例

String _item;

...

SizedBox(
  width: 200,
  child: SelectorCombo<String>(
    selected: _item,
    getList: () async {
      await Future.delayed(const Duration(milliseconds: 500));
      return ['Item1', 'Item2', 'Item3'];
    },
    itemBuilder: (context, parameters, item) =>
        ListTile(title: Text(item ?? '<Empty>')),
    onItemTapped: (item) => setState(() => _item = item),
  ),
)

TypeaheadCombo 示例

String _item;

...

SizedBox(
  width: 200,
  child: TypeaheadCombo<String>(
    selected: _item,
    getList: (text) async {
      await Future.delayed(const Duration(milliseconds: 500));
      return ['Item1', 'Item2', 'Item3'];
    },
    itemBuilder: (context, parameters, item) =>
        ListTile(title: Text(item ?? '<Empty>')),
    onItemTapped: (item) => setState(() => _item = item),
    getItemText: (item) => item,
    decoration: const InputDecoration(labelText: 'Typeahead'),
  ),
)

MenuItemCombo 示例

MenuItemCombo<String>(
  item: MenuItem(
      'File',
      () => [
            MenuItem('New'),
            MenuItem.separator,
            MenuItem('Open'),
            MenuItem('Save'),
            MenuItem('Save As...'),
            MenuItem.separator,
            MenuItem(
                'Recent',
                () => [
                      MenuItem('Folders', () async {
                        await Future.delayed(Duration(milliseconds: 500));
                        return [
                          MenuItem('Folder 1'),
                          MenuItem('Folder 2'),
                          MenuItem('Folder 3'),
                        ];
                      }),
                      MenuItem('Files', () async {
                        await Future.delayed(Duration(milliseconds: 500));
                        return [
                          MenuItem('File 1'),
                          MenuItem('File 2'),
                          MenuItem('File 3'),
                        ];
                      }),
                    ]),
            MenuItem.separator,
            MenuItem('Exit'),
          ]),
  itemBuilder: (context, parameters, item) => Padding(
    padding: const EdgeInsets.all(16),
    child: Text(item.item),
  ),
  onItemTapped: (value) {
    final dialog =
        AlertDialog(content: Text('${value.item} tapped!'));
    showDialog(context: context, builder: (_) => dialog);
  },
)

更多关于Flutter组合功能插件combos的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


combos 是一个用于 Flutter 的组合功能插件，它可以帮助你更轻松地管理多个异步操作、状态或事件的组合。通过 combos，你可以将多个 Future、Stream 或其他可观察对象组合在一起，并在它们完成或发生变化时执行相应的操作。

安装 combos

首先，你需要在 pubspec.yaml 文件中添加 combos 依赖：

dependencies:
  flutter:
    sdk: flutter
  combos: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

使用 combos

combos 提供了多种组合功能，以下是一些常见的使用场景：

1. 组合多个 Future

你可以使用 combos 来组合多个 Future，并在它们全部完成时执行某些操作。

import 'package:combos/combos.dart';

void main() async {
  Future<String> future1 = Future.delayed(Duration(seconds: 1), () => "Hello");
  Future<String> future2 = Future.delayed(Duration(seconds: 2), () => "World");

  var result = await Combos.wait([future1, future2]);

  print(result); // 输出: [Hello, World]
}

2. 组合多个 Stream

combos 也可以用于组合多个 Stream，并在它们发出新值时执行某些操作。

import 'package:combos/combos.dart';

void main() {
  Stream<int> stream1 = Stream.periodic(Duration(seconds: 1), (i) => i);
  Stream<int> stream2 = Stream.periodic(Duration(seconds: 2), (i) => i * 10);

  var combinedStream = Combos.combineLatest([stream1, stream2]);

  combinedStream.listen((data) {
    print(data); // 输出: [0, 0], [1, 0], [1, 10], [2, 10], ...
  });
}

3. 组合多个 ValueNotifier

combos 还可以用于组合多个 ValueNotifier，并在它们的值发生变化时执行某些操作。

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

void main() {
  ValueNotifier<int> notifier1 = ValueNotifier(0);
  ValueNotifier<int> notifier2 = ValueNotifier(0);

  var combinedNotifier = Combos.combine([notifier1, notifier2]);

  combinedNotifier.addListener(() {
    print(combinedNotifier.value); // 输出: [0, 0], [1, 0], [1, 1], ...
  });

  notifier1.value = 1;
  notifier2.value = 1;
}
回到顶部