Flutter核心UI组件插件inqvine_core_ui的使用

inqvine_core_ui 是一个用于 Flutter 的核心 UI 组件插件，旨在简化 Flutter 应用程序的开发过程。它提供了一系列预构建的 UI 组件和工具，帮助开发者快速构建一致且高质量的应用程序界面。以下是如何使用 inqvine_core_ui 插件的基本指南。

1. 安装插件

首先，你需要在 pubspec.yaml 文件中添加 inqvine_core_ui 插件的依赖项：

dependencies:
  flutter:
    sdk: flutter
  inqvine_core_ui: ^1.0.0  # 请确保使用最新版本

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

2. 导入插件

在你的 Dart 文件中导入 inqvine_core_ui：

import 'package:inqvine_core_ui/inqvine_core_ui.dart';

3. 使用核心 UI 组件

inqvine_core_ui 提供了多种核心 UI 组件，你可以直接在应用程序中使用这些组件。以下是一些常见的组件及其用法示例：

3.1 按钮组件

InqvineButton(
  onPressed: () {
    // 处理按钮点击事件
  },
  text: '点击我',
  color: Colors.blue,
  textColor: Colors.white,
);

3.2 文本框组件

InqvineTextField(
  hintText: '请输入内容',
  onChanged: (value) {
    // 处理文本变化
  },
);

3.3 加载指示器

InqvineLoadingIndicator(
  color: Colors.blue,
  size: 40.0,
);

3.4 对话框

InqvineDialog(
  title: '提示',
  content: '这是一个示例对话框。',
  actions: [
    InqvineButton(
      onPressed: () {
        // 关闭对话框
        Navigator.of(context).pop();
      },
      text: '关闭',
    ),
  ],
);

4. 自定义主题

inqvine_core_ui 允许你自定义应用程序的主题，以确保 UI 组件与应用程序的整体风格一致。你可以通过 InqvineTheme 类来定义和应用主题。

InqvineTheme(
  primaryColor: Colors.blue,
  accentColor: Colors.orange,
  textTheme: TextTheme(
    headline1: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
    bodyText1: TextStyle(fontSize: 16.0, color: Colors.black),
  ),
  child: MaterialApp(
    title: 'Inqvine Core UI 示例',
    home: MyHomePage(),
  ),
);

5. 响应式布局

inqvine_core_ui 还提供了响应式布局的支持，帮助你在不同屏幕尺寸上优化布局。你可以使用 InqvineResponsiveBuilder 来创建响应式布局。

InqvineResponsiveBuilder(
  builder: (context, screenSize) {
    if (screenSize == ScreenSize.small) {
      return Container(
        color: Colors.red,
        child: Text('小屏幕'),
      );
    } else if (screenSize == ScreenSize.medium) {
      return Container(
        color: Colors.green,
        child: Text('中屏幕'),
      );
    } else {
      return Container(
        color: Colors.blue,
        child: Text('大屏幕'),
      );
    }
  },
);

6. 其他工具和组件

inqvine_core_ui 还包含许多其他有用的工具和组件，例如：

• InqvineSnackbar: 用于显示简短的提示消息。
• InqvineImage: 增强的图片组件，支持占位符和错误处理。
• InqvineForm: 用于简化表单处理。

7. 示例代码

以下是一个简单的 Flutter 应用程序示例，展示了如何使用 inqvine_core_ui：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return InqvineTheme(
      primaryColor: Colors.blue,
      accentColor: Colors.orange,
      child: MaterialApp(
        title: 'Inqvine Core UI 示例',
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Inqvine Core UI 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            InqvineButton(
              onPressed: () {
                InqvineSnackbar.show(context, message: '按钮被点击了！');
              },
              text: '点击我',
            ),
            SizedBox(height: 20),
            InqvineTextField(
              hintText: '请输入内容',
              onChanged: (value) {
                print('输入内容: $value');
              },
            ),
          ],
        ),
      ),
    );
  }
}