Flutter插件dxwidget的介绍与使用

Flutter插件dxwidget的介绍与使用

介绍

本项目并非自行开发的项目，不进行维护，也不提供错误修复。相反，它是将几个PUB项目的优秀组件拼凑在一起，并修改了样式供个人学习使用。因此，在生产环境中请勿使用此项目！

基础组件

• ❌ Button 按钮
• ❌ Cell 单元格
• ❌ Icon 图标
• ❌ Image 图片
• ✅ Layout 布局
• ❌ Popup 弹出层
• ✅ Toast 轻提示

表单组件

• ✅ Calendar 日历
• ✅ Cascader 级联选择
• ❌ Checkbox 复选框
• ✅ DatetimePicker 时间选择
• ✅ Field 输入框
• ❌ Form 表单
• ❌ NumberKeyboard 数字键盘
• ❌ PasswordInput 密码输入框
• ✅ Picker 选择器
• ✅ Radio 单选框
• ✅ Rate 评分
• ✅ Search 搜索
• ✅ Slider 滑块
• ❌ Stepper 步进器
• ✅ Switch 开关
• ❌ Uploader 文件上传

反馈组件

• ✅ ActionSheet 动作面板
• ❌ Dialog 弹出框
• ❌ DropdownMenu 下拉菜单
• ✅ Loading 加载
• ✅ Notify 消息通知
• ✅ Overlay 遮罩层
• ❌ PullRefresh 下拉刷新
• ✅ ShareSheet 分享面板
• ✅ SwipeCell 滑动单元格

展示组件

• ❌ Badge 徽标
• ❌ Circle 环形进度条
• ✅ Collapse 折叠面板
• ✅ CountDown 倒计时
• ✅ Divider 分割线
• ✅ Empty 空状态
• ✅ ImagePreview 图片预览
• ❌ Lazyload 懒加载
• ✅ List 列表
• ✅ NoticeBar 通知栏
• ❌ Popover 气泡弹出框
• ✅ Progress 进度条
• ✅ Skeleton 骨架屏
• ✅ Steps 步骤条
• ❌ Sticky 粘性布局
• ✅ Swipe 轮播
• ✅ Tag 标签

导航组件

• ✅ ActionBar 动作栏
• ✅ Grid 宫格
• ❌ IndexBar 索引栏
• ✅ NavBar 导航栏
• ✅ Pagination 分页
• ✅ Sidebar 侧边导航
• ❌ Tab 标签页
• ✅ Tabbar 标签栏
• ✅ TreeSelect 分类选择

业务组件

• ❌ AddressEdit 地址编辑
• ✅ AddressList 地址列表
• ✅ Area 省市区选择
• ✅ Card 商品卡片
• ✅ ContactCard 联系人卡片
• ✅ ContactEdit 联系人编辑
• ✅ ContactList 联系人列表
• ❌ Coupon 优惠券
• ✅ SubmitBar 提交订单栏

示例代码

以下是一个简单的示例代码，演示如何使用dxwidget插件中的部分组件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('DxWidget 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用 Layout 布局组件
              DxLayout(
                padding: EdgeInsets.all(16),
                children: [
                  Text('这是布局中的文本'),
                ],
              ),
              
              // 使用 Toast 轻提示组件
              ElevatedButton(
                onPressed: () {
                  DxToast.showToast(context: context, msg: "这是一个轻提示");
                },
                child: Text('显示轻提示'),
              ),
              
              // 使用 Calendar 日历组件
              ElevatedButton(
                onPressed: () {
                  showCalendarPicker(context);
                },
                child: Text('显示日历'),
              ),
              
              // 使用 Picker 选择器组件
              ElevatedButton(
                onPressed: () {
                  showPicker(context);
                },
                child: Text('显示选择器'),
              ),
            ],
          ),
        ),
      ),
    );
  }
  
  void showCalendarPicker(BuildContext context) {
    DxCalendar.showDatePicker(
      context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
      onConfirm: (date) {
        print(date);
      },
    );
  }

  void showPicker(BuildContext context) {
    DxPicker.showSinglePicker(
      context,
      pickerData: ["选项1", "选项2", "选项3"],
      onConfirm: (picker, value) {
        print(picker.getSelectedValues());
      },
    );
  }
}