学校UI工具包使用教程

鲁景晨

于 2024-08-27 08:41:48 发布

阅读量896

点赞数 12

本文链接：https://blog.csdn.net/gitblog_00185/article/details/141586379

版权

学校UI工具包使用教程

school-ui-toolkitA basic UI toolkit to get you started with flutter application development.项目地址:https://gitcode.com/gh_mirrors/sc/school-ui-toolkit

项目介绍

school-ui-toolkit 是一个为 Flutter 应用开发提供基础 UI 组件的工具包。该项目包含超过 18 个自定义组件，如带有忙碌指示器的按钮、日历等。这些组件旨在帮助开发者快速启动和构建学校相关的应用程序。

项目快速启动

安装

首先，确保你已经安装了 Flutter 和 Dart SDK。然后，在你的 Flutter 项目中添加 school_ui_toolkit 依赖：

dependencies:
  school_ui_toolkit: ^5.0.0

运行 flutter pub get 来安装依赖。

基本使用

以下是一个简单的示例，展示如何使用 SchoolToolkitTextField 组件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('School UI Toolkit 示例')),
        body: Center(
          child: SchoolToolkitTextField(
            hintText: '请输入文本',
          ),
        ),
      ),
    );
  }
}

应用案例和最佳实践

案例一：使用 `SchoolToolkitRoleButton`

SchoolToolkitRoleButton 是一个动画角色选择按钮，适用于需要用户选择角色的场景。

class RoleSelectionPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('角色选择')),
      body: Center(
        child: SchoolToolkitRoleButton(
          roles: ['学生', '教师', '管理员'],
          onSelected: (role) {
            print('选择了 $role');
          },
        ),
      ),
    );
  }
}