Flutter UI组件插件eva_ui的使用

eva_ui 是一个基于 Flutter 的 UI 组件库，它提供了一系列预定义的、美观的 UI 组件，帮助开发者快速构建应用程序界面。eva_ui 的设计风格类似于 Eva Design System，这是一个流行的设计系统，提供了现代化的、简洁的 UI 元素。

安装 eva_ui

首先，你需要在 pubspec.yaml 文件中添加 eva_ui 依赖：

dependencies:
  flutter:
    sdk: flutter
  eva_ui: ^1.0.0  # 请使用最新版本

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

使用 eva_ui 组件

eva_ui 提供了多种 UI 组件，如按钮、卡片、输入框、对话框等。以下是一些常用组件的使用示例。

1. 按钮 (EvaButton)

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

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

2. 卡片 (EvaCard)

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Eva UI Example'),
      ),
      body: Center(
        child: EvaCard(
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: Text('This is a card'),
          ),
        ),
      ),
    );
  }
}

3. 输入框 (EvaInput)

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Eva UI Example'),
      ),
      body: Center(
        child: EvaInput(
          hintText: 'Enter your name',
          onChanged: (value) {
            print('Input changed: $value');
          },
        ),
      ),
    );
  }
}

4. 对话框 (EvaDialog)

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Eva UI Example'),
      ),
      body: Center(
        child: EvaButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) => EvaDialog(
                title: Text('Dialog Title'),
                content: Text('This is a dialog content.'),
                actions: [
                  EvaButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text('Close'),
                  ),
                ],
              ),
            );
          },
          child: Text('Show Dialog'),
        ),
      ),
    );
  }
}

自定义主题

eva_ui 允许你自定义主题以匹配你的应用设计。你可以通过 EvaTheme 来设置全局主题。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Eva UI Example',
      theme: EvaTheme.light(),  // 使用默认的浅色主题
      home: MyHomePage(),
    );
  }
}

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

ThemeData customTheme = EvaTheme.light().copyWith(
  primaryColor: Colors.blue,
  accentColor: Colors.orange,
);

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Eva UI Example',
      theme: customTheme,
      home: MyHomePage(),
    );
  }
}