eyflutter_uikit 使用指南 #

eyflutter_uikit 是一个用于快速构建 Flutter 应用界面的组件库。它提供了丰富的 UI 组件，帮助开发者更快地开发应用。

开始使用 #

eyflutter_uikit 是一个插件包，支持 Android 和 iOS 平台。要开始使用它，首先需要将其添加到项目的依赖中。

步骤 1: 添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  eyflutter_uikit: ^版本号

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

步骤 2: 初始化应用

接下来，我们可以通过一个简单的示例来展示如何使用 eyflutter_uikit。

示例代码

以下是一个完整的示例代码，展示了如何初始化应用并使用 eyflutter_uikit 提供的基础组件。

// 引入必要的库
import 'dart:io';

import 'package:eyflutter_uikit_example/home.dart'; // 假设这是组件库的示例页面
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:oktoast/oktoast.dart'; // 提供弹框提示功能

void main() {
  // 使用 OKToast 包进行全局弹框提示
  runApp(const OKToast(
    child: MyApp(), // 启动 MyApp
  ));

  // 如果是 Android 平台，设置状态栏样式
  if (Platform.isAndroid) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent, // 设置透明状态栏
      statusBarIconBrightness: Brightness.dark, // 设置状态栏图标颜色为深色
      statusBarBrightness: Brightness.light, // 设置状态栏亮度为亮色
    ));
  }
}

// 定义主应用类
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState(); // 创建状态管理类
}

// 状态管理类
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    // 返回 Material App，并指定主页为 Home 页面
    return const MaterialApp(
      home: Home(), // 这里假定 Home 是 eyflutter_uikit 的示例页面
    );
  }
}

示例效果

运行上述代码后，你将看到一个带有透明状态栏的应用界面，状态栏图标为深色，亮度为亮色。同时，Home 页面会展示 eyflutter_uikit 提供的各种 UI 组件。

示例截图

组件示例 #

以下是 eyflutter_uikit 中一些常用组件的使用示例：

示例 1: 按钮组件

EYButton(
  text: "点击我",
  onPressed: () {
    showToast("按钮被点击了！");
  },
)

示例 2: 输入框组件

EYTextField(
  hintText: "请输入内容",
  onChanged: (value) {
    print("输入的内容: $value");
  },
)

示例 3: 卡片组件

EYCard(
  child: Text("这是一个卡片组件"),
  padding: EdgeInsets.all(16),
)

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

gougou168 1楼•3 天前

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

eyflutter_uikit 是一个 Flutter UI 组件库插件，它提供了一系列预定义的 UI 组件，帮助开发者快速构建美观且功能丰富的应用程序。以下是如何使用 eyflutter_uikit 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 eyflutter_uikit 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  eyflutter_uikit: ^版本号  # 请替换为最新版本号

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

2. 导入库

在你的 Dart 文件中导入 eyflutter_uikit 库。

import 'package:eyflutter_uikit/eyflutter_uikit.dart';

3. 使用组件

eyflutter_uikit 提供了多种 UI 组件，你可以直接在代码中使用它们。以下是一些常见组件的使用示例：

按钮组件

EyButton(
  text: 'Click Me',
  onPressed: () {
    print('Button Pressed');
  },
);

文本输入框

EyTextField(
  hintText: 'Enter your name',
  onChanged: (value) {
    print('Text changed: $value');
  },
);

卡片组件

EyCard(
  child: Column(
    children: [
      Text('Card Title'),
      Text('This is a card content.'),
    ],
  ),
);

对话框

EyDialog(
  title: 'Alert',
  content: 'This is an alert dialog.',
  actions: [
    EyButton(
      text: 'OK',
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
  ],
);

4. 自定义主题

eyflutter_uikit 允许你自定义主题以适应你的应用风格。你可以通过 EyTheme 来设置全局主题。

MaterialApp(
  theme: EyTheme.light(),  // 使用默认的亮色主题
  home: MyHomePage(),
);

你也可以自定义主题颜色：

MaterialApp(
  theme: EyTheme(
    primaryColor: Colors.blue,
    accentColor: Colors.green,
  ),
  home: MyHomePage(),
);

5. 其他组件

eyflutter_uikit 还提供了其他组件，如 EyAppBar、EyBottomNavigationBar、EyListTile 等。你可以根据需要在项目中使用这些组件。

6. 示例代码

以下是一个简单的示例，展示了如何使用 eyflutter_uikit 中的一些组件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: EyTheme.light(),
      home: Scaffold(
        appBar: EyAppBar(
          title: Text('EyFlutter UI Kit'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              EyButton(
                text: 'Click Me',
                onPressed: () {
                  print('Button Pressed');
                },
              ),
              SizedBox(height: 20),
              EyTextField(
                hintText: 'Enter your name',
                onChanged: (value) {
                  print('Text changed: $value');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}