Flutter自定义组件集合插件v_components的使用

简介

v_components 是一个超级可定制且易于使用的 Flutter 组件库。它允许开发者轻松定制各种预设的组件样式。+系列版本 是精简版，特别适用于跨海项目。更多详细信息请参阅精简组件。

完整的组件列表（点击查看相关文档）主要包括以下几类：

表单类组件

交互类组件

展示类组件

图片类组件

使用示例

以下是一个完整的示例代码，展示如何在 Flutter 应用中使用 v_components 插件。

示例代码

import 'package:example/demos/alert/showVAlert.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:v_components/themes/VThemeProvider.dart';
import 'package:v_components/v_components.dart';
import 'package:v_components/widgets/cell/cell_widget.dart';
import 'package:v_base_framework/http/http.dart';
import 'demos/button.dart';
import 'demos/cell.dart';
import 'demos/dropdownmenu_demo/dropdown_level_1.dart';
import 'demos/empty/emptys.dart';
import 'demos/fieldDemos/field_demo_levle1.dart';
import 'demos/picker_demo/picker_demo.dart';
import 'demos/radio_demo/radiogroup_demo.dart';
import 'demos/refresh_demo/refresh_demo.dart';
import 'demos/search_demo.dart';
import 'demos/stepper_demo.dart';
import 'demos/tree_demo/tree_demo_1.dart';
import 'demos/v_nine_grid/v_9_upload_index.dart';
import 'demos/v_popu/vpopu_demo.dart';
import 'demos/tabbar_demo/appbar_demo.dart';

import 'package:v_base_framework/widget/appbar_helper.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return VThemeProvider(
      appThemeData: ThemeData(
        appBarTheme: const AppBarTheme(
          surfaceTintColor: Colors.transparent, // 设置AppBar的表面颜色为透明
        ),
      ),
      child: ToastUtils.init(GetMaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      )),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    Http().init(HttpDioConfig(
      successCode: 1,
      tokenInvalidCode: 401,
      errorMessage: "请求失败,请稍后再试!",
      connectTimeout: 10 * 60 * 1000,
      isNeedProxy: false,
      proxyHost: "172.16.56.219:8615",
    ));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CommonAppbarUtil.getAppBar(context,
        appBarBackgroundColor: "#0058bf",
        title: "组件库3.x",
        leadingWidget: Padding(
          padding: const EdgeInsets.all(5),
          child: ClipRRect(
            borderRadius: const BorderRadius.all(Radius.circular(10)),
            child: Image.asset(
              "assets/img/demo_logo.jpg",
              width: 50,
              height: 50,
            ),
          ),
        ),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: [
              Text('$_counter'),
              const VCell(
                title: '字体图标',
                leftWidget: Text("\ue70a", style: TextStyle(fontFamily: 'e6_iconfont', color: Colors.redAccent)),
                rightWidget: Icon(IconData(0xe610, fontFamily: 'e6_iconfont'), color: Colors.grey),
                hiddenArrow: true,
              ),
              VCell(
                title: 'button',
                clickCallBack: () {
                  Get.to(ButtonDemo());
                },
              ),
              VCell(
                title: 'cell',
                clickCallBack: () {
                  Get.to(CellDemo());
                },
              ),
              VCell(
                title: 'field',
                clickCallBack: () {
                  Get.to(FieldDemoLevel1());
                },
              ),
              VCell(
                title: 'tabbar',
                clickCallBack: () {
                  Get.to(AppbarDemo());
                },
              ),
              VCell(
                title: 'empty',
                clickCallBack: () {
                  Get.to(EmptyDemos());
                },
              ),
              VCell(
                title: '搜索框',
                clickCallBack: () {
                  Get.to(SearchDemo());
                },
              ),
              VCell(
                title: 'dropdownmenu',
                clickCallBack: () {
                  Get.to(DropDownLevel1());
                },
              ),
              VCell(
                title: 'picker',
                clickCallBack: () {
                  Get.to(PickerDemo());
                },
              ),
              VCell(
                title: 'stepper',
                clickCallBack: () {
                  Get.to(StepperDemo());
                },
              ),
              VCell(
                title: 'refresh',
                clickCallBack: () {
                  Get.to(RefreshDemo());
                },
              ),
              VCell(
                title: 'VPopu',
                clickCallBack: () {
                  Get.to(VPopuDemo());
                },
              ),
              VCell(
                title: 'Alert',
                clickCallBack: () {
                  Get.to(VAlertDemo());
                },
              ),
              VCell(
                title: 'Radio',
                clickCallBack: () {
                  Get.to(RadioGroupDemo());
                },
              ),
              VCell(
                title: 'Tree',
                clickCallBack: () {
                  Get.to(TreeDemo());
                },
              ),
              VCell(
                title: '九宫格图',
                clickCallBack: () {
                  Get.to(V9UploadIndex());
                },
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}