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

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

Junny Widget 是一个模块化的 Flutter 自定义控件库，旨在提升开发效率，提供高质量的 UI 组件和工具，支持多种交互场景。

目录结构

1. Dialog

封装各种对话框组件，支持平台适配和加载指示器：

  • dialog.dart：通用对话框组件。
  • loading_dialog.dart：加载对话框。
  • platform_alert_dialog.dart：适配不同平台的警告对话框。
  • platform_progress_indicator.dart：平台适配的进度指示器。

2. Address

地址选择和处理相关控件，适用于表单和选择场景：

  • address.dart：地址模型。
  • address_picker.dart：地址选择器。
  • address_provider.dart：地址数据提供器。

3. Behavior

行为和手势相关的工具类，提供手势优化和自定义滚动行为等功能：

  • behavior.dart：行为工具基类。
  • no_scroll_behavior.dart：禁用滚动效果的行为。
  • persistent_header_builder.dart：持久化标题构建器。
  • screen_adaptation.dart：屏幕适配工具。
  • transparent_page_route.dart：透明页面路由。
  • value_listenable_builder_2.dart：扩展的 ValueListenableBuilder，支持更复杂的状态监听。

4. Interaction

交互性组件，包括按钮、手势和动态效果：

  • expandable_widget.dart：可展开的控件。
  • ink_wrapper.dart：水波纹效果包装器。
  • interaction.dart：交互组件基类。
  • multi_click_gesture.dart：防止多次点击的手势控件。
  • primary_button.dart：主要按钮样式。
  • rotate_icon.dart：可旋转图标控件。
  • theme_button.dart：主题切换按钮。
  • wheel_picker.dart：滚轮选择器。

5. Time

时间和日期相关控件，支持多种时间视图和选择器：

  • date_time_notifier.dart：日期时间状态管理器。
  • date_time_picker.dart：日期时间选择器。
  • decade_view.dart：十年视图。
  • month_view.dart：月份视图。
  • quarter_view.dart：季度视图。
  • time_picker.dart：时间选择器。
  • time_picker_mode.dart：时间选择器模式枚举。

6. Toggleable

切换控件，包括复选框和单选按钮：

  • label_position.dart：标签位置定义。
  • labeled_checkbox.dart：带标签的复选框。
  • labeled_radio.dart：带标签的单选按钮。
  • toggleable.dart：可切换组件基类。

7. UI

与 UI 布局和绘制相关的组件：

  • arc_clipper.dart：弧形剪裁器。
  • common_empty_widget.dart：通用空状态控件。
  • error_widget.dart：错误状态控件。
  • junny_appbar.dart：自定义 AppBar。
  • lazy_indexed_stack.dart：延迟加载的 IndexedStack。
  • rounded_underline_tab_indicator.dart：圆角下划线选项卡指示器。
  • watermark_painter.dart：水印绘制器。

8. Configuration

全局配置文件：

  • config.dart：集中管理默认值和样式。

安装

将库添加到你的 pubspec.yaml 中：

dependencies:
  junny_widget: ^1.0.0

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

然后在代码中导入所需模块：

import 'package:junny_widget/junny_widget.dart';

示例代码

以下是一个简单的示例，展示如何使用 Junny Widget 中的 primary_button.dart 组件。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Junny Widget Demo'),
        ),
        body: Center(
          child: PrimaryButton(
            onPressed: () {
              print("Primary Button Clicked");
            },
            text: "点击我",
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


junny_widget 是一个自定义的 Flutter 组件插件，它可能包含了一些常用的 UI 组件或功能，可以帮助开发者更快速地构建应用。以下是如何在 Flutter 项目中使用 junny_widget 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 junny_widget 插件的依赖。假设 junny_widget 已经发布在 pub.dev 上，你可以通过以下方式添加依赖：

dependencies:
  flutter:
    sdk: flutter
  junny_widget: ^1.0.0  # 请根据实际版本号进行替换

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中，导入 junny_widget 插件：

import 'package:junny_widget/junny_widget.dart';

3. 使用组件

假设 junny_widget 插件中提供了一个名为 CustomButton 的组件，你可以像使用其他 Flutter 组件一样使用它：

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Junny Widget Example'),
      ),
      body: Center(
        child: CustomButton(
          onPressed: () {
            print('Button Pressed!');
          },
          text: 'Click Me',
        ),
      ),
    );
  }
}

4. 运行项目

保存你的代码并运行项目，你应该能够在应用中看到并使用 junny_widget 提供的自定义组件。

5. 查看更多组件和功能

如果 junny_widget 提供了多个组件或功能，你可以查看插件的文档或示例代码，了解如何更全面地使用它。通常，插件的文档会提供详细的 API 说明和示例。

6. 处理版本冲突

如果你在使用 junny_widget 时遇到版本冲突或其他问题，可以尝试更新插件的版本，或者在 pubspec.yaml 文件中指定一个兼容的版本。

7. 贡献和反馈

如果你在使用过程中发现 bug 或有改进建议，可以考虑向插件的 GitHub 仓库提交 issue 或 pull request，帮助改进插件。

示例代码

以下是一个完整的示例代码，展示了如何使用 junny_widget 中的 CustomButton 组件：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Junny Widget Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Junny Widget Example'),
      ),
      body: Center(
        child: CustomButton(
          onPressed: () {
            print('Button Pressed!');
          },
          text: 'Click Me',
        ),
      ),
    );
  }
}
回到顶部