作者	gaoyong
创建时间	2020-11-04 13:40:00

gleam

一个简单、轻量、可靠的Flutter UI 组件库

介绍

在业务开发中经常会有一些常用的组件，将这些常用的组件标准化后，有了这个库

希望gleam是一个简单、轻量、可靠的Flutter UI 组件库

安装

1. 在项目的pubspec.yaml中在增加下面配置：gleam: ^1.0.0
2. 第二步：然后在项目根目录(pubspec.yaml 所在的目录)执行命令：flutter pub get

介绍

BottomSheet 底部菜单弹窗

​ 底部弹出的菜单

示意图

基础用法	展示取消按钮	展示描述信息	选项状态	自定义面板

调用showGleamBottomSheet函数后弹出的底部菜单弹窗，其中操作项使用BottomSheetAction组件

参数说明

参数名称	说明	类型	默认值
context	上下文	BuildContext	-
actions	操作项列表	List	-
contentWidget	内容区域Widget (如果设置contentWidget，则actions、description、cancelText、onCancelTap的设置不生效)	Widget	-
description	顶部显示的描述(可以是文字或者Widget)	dynamic	-
cancelText	取消文案（没有设置则不显示“取消”按钮）	String	-
onCancelTap	取消按钮点击回调方法	GestureTapCallback	-

BottomSheetAction组件属性说明

属性名称	说明	类型	默认值
item	操作项(可以是文字或者Widget)	dynamic	-
height	操作项高度	double	50
onTap	操作项点击回调方法	GestureTapCallback	-
hiddenDivider	是否隐藏操作项下方分割线	bool	false

代码演示

//基础用法
showGleamBottomSheet(context, actions: [
  BottomSheetAction('选项一', onTap: () {
    showToast('选项一');
  }),
  BottomSheetAction('选项二', hiddenDivider: true, onTap: () {
    showToast('选项二');
  }),
]);

//展示取消按钮
showGleamBottomSheet(
  context,
  actions: [
    BottomSheetAction('选项一', onTap: () {
      showToast('选项一');
    }),
    BottomSheetAction(
      '选项二',
      hiddenDivider: true,
      onTap: () {
        showToast('选项二');
      },
    ),
  ],
  cancelText: '取消',
  onCancelTap: () {
    showToast('取消');
  },
);

//展示描述信息
showGleamBottomSheet(
  context,
  actions: [
    BottomSheetAction('选项一', onTap: () {
      showToast('选项一');
    }),
    BottomSheetAction(
      '选项二',
      hiddenDivider: true,
      onTap: () {
        showToast('选项二');
      },
    ),
  ],
  description: Container(
    padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
    height: 60.0,
    child: Text(
      '这是描述信息',
      style: Style.normal15Color999999,
    ),
  ),
  cancelText: '取消',
  onCancelTap: () {
    showToast('取消');
  },
);

//选项状态
showGleamBottomSheet(
  context,
  actions: [
    BottomSheetAction(
      Text(
        '着色选项',
        style: Style.normal15ColorFF0000,
      ), onTap: () {
        showToast('着色状态');
      }),
    BottomSheetAction(
      Text(
        '禁用选项',
        style: Style.normal15Color999999,
      ),
      onTap: null,
    ),
    BottomSheetAction(
      CupertinoActivityIndicator(),
      hiddenDivider: true,
      onTap: () {
        showToast('loading...');
      },
    ),
  ],
  cancelText: '取消',
  onCancelTap: () {
    showToast('取消');
  },
);

//自定义面板
showGleamBottomSheet(
  context,
  contentWidget: Container(
    height: 200.0,
    child: Stack(
      children: [
        Positioned(
          top: 0,
          right: 0,
          child: IconButton(
            icon: Icon(Icons.close),
            color: AppColors.clC8C9CC,
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ),
        Column(
          children: [
            SizedBox(
              height: 16.0,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "标题",
                  style: Style.bold15Color333333,
                )
              ],
            ),
            Expanded(
              child: Center(
                child: Text('内容'),
              ),
            ),
          ],
        ),
      ],
    ),
  ),
              );

Dialog 弹出框

​ 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作

Empty 空状态

​ 空状态时的占位提示

FilledButton 填充按钮

​ 填充按钮的文字为白色，背景为按钮的颜色

GleamOutlineButton 细边框按钮

​ 细边框按钮的文字,和边框为按钮的颜色，背景为白色

GleamTextButton 文字按钮

​ 文字按钮只有一个文字，该文字可以点击

GleamTextField 文本输入框

​ 提供文本输入框右侧尾随的Widget扩展

GleamIcon 图标

​ 提供Icon及Icon上红点及消息未读数显示

GleamImage 图片

​ 提供多种图片来源网络图片、本地图片、资源图片，支持圆角、支持占位图、失败图

ImagePicker 照片选择

​ 从手机相册选择照片

Placeholder 占位状态

​ 占位状态时的组件

Search 搜索

​ 搜索输入框

ShareSheet 分享面板

​ 底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。

Tag 标签

​ 文字，或者图标+

依赖

打包

export https_proxy=http://127.0.0.1:7890 http_proxy=http://127.0.0.1:7890 all_proxy=socks5://127.0.0.1:7890

set http_proxy=http://127.0.0.1:7890 set https_proxy=http://127.0.0.1:7890

flutter packages pub publish --dry-run flutter packages pub publish --server=https://pub.dartlang.org

团队成员

• @gaoyong
• @liuxiaobina
• @lee980