Pal 小部件
一个用于更好入门的 Flutter 包。
一套用于您的 Flutter 应用程序的精美入门小部件。
安装包
添加到您的 pubspec.yaml 依赖项中
pal-widgets: 0.0.1+4
助手列表
| 名称 | 描述 | 状态 |
|---|---|---|
| AnchoredHelper | 一个助手,用于描述您页面上的另一个小部件。这会在您的页面上方创建一个覆盖层 | ✅ |
锚定助手
这个小部件深受 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,
negativText: const Text('cancel'),
positivText: const Text('Ok, understood'),
onError: () => print("widget not found"),
positivBtnStyle: helperOutlineBtnStyle,
negativeBtnStyle: helperOutlineBtnStyle,
onNegativTap: () => HelperOrchestrator.of(context).hideHelper(),
onPositivTap: () => HelperOrchestrator.of(context).hideHelper(),
onTapAnchor: () => 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 | ✅ |
| negativText | 显示在负按钮中的 [Text] 小部件 | |
| positivText | 显示在正按钮中的 [Text] 小部件 | |
| onPositivTap | 点击正按钮时执行的操作 | |
| onNegativTap | 点击负按钮时执行的操作 | |
| onError | 当小部件遇到任何错误时调用的函数 | |
| negativeBtnStyle | 应用在负按钮上的 Material 样式 | |
| positivBtnStyle | 应用在正按钮上的 Material 样式 | |
| onTapAnchor | 用户点击锚点时调用的操作 | |
| widgetFactory | 用于创建锚定助手的 Widget 工厂。默认为 AnchoredHoleHelper.anchorFactory,它会创建一个带有动画孔的全覆盖 |
有什么问题吗?
请在 我们的 Twitter 上联系我们,或发送电子邮件至 gautier[@@]pal-plugin.tech
