快速开始

      欢迎使用 Aiflutter 低代码平台！在这里，您可以轻松高效地构建应用，无需复杂编码，即可快速实现您的创意。以下是一个 快速入门指南，帮助您快速掌握平台功能，轻松开启您的开发之旅！无论是快速创建应用、轻松管理项目，还是高效完成开发流程，Aiflutter 都将助您一臂之力！让我们一起开始吧！

使用低代码平台开发一个登录页面，效果图如下

图片素材下载链接：图片素材

具体操作步骤如下

1. 注册登录

打开 低代码平台登录网页 ，使用微信快捷登录或者扫描二维码登录。

2. 创建项目

登录成功后，我们在项目主页中添加一个项目

（1）点击【新增项目】->【手动添加】

（2）在弹框中输入项目名称、项目描述后，点击【确定】，项目就创建成功了

3. 页面设计

      点击已经创建好的项目进入到操作界面，默认会存在一个HomePage页面且这个页面已经存在了上下布局小部件，操作界面相关详情可查看教程 操作界面

在HomePage页面中进行设计，实现流程如下

  1. 点击左侧功能栏中的【页面管理】，再点击【HomePage】页面，此时右侧会出现【当前页面全局配置】属性面板，属性信息如下：

    • 页面背景颜色 #FF006FFF

  2. 从【小部件面板】-> 【常用元素】中选择图片小部件拖入到页面编辑窗口内的上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

    • 宽无限 高240
    • 对齐方式居中
    • 外边距 上边距：80
    • 填充方式 填满高度
    • 图片来源--【我的文件】，点击【上传文件】，图片素材下载链接：图片素材
    • image-20251023143646650

  3. 从【小部件面板】-> 【常用元素】中选择文本小部件拖入到页面编辑窗口内的上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

    • 字体粗细600
    • 文本内容Seismi
    • 文本颜色#FFFFFFFF
    • 文本大小45
    • 外边距 下边距160

  4. 从【小部件面板】-> 【常用元素】中选择按钮小部件拖入到页面编辑窗口内的上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

    • 宽无限
    • 背景颜色#FFFFFFFF
    • 圆角120
    • 外边距20
    • 从【小部件面板】-> 【常用元素】中选择文本小部件拖入到按钮小部件中并在右侧的属性编辑器中配置属性，属性信息如下：
      • 文本内容登录
      • 文本颜色#FF101213
      • 文本大小16

  5. 从【小部件面板】-> 【常用元素】中选择文本小部件拖入到页面编辑窗口内的上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

    • 文本内容没有账户？去注册
    • 文本颜色#FFFFFFFF
    • 文本大小14

  6. 从【小部件面板】-> 【常用元素】中选择按钮小部件拖入到页面编辑窗口内的上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

    • 宽无限
    • 背景颜色#00FFFFFF
    • 圆角120
    • 外边距20
    • 阴影大小0
    • 边框 宽度2 颜色#FFFFFFFF
    • 从【小部件面板】-> 【常用元素】中选择文本小部件拖入到按钮小部件中并在右侧的属性编辑器中配置属性，属性信息如下：
      • 文本内容快速开始
      • 文本颜色#FFFFFFFF
      • 文本大小16

  7. 从【小部件面板】-> 【常用元素】中选择文本小部件拖入到页面编辑窗口内的上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

    • 文本内容隐私策略
    • 文本颜色#FFFFFFFF
    • 文本大小14

4. 在线预览

  1. 在右上角点击【运行】
  2. 等待一分钟后即可预览APP页面

5. 下载APP

  1. 在右上角【下载】选项中选择【下载应用】
  2. 随后跳出弹框，确认信息无误后点击确认
  3. 跳转到打包日志界面，等待两分钟后即可下载完成
  4. 可以把下载后的安装包发送到手机上进行安装运行

6. 项目分享

  1. 通过点击左上角【菜单按钮】->【返回工作台】，返回到项目列表
  2. 在项目列表中点击对应项目右上角的┇，再点击【分享项目】
  3. 随后跳出弹框，打开【链接分享】并点击【复制链接】
  4. 将复制的链接通过微信或者其它社交工具发送给好友即可

image-20250408174849473

image-20250408175015360

上次更新: