Pal 小部件
一个用于更好入职流程的 Flutter 包。
为您的 Flutter 应用程序提供一套精美的入职小部件。
安装包
添加到您的 pubspec.yaml 依赖项中
pal-widgets: 0.2.0
助手列表
| 名称 | 描述 | 状态 |
|---|---|---|
| Mr Rwema | 一个助手，用于描述您页面上的另一个小部件。这会在您的页面上方创建一个覆盖层 | ✅ |
锚定助手
这些小部件深受 Google 入职流程的启发。它们会在您想要使用的任何小部件周围显示一个圆圈，并添加一个覆盖层，您可以在其中添加消息。
首先使用 HelperOrchestrator 小部件嵌入您的页面或您的应用。
HelperOrchestrator(
child: Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ...
),
)
您现在可以使用以下方法为要引用的窗口小部件获取一个键 text1
Text(
'$_counter',
key: HelperOrchestrator.of(context).generateKey('text1'),
),
示例
您现在可以使用以下方法显示一个锚定助手
final helper = AnchoredHelper(
anchorKeyId: 'text1',
title: const Text('Title lorem pitume'),
description: const Text('Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum'),,
bgColor: Colors.blue,
leftBtnText: const Text('cancel'),
rightBtnText: const Text('Ok, understood'),
onError: () => print("widget not found"),
positivBtnStyle: helperOutlineBtnStyle,
negativeBtnStyle: helperOutlineBtnStyle,
onLeftBtnTap: () => HelperOrchestrator.of(context).hideHelper(),
onRightTap: () => HelperOrchestrator.of(context).hideHelper(),
onTapAnchor: () => HelperOrchestrator.of(context).hideHelper(),
);
// this will show an overlayed anchored widget using the key text1
HelperOrchestrator.of(context).showAnchoredHelper('text1', helper);
属性
| 属性 | 描述 | 必需 |
|---|---|---|
| anchorKeyId | [HelperOrchestrator] 创建的 [Key] 的引用 | ✅ |
| title | 用作标题的 Text 小部件 | |
| 描述 | 用作描述的 Text 小部件 | |
| bgColor | 用作覆盖背景的 Color | ✅ |
| leftBtnText | 显示在左侧按钮中的 [Text] 小部件 | |
| rightBtnText | 显示在右侧按钮中的 [Text] 小部件 | |
| onLeftBtnTap | 点击左侧按钮时的操作 | |
| onRightTap | 点击右侧按钮时的操作 | |
| onError | 当小部件遇到任何错误时调用的函数 | |
| leftBtnStyle | 应用于负面按钮的 Material 样式 | |
| rightBtnStyle | 应用于正面按钮的 Material 样式 | |
| onTapAnchor | 用户点击锚点时调用的操作 | |
| widgetFactory | 用于创建锚定助手的 Widget 工厂。默认为 AnchoredCircleHoleHelper.anchorFactory，它创建一个带有动画孔的完整覆盖层 |
有两种孔洞锚点小部件工厂
AnchoredCircleHoleHelper.anchorFactory：创建一个圆形孔（默认值）AnchoredRectHoleHelper.anchorFactory：在严格的小部件边界上创建一个矩形孔
有什么问题吗？
通过以下方式联系我们：
