Flutter UI组件库插件enx_uikit_flutter的使用

当然，下面是一个关于如何使用Flutter UI组件库插件enx_uikit_flutter的代码案例。假设你已经将enx_uikit_flutter添加到你的Flutter项目中（在pubspec.yaml文件中添加依赖并运行flutter pub get）。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加enx_uikit_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  enx_uikit_flutter: ^最新版本号  # 请替换为实际版本号

2. 导入库

在你的Dart文件中导入enx_uikit_flutter库：

import 'package:enx_uikit_flutter/enx_uikit_flutter.dart';

3. 使用组件

下面是一个简单的例子，展示了如何使用enx_uikit_flutter中的一些UI组件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'enx_uikit_flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('enx_uikit_flutter Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 使用ENXButton
            ENXButton(
              title: 'Primary Button',
              type: ENXButtonType.primary,
              onPressed: () {
                print('Primary Button Pressed');
              },
            ),
            SizedBox(height: 16),

            // 使用ENXTextField
            ENXTextField(
              label: 'Email',
              prefixIcon: Icons.email,
              suffixIcon: Icons.visibility,
              onSuffixTap: () {
                print('Suffix Icon Tapped');
              },
            ),
            SizedBox(height: 16),

            // 使用ENXCheckbox
            Row(
              children: [
                ENXCheckbox(
                  value: true,
                  onChanged: (newValue) {
                    print('Checkbox Value: $newValue');
                  },
                ),
                Text('Accept Terms and Conditions'),
              ],
            ),
            SizedBox(height: 16),

            // 使用ENXRadioGroup
            ENXRadioGroup(
              value: 1,
              onChanged: (newValue) {
                print('Radio Group Value: $newValue');
              },
              options: [
                {
                  'value': 0,
                  'label': 'Option 1',
                },
                {
                  'value': 1,
                  'label': 'Option 2',
                },
                {
                  'value': 2,
                  'label': 'Option 3',
                },
              ],
            ),
            SizedBox(height: 16),

            // 使用ENXSwitch
            ENXSwitch(
              value: true,
              onChanged: (newValue) {
                print('Switch Value: $newValue');
              },
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行项目

确保你的开发环境配置正确，然后运行你的Flutter项目：

flutter run

解释

• ENXButton：一个按钮组件，有多种类型（如primary）。
• ENXTextField：一个文本输入组件，支持前缀和后缀图标。
• ENXCheckbox：一个复选框组件。
• ENXRadioGroup：一个单选按钮组组件。
• ENXSwitch：一个开关组件。

这个示例展示了如何使用enx_uikit_flutter中的一些常用组件。你可以根据项目的需求进一步自定义和扩展这些组件。