z_ui 是一个基于 Flutter 的 UI 组件库，旨在提供一系列常用且易于使用的 UI 组件，帮助开发者快速构建美观且功能丰富的 Flutter 应用。以下是关于如何使用 z_ui 的详细介绍。

1. 安装 z_ui

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

dependencies:
  flutter:
    sdk: flutter
  z_ui: ^1.0.0  # 请根据实际情况使用最新版本

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

2. 导入 z_ui

在你的 Dart 文件中导入 z_ui：

import 'package:z_ui/z_ui.dart';

3. 使用 z_ui 组件

z_ui 提供了多种常用的 UI 组件，以下是一些常见组件的使用示例。

3.1 按钮 (ZButton)

ZButton(
  text: 'Click Me',
  onPressed: () {
    print('Button Clicked!');
  },
);

ZButton 提供了多种样式，例如 ZButtonType.primary、ZButtonType.secondary 等。

3.2 输入框 (ZTextField)

ZTextField(
  hintText: 'Enter your name',
  onChanged: (value) {
    print('Input: $value');
  },
);

ZTextField 支持多种输入类型，如文本、密码、邮箱等。

3.3 对话框 (ZDialog)

ZDialog.show(
  context: context,
  title: '提示',
  content: '这是一个对话框示例',
  confirmText: '确定',
  onConfirm: () {
    print('Dialog Confirmed');
  },
);

ZDialog 提供了多种对话框类型，如确认对话框、警告对话框等。

3.4 加载指示器 (ZLoading)

ZLoading.show(
  context: context,
  message: '加载中...',
);

// 隐藏加载指示器
ZLoading.hide();

ZLoading 用于显示加载中的指示器，通常用于网络请求等异步操作。

3.5 列表项 (ZListItem)

ZListItem(
  title: 'Item Title',
  subtitle: 'Item Subtitle',
  trailing: Icon(Icons.arrow_forward),
  onTap: () {
    print('Item Tapped');
  },
);

ZListItem 用于在列表中显示项目，支持标题、副标题、图标等。

4. 自定义主题

z_ui 支持自定义主题，你可以通过 ZTheme 来设置全局的样式。

ZTheme(
  primaryColor: Colors.blue,
  accentColor: Colors.orange,
  child: MyApp(),
);

5. 其他组件

z_ui 还提供了许多其他组件，如 ZCard、ZAvatar、ZSwitch 等，你可以根据需求选择合适的组件。

6. 示例代码

以下是一个简单的示例，展示了如何使用 z_ui 组件构建一个简单的界面：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Z_UI Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ZButton(
                text: 'Click Me',
                onPressed: () {
                  ZDialog.show(
                    context: context,
                    title: '提示',
                    content: '你点击了按钮！',
                    confirmText: '确定',
                  );
                },
              ),
              SizedBox(height: 20),
              ZTextField(
                hintText: 'Enter your name',
                onChanged: (value) {
                  print('Input: $value');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}