| 作者 | gaoyong |
| 创建时间 | 2020-11-04 13:40:00 |
gleam
一个简单、轻量、可靠的Flutter UI 组件库
介绍
在业务开发中经常会有一些常用的组件，将这些常用的组件标准化后，有了这个库
希望gleam是一个简单、轻量、可靠的Flutter UI 组件库
安装
- 在项目的pubspec.yaml中在增加下面配置：gleam: ^1.0.0
- 第二步：然后在项目根目录(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