Flutter UI组件库插件sky_ui_kit的使用

Overview

此包包含一组可重用的小部件。它提供了可以帮助您屏幕的通用小部件。

Getting Started

在您的 pubspec.yaml 文件中添加依赖：

dependencies:
  sky_ui_kit : "^version"

然后运行以下命令以获取依赖项：

flutter pub get

Usage

以下是 sky_ui_kit 插件的一些常用组件及其使用方法。

Common Widget

SkyBox

SkyBox 是一个带边框和阴影效果的容器小部件。

SkyBox(
  borderColor: Colors.grey, // 边框颜色
  color: Colors.white,     // 填充颜色
  height: 80,              // 高度
  width: 120,              // 宽度
  margin: EdgeInsets.zero, // 外边距
  padding: const EdgeInsets.all(8), // 内边距
  borderRadius: BorderRadius.circular(12), // 圆角半径
  elevation: 9,            // 阴影深度
  child: const SomeWidget(), // 子小部件
  onPressed: () {},        // 点击回调
);

SkyButton

SkyButton 是一个带有文本和图标的按钮小部件。

Example Button 1

SkyButton(
  text: 'Button',       // 按钮文本
  fontSize: 16,         // 字体大小
  elevation: 4,         // 阴影深度
  borderRadius: 12,     // 圆角半径
  icon: Icons.ac_unit,  // 图标
  iconColor: Colors.white, // 图标颜色
  wrapContent: true,    // 是否包裹内容
  borderColor: Colors.yellow, // 边框颜色
  borderWidth: 3,       // 边框宽度
  onPressed: () {},     // 点击回调
),

Example Button 2

SkyButton(
  text: 'Button',       // 按钮文本
  iconWidget: const SkyImage(url: 'assets/fork.svg', width: 20), // 自定义图标
  onPressed: () {}      // 点击回调
),

Example Button 3

SkyButton(
  text: 'Button',       // 按钮文本
  outlineMode: true,    // 轮廓模式
  onPressed: () {},     // 点击回调
),

SkyIconButton

SkyIconButton 是一个仅包含图标的按钮小部件。

SkyIconButton(
  icon: Icons.ac_unit,  // 图标
  size: 80,             // 按钮大小
  iconColor: Colors.black, // 图标颜色
  color: Colors.orange, // 背景颜色
  onTap: () {},         // 点击回调
);

InfoTable

InfoTable 是一个表格小部件，用于展示结构化数据。

InfoTable(
  cellTextAlign: TextAlign.end, // 单元格文本对齐方式
  separatorEnabled: false,      // 是否启用分隔线
  data: {
    'Title': 'InfoTable Widget', // 表格数据
    'Description': 'Some description...',
    'Description 2': 'Some description2...',
  },
)

KeyboardDismisser

KeyboardDismisser 可以帮助在点击空白区域时自动关闭键盘。

KeyboardDismisser(
  child: Scaffold(
    appBar: AppBar(
      title: const Text('Sky UI Kit Demo'),
    ),
    body: ... // 其他内容
  ),
);

ColoredStatusBar

ColoredStatusBar 可以改变状态栏的颜色。

ColoredStatusBar(
  color: Colors.red, // 状态栏颜色
  brightness: Brightness.light, // 状态栏亮度
  child: KeyboardDismisser(
    child: Scaffold(
      appBar: AppBar(
        title: const Text('Sky UI Kit Demo'),
      ),
      body: ... // 其他内容
    ),
  ),
);

CircleIcon

CircleIcon 是一个圆形图标小部件。

CircleIcon(
  icon: Icon(Icons.lock), // 图标
  backgroundColor: Colors.cyanAccent, // 背景颜色
  splashColor: Colors.yellow, // 点击水波纹颜色
  size: 54,                  // 小部件大小
  onTap: () {},              // 点击回调
)

Platform Loading Indicator

PlatformLoadingIndicator 是一个支持不同平台样式的加载指示器。

PlatformLoadingIndicator();

Media

SkyImage

SkyImage 是一个可以处理多种来源（如 URL、本地路径等）的图片小部件。

SkyImage(
  src: 'https://picsum.photos/200/300.jpg', // 图片源
  width: 260,                              // 宽度
  height: 180,                             // 高度
  borderRadius: BorderRadius.circular(30), // 圆角半径
  enablePreview: true,                     // 启用预览功能
  emptyOrNullSrc: 'assets/img_empty.png',  // 空图片资源
  emptyOrNullFit: BoxFit.cover,            // 空图片填充方式
)

SkyVideo

SkyVideo 是一个可以播放视频的小部件。

SkyVideo(
  url: 'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4', // 视频URL
  height: 200,                                                              // 视频高度
);

MediaItems

MediaItems 是一个可以展示图片和视频列表或网格的小部件。

List

MediaItems(
  mediaUrls: [
    'https://picsum.photos/200/300.jpg',
    'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
    'https://fujifilm-x.com/wp-content/uploads/2021/01/gfx100s_sample_04_thum-1.jpg',
    'https://images.squarespace-cdn.com/content/v1/56169907e4b07744e81fe688/1568573110797-OQQY3Z4EG644FOCS7XQG/Swiss+Alps+-+Mont+Blanc+Massif-1.jpg',
    'https://picsum.photos/200/300.jpg',
    'assets/img_sample.png',
  ],
  itemsSpacing: 12, // 项目间距
  maxItem: 5,       // 最大项目数
)

Grid

MediaItems(
  mediaUrls: [
    'https://picsum.photos/200/300.jpg',
    'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
    'https://fujifilm-x.com/wp-content/uploads/2021/01/gfx100s_sample_04_thum-1.jpg',
    'https://images.squarespace-cdn.com/content/v1/56169907e4b07744e81fe688/1568573110797-OQQY3Z4EG644FOCS7XQG/Swiss+Alps+-+Mont+Blanc+Massif-1.jpg',
    'assets/img_sample.png',
  ],
  maxItem: 4,        // 最大项目数
  isGrid: true,      // 是否为网格布局
  size: 120,         // 网格项大小
  isSwipePreview: true, // 是否启用滑动预览
)

Collection View

在这一节中，我们将重点介绍 GroupedListView 的使用。

GroupedListView

GroupedListView 是一个支持分组的小部件。

SkyGroupedListView<CityModel, String>(
  shrinkWrap: true,                 // 是否收缩包装
  physics: const NeverScrollableScrollPhysics(), // 禁止滚动
  sortBy: SortBy.ASC,               // 排序方式
  data: dataCity,                   // 数据源
  separator: const Divider(thickness: 1, height: 12), // 分隔符
  separatorGroup: const Divider(
    thickness: 1,
    height: 12,
    color: Colors.red,
  ), // 分组分隔符
  groupHeaderBuilder: (group) {     // 分组头部构建器
    return Text(
      group.toString(),
      textAlign: TextAlign.center,
      style: const TextStyle(
        fontSize: 16,
        fontWeight: FontWeight.w700,
      ),
    );
  },
  itemBuilder: (context, index, item) { // 列表项构建器
    return Text(
      item.city,
      textAlign: TextAlign.start,
    );
  },
  groupBy: (element) => element.province, // 分组依据
)

OrderedList

OrderedList 是一个有序列表小部件。

OrderedList(
  itemCount: 4,                   // 项目数量
  shrinkWrap: true,               // 是否收缩包装
  separator: const Divider(height: 12), // 分隔符
  itemBuilder: (context, index) { // 列表项构建器
    return Text('Item with index = $index');
  },
)