Flutter通用UI组件插件ap_common_flutter_ui的使用

Flutter通用UI组件插件ap_common_flutter_ui的使用

校務通系列介面與函式共用

melos

长期校务通相关系列的app，界面与相关功能都极为相似，将相关的界面与函数库，制作此套件以方便维护。

展示网页

文档

相关项目

套件

Name pub.dev 说明
ap_common 函数库与相关界面共用
ap_common_core 纯 Dart 的基本类
ap_common_flutter_core 基于 Flutter 框架的核心基本类
ap_common_flutter_platform 原生功能实现
ap_common_flutter_ui UI 实现但不包含原生功能整合
ap_common_flutter_announcement_ui 最新消息服务相关的界面实现
ap_common_plugin 课表小工具
ap_common_firebase Firebase 服务的整合实现

套件使用要求

  • Flutter v3.22 以上

示例代码

以下是一个简单的示例，展示了如何在 Flutter 应用程序中使用 ap_common_flutter_ui 插件。我们将创建一个简单的页面，其中包含一些预定义的 UI 组件。

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

dependencies:
  flutter:
    sdk: flutter
  ap_common_flutter_ui: ^X.Y.Z  # 替换为最新版本号

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

接下来，在你的 main.dart 文件中导入并使用这些组件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({required this.title});

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用 ap_common_flutter_ui 中的按钮组件
            ApCommonButton(
              text: "点击我",
              onPressed: () {
                print("按钮被点击了！");
              },
            ),
            SizedBox(height: 20),
            // 使用 ap_common_flutter_ui 中的文本框组件
            ApCommonTextField(
              hintText: "请输入文字",
              onChanged: (text) {
                print("输入的文字是: $text");
              },
            ),
          ],
        ),
      ),
    );
  }
}

详细解释

  • ApCommonButton：这是一个预定义的按钮组件，可以用于快速创建带有点击事件的按钮。

    ApCommonButton(
  text: "点击我",
  onPressed: () {
    print("按钮被点击了！");
  },
)

  • ApCommonTextField：这是一个预定义的文本框组件，可以用于快速创建带提示信息的文本输入框。

    ApCommonTextField(
  hintText: "请输入文字",
  onChanged: (text) {
    print("输入的文字是: $text");
  },
)

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

1 回复

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


ap_common_flutter_ui 是一个 Flutter 插件，旨在提供一套通用的 UI 组件，帮助开发者快速构建一致且美观的用户界面。该插件通常包含一些常用的 UI 元素，如按钮、卡片、对话框、表单输入等，以减少开发者在 UI 开发中的重复工作。

安装

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

dependencies:
  flutter:
    sdk: flutter
  ap_common_flutter_ui: ^1.0.0  # 请确保使用最新版本

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

使用示例

以下是一些常见的使用示例，假设你已经导入了 ap_common_flutter_ui 插件：

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

1. 使用通用按钮

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Common UI Example'),
      ),
      body: Center(
        child: CommonButton(
          text: 'Click Me',
          onPressed: () {
            print('Button Clicked!');
          },
        ),
      ),
    );
  }
}

2. 使用通用卡片

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Common UI Example'),
      ),
      body: Center(
        child: CommonCard(
          child: Text('This is a common card widget.'),
        ),
      ),
    );
  }
}

3. 使用通用对话框

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Common UI Example'),
      ),
      body: Center(
        child: CommonButton(
          text: 'Show Dialog',
          onPressed: () {
            showCommonDialog(
              context: context,
              title: 'Dialog Title',
              content: 'This is a common dialog widget.',
              actions: [
                CommonDialogAction(
                  text: 'OK',
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

4. 使用通用表单输入框

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Common UI Example'),
      ),
      body: Center(
        child: CommonTextField(
          hintText: 'Enter your name',
          onChanged: (value) {
            print('Name: $value');
          },
        ),
      ),
    );
  }
}

自定义主题

ap_common_flutter_ui 通常支持自定义主题，以便你可以根据应用的整体设计风格调整组件的样式。你可以在 MaterialApp 的 theme 属性中定义主题，或者在组件中直接传递样式参数。

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        // 自定义主题
      ),
      home: MyHomePage(),
    );
  }
}
回到顶部