Flutter UI组件库插件haigo_ui_kit的使用

Flutter UI组件库插件haigo_ui_kit的使用

简介

haigo_ui_kit 是一个简单的 Flutter 包，它为你提供了一些实现优惠券卡片形状的小部件和自定义剪辑器。

特性

  • 提供一些小部件来创建优惠券卡片。
  • 提供自定义剪辑器来实现优惠券卡片的形状。

使用示例

示例代码

在以下示例中，我们将展示如何使用 haigo_ui_kit 中的按钮和表单字段。

import 'package:flutter/material.dart';
import 'package:haigo_ui_kit/haigo_ui_kit.dart'; // 导入 haigo_ui_kit 包

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

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

  // 这个小部件是你的应用的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Haigo UI Kit Demo 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> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用 HaigoButton 创建一个按钮
            HaigoButton(
              text: "点击我",
              onPressed: () {
                print("按钮被点击了");
              },
            ),
            SizedBox(height: 20), // 添加间距
            // 使用 HaigoFormField 创建一个表单字段
            HaigoFormField(
              labelText: "请输入文本",
              onChanged: (value) {
                print("输入框内容改变: $value");
              },
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter UI组件库插件haigo_ui_kit的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter UI组件库插件haigo_ui_kit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


haigo_ui_kit 是一个自定义的 Flutter UI 组件库插件，它提供了一系列预定义的 UI 组件，帮助开发者快速构建美观且一致的用户界面。以下是使用 haigo_ui_kit 的基本步骤和示例。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 haigo_ui_kit 的依赖。

dependencies:
  flutter:
    sdk: flutter
  haigo_ui_kit: ^1.0.0  # 请根据实际版本号进行替换

然后，运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 haigo_ui_kit 包。

import 'package:haigo_ui_kit/haigo_ui_kit.dart';

3. 使用组件

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

按钮组件

HaigoButton(
  onPressed: () {
    print('Button Pressed!');
  },
  text: 'Click Me',
  color: Colors.blue,
);

卡片组件

HaigoCard(
  title: 'Card Title',
  subtitle: 'Card Subtitle',
  content: 'This is the content of the card.',
  image: AssetImage('assets/image.png'),
);

输入框组件

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

对话框组件

HaigoDialog(
  title: 'Dialog Title',
  content: 'This is the content of the dialog.',
  actions: [
    HaigoButton(
      text: 'OK',
      onPressed: () {
        print('OK Pressed');
        Navigator.pop(context);
      },
    ),
    HaigoButton(
      text: 'Cancel',
      onPressed: () {
        print('Cancel Pressed');
        Navigator.pop(context);
      },
    ),
  ],
);

4. 自定义主题

haigo_ui_kit 可能还支持自定义主题，以便你可以根据应用的设计需求调整组件的外观。

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.deepPurple,
    accentColor: Colors.amber,
    // 其他主题设置
  ),
  home: MyHomePage(),
);

5. 进一步探索

haigo_ui_kit 可能还包含其他组件和功能，建议查阅官方文档或源码以获取更多详细信息和高级用法。

6. 示例项目

你可以创建一个简单的 Flutter 项目来测试这些组件，例如：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Haigo UI Kit Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Haigo UI Kit Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            HaigoButton(
              onPressed: () {
                print('Button Pressed!');
              },
              text: 'Click Me',
              color: Colors.blue,
            ),
            SizedBox(height: 20),
            HaigoTextField(
              hintText: 'Enter your name',
              onChanged: (value) {
                print('Input changed: $value');
              },
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部