Flutter UI组件库插件vants_ui的使用

vants_ui

仿vant ui组件

Introduction

vants_ui 是一个基于 Flutter 的 UI 组件库，灵感来源于 Vant UI。它提供了丰富的 UI 组件，方便开发者快速构建美观且功能强大的应用。

How to use

在 pubspec.yaml 文件中添加依赖：

dependencies:
  vants_ui: ^0.0.2

然后运行以下命令以更新依赖项：

flutter pub get

How to run demo

1. 进入示例项目目录：

   cd example/

2. 启动示例应用：

   flutter run

API

目前 vants_ui 提供了以下组件（具体功能详见官方文档）：

• Buttons
• Dialogs
• Forms
• Loading
• Icons
• Tabs
• 等等…

Demo Screenshot

以下是 vants_ui 的按钮组件示例：

完整示例代码

以下是一个完整的示例代码，展示了如何使用 vants_ui 的按钮组件。

example/lib/main.dart

// 导入必要的包
import 'package:flutter/material.dart';
import 'package:vants_ui/vants_ui.dart'; // 引入 vants_ui 包
import 'package:get/get.dart'; // 使用 GetX 路由管理

// 定义路由页面
void main() {
  runApp(
    GetMaterialApp( // 使用 GetMaterialApp 进行路由管理
      title: "Application",
      initialRoute: "/home", // 初始路由
      getPages: [ // 配置路由页面
        GetPage(name: "/home", page: () => HomePage()),
      ],
    ),
  );
}

// 主页面
class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Vants_UI 示例"), // 设置标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用 VantsUI 的 Button 组件
            VButton(
              text: "普通按钮", // 按钮文字
              onPressed: () {
                print("普通按钮被点击"); // 点击事件
              },
            ),
            SizedBox(height: 20), // 添加间距
            VButton(
              text: "加载中按钮",
              loading: true, // 显示加载状态
              onPressed: () async {
                await Future.delayed(Duration(seconds: 2)); // 模拟异步操作
                print("加载完成");
              },
            ),
          ],
        ),
      ),
    );
  }
}