Flutter组合选择插件vit_combo_box的使用

Flutter组合选择插件vit_combo_box的使用

本项目专注于提供三个小部件：

• VitComboBox: 通用的组合框实现。
• FutureComboBox: 接受一个future作为数据源。在future未完成时，会显示一个指示器。
• CheckedComboBox: 在其覆盖层中包含复选框的组合框。

每个实现都专注于提供最大的可定制性，这意味着该小部件可以按你想要的方式呈现，以适应你的设计语言。

使用方法

// 普通组合框
VitComboBox.itemBuilder(
    label: '我的组合框',
    options: optionsSet,
    selection: selectedOption,
    itemBuilder: itemBuilder,
    onSelected: (key) {
        setState(() {
            selectedOption = key;
        });
        return null;
    },
),

限制和已知问题

• 覆盖层始终显示在小部件下方。这意味着如果组合框靠近屏幕边缘，则覆盖层可能会部分超出屏幕。

完整示例

以下是一个完整的示例，展示了如何在Flutter应用中使用vit_combo_box插件。

import 'package:flutter/material.dart';
import 'package:vit_combo_box/theme/style/combo_box_style.dart';
import 'package:vit_combo_box/theme/style/vit_combo_box_style.dart';
import 'package:vit_combo_box/vit_combo_box.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Vit 组合框'),
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  DateTime? selectedDate;
  Set<DateTime> selectedDates = {};

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    var set = List.generate(20, (index) {
      return DateTime(2000 + index);
    }).toSet();

    itemBuilder(DateTime item) => Text('年份 ${item.year}');

    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          // 普通组合框
          VitComboBox.itemBuilder(
            options: set,
            selection: selectedDate,
            itemBuilder: itemBuilder,
            onSelected: (key) {
              setState(() {
                selectedDate = key;
              });
              return null;
            },
            label: '日期',
          ),

          const SizedBox(height: 20),

          // 禁用的组合框
          VitComboBox.itemBuilder(
            options: set,
            selection: selectedDate,
            itemBuilder: itemBuilder,
            onSelected: (key) {
              setState(() {
                selectedDate = key;
              });
              return null;
            },
            enabled: false,
            label: '禁用',
          ),

          const SizedBox(height: 20),

          // 带有主题装饰的组合框
          VitComboBoxTheme(
            data: VitComboBoxStyle(
              comboBox: ComboBoxStyle(
                decoration: BoxDecoration(
                  color: Colors.purple.shade100,
                ),
              ),
            ),
            child: VitComboBox.itemBuilder(
              options: const {true, false},
              label: '带有主题装饰',
              itemBuilder: (item) {
                return Text(item.toString());
              },
              onSelected: (key) {
                return null;
              },
            ),
          ),

          const SizedBox(height: 20),

          // 带复选框的组合框
          CheckedComboBox<DateTime>(
            options: set,
            itemBuilder: (item) {
              return Text('年份 ${item.year}');
            },
            selectedItems: selectedDates,
            onSelected: (item, selected) {
              if (selected) {
                selectedDates.add(item);
              } else {
                selectedDates.remove(item);
              }
            },
            onClose: () {
              setState(() {});
            },
            label: '带复选框的组合框',
          ),

          const SizedBox(height: 20),

          // 需要加载数据的组合框
          FutureComboBox.eternal(
            label: '需要加载一些数据的组合框 [ 它永远不会得到它们 😔 ]',
          ),
        ],
      ),
    );
  }
}