Flutter自定义组件插件cdx_components的使用

Flutter 自定义组件插件 cdx_components 的使用

Cdx Components 是一个全面的库，提供了一系列有用的部件、扩展和工具，以增强您的 Flutter 开发体验。该库旨在简化常见的任务，并提供现成的组件以加速您的应用程序开发过程。

安装

要将 Cdx Components 添加到您的 Flutter 项目中，请在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  cdx_components: ^0.0.22

然后运行 flutter pub get 来获取包。

组件

AccentButton

一个带有加载器的可定制按钮。

扩展

ListExtension

一组用于列表的扩展。

工具

MediaUtils

一个提供图像缓存系统的实用类。

示例

详细的使用示例和代码片段请参阅 Cdx Components 存储库中的示例目录。

示例代码

以下是使用 Cdx Components 中的 FormBuilder 和 PrimaryButton 的示例代码：

import 'package:cdx_components/injector.dart';
import 'package:cdx_components/core/models/dropdown_item.dart';
import 'package:cdx_components/core/models/form_item.dart';
import 'package:cdx_components/core/services/app/iapp_service.dart';
import 'package:cdx_components/core/services/app/ievent_service.dart';
import 'package:cdx_components/core/services/app/itheme_service.dart';
import 'package:cdx_components/core/services/app/imedia_service.dart';
import 'package:cdx_components/widgets/custom_button.dart';
import 'package:cdx_components/widgets/form_builder.dart';
import 'package:example/services/app_theme_service.dart';
import 'package:example/services/app_service.dart';
import 'package:example/services/event_service.dart';
import 'package:example/services/media_service.dart';
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'package:rxdart/rxdart.dart';

void main() {
  GetIt.I.registerSingleton<IEventService>(EventService());
  GetIt.I.registerSingleton<IMediaService>(MediaService());
  GetIt.I.registerSingleton<IThemeService>(AppThemeService());
  GetIt.I.registerSingleton<IAppService>(AppService());

  runApp(const MyApp());
}

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

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Namer App',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
      ),
      home: const MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Namer App',
        theme: DI.theme().themeData,
        home: const Scaffold(body: SafeArea(child: MyHomePage())));
  }
}

class Obj {
  final String? title;
  final String? description;
  final String? author;
  final String? status;

  Obj({
    this.title,
    this.description,
    this.author,
    this.status,
  });
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FormBuilder? formBuilder;
  final BehaviorSubject<Map<String, FormItem>> clearSubject = BehaviorSubject.seeded({});
  final BehaviorSubject<Obj> subject = BehaviorSubject();
  final BehaviorSubject<bool> showErrorSubject = BehaviorSubject();

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

  void _buildForm() {
    subject.add(Obj());

    List<DropdownItem> nationOpts = [
      DropdownItem(title: 'Italia', value: 'IT'),
      DropdownItem(title: 'Messico', value: 'MX'),
      DropdownItem(title: 'Corea', value: 'KO'),
    ];

    formBuilder = FormBuilder(
        subject: BehaviorSubject(),
        formMap: clearSubject,
        hintStyle: const TextStyle(
            color: Colors.grey, fontWeight: FontWeight.w500, fontSize: 12
        ),
        showErrorsStream: showErrorSubject,
        errorMessage: 'Riempi il campo',
    );

    subject.stream.listen((value) {
      clearSubject.add({
        'title': FormItem(
            hint: 'loc.title',
            type: FormType.text,
            validation: (value) => value?.toString().isNotEmpty == true,
            value: value.title ?? '',
            inRow: true
        ),
        'description': FormItem(
          hint: 'loc.description',
          type: FormType.multiline,
          validation: (value) => value?.toString().isNotEmpty == true,
          value: value.description ?? '',
        ),
        'author': FormItem(
            hint: 'loc.author',
            type: FormType.text,
            validation: (value) => true,
            value: value.author ?? '',
            breakCol: true
        ),
        'status': FormItem(
          hint: 'loc.status',
          type: FormType.dropdown,
          validation: (value) => value != null,
          value: value.status?.isNotEmpty == true ? nationOpts.cast<DropdownItem?>().firstWhere((element) => element?.value == value.status, orElse: () => null) : null,
          options: nationOpts,
        ),
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        formBuilder ?? Container(),
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Row(children: [
            PrimaryButton(onPressed: () {
              showErrorSubject.add(true);
              //subject.add(Obj());
            }, text: '保存')
          ],),
        )
      ],
    );
  }
}