Flutter UI组件库插件flutter_vant的使用

flutter_vant 是一个基于 Flutter 的 UI 组件库，灵感来源于 Vant（一个轻量级的移动端 Vue 组件库）。它提供了丰富的组件，帮助开发者快速构建美观且功能完善的移动应用界面。

安装 flutter_vant

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

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

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

使用 flutter_vant 组件

flutter_vant 提供了多种常用的 UI 组件，如按钮、表单、对话框、标签栏等。以下是一些常见组件的使用示例。

1. 按钮 (Button)

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

class ButtonExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Button Example")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            VanButton(
              text: "Primary Button",
              type: ButtonType.primary,
              onPressed: () {
                print("Primary Button Pressed");
              },
            ),
            SizedBox(height: 20),
            VanButton(
              text: "Danger Button",
              type: ButtonType.danger,
              onPressed: () {
                print("Danger Button Pressed");
              },
            ),
          ],
        ),
      ),
    );
  }
}

2. 表单 (Form)

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

class FormExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Form Example")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: VanForm(
          child: Column(
            children: [
              VanField(
                label: "Username",
                placeholder: "Enter your username",
              ),
              VanField(
                label: "Password",
                placeholder: "Enter your password",
                obscureText: true,
              ),
              SizedBox(height: 20),
              VanButton(
                text: "Submit",
                type: ButtonType.primary,
                onPressed: () {
                  print("Form Submitted");
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 对话框 (Dialog)

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

class DialogExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Dialog Example")),
      body: Center(
        child: VanButton(
          text: "Show Dialog",
          type: ButtonType.primary,
          onPressed: () {
            VanDialog.show(
              context,
              title: "提示",
              message: "这是一个对话框示例",
              showCancelButton: true,
              onConfirm: () {
                print("Confirmed");
              },
              onCancel: () {
                print("Cancelled");
              },
            );
          },
        ),
      ),
    );
  }
}

4. 标签栏 (TabBar)

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

class TabBarExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("TabBar Example")),
      body: VanTabBar(
        items: [
          VanTabBarItem(text: "Tab 1"),
          VanTabBarItem(text: "Tab 2"),
          VanTabBarItem(text: "Tab 3"),
        ],
        onTap: (index) {
          print("Tab $index tapped");
        },
      ),
    );
  }
}

自定义主题

flutter_vant 允许你自定义主题颜色，以适应你的应用设计风格。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Vant Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Home Page")),
      body: Center(
        child: VanButton(
          text: "Custom Theme Button",
          type: ButtonType.primary,
          onPressed: () {
            print("Custom Theme Button Pressed");
          },
        ),
      ),
    );
  }
}