页面导航

浮动按钮

  浮动按钮（Floating Action Button，简称FAB）是一种悬浮在页面上的圆形按钮，常见于网页和移动应用中，主要用于提供核心操作入口（如添加、新建、分享等）、快速导航、固定位置的交互入口等功能，优化用户体验并强化品牌形象，尤其在移动端设计中因其高效性和适应性而被广泛应用。

应用场景

  1. 主要操作

  在移动应用中，浮动按钮通常用于执行应用程序中的主要操作。例如，在一个社交应用中，浮动按钮可能用于创建新帖子或发送消息。

  1. 导航

  浮动按钮可以用于导航到应用的主要部分。例如，在一个新闻应用中，浮动按钮可以是一个返回顶部按钮，帮助用户快速回到页面的顶部。

  1. 紧急操作

  在一些需要快速响应的应用中，浮动按钮可以用于执行紧急操作。例如，在一个健康监测应用中，浮动按钮可以是一个紧急呼叫按钮，用于在紧急情况下快速联系医疗援助。

  1. 购物车

  在电商应用中，浮动按钮通常用于访问购物车或进行购买操作。用户可以通过点击浮动按钮快速查看购物车内容或进行结账。

常用属性

属性作用默认值
宽设置浮动按钮的宽度60
高设置浮动按钮的高度60
阴影大小设置浮动按钮的阴影，增加立体感4
背景颜色设置按钮的背景颜色Primary主题色
按钮位置设置顶部导航栏位置右下角悬浮

image-20260611180223441

按钮位置详解
  1. 左上角悬浮：位于页面左上角，悬浮于内容之上。
image-20260611180346503

  1. 顶部中央悬浮：位于页面顶部中央，悬浮于内容之上。

    image-20260611180506471
    1. 右上角悬浮：位于页面右上角，悬浮于内容之上。
    image-20260611180550468
    1. 左下角悬浮：位于页面左下角，悬浮于内容之上，不依附于底部导航栏。
    image-20260611180640806
    1. 底部中央悬浮：位于页面底部中央，悬浮于内容之上，不依附于底部导航栏。
    image-20260611180737361
    1. 右下角悬浮：位于页面右下角，悬浮于内容之上，不依附于底部导航栏。最常见的浮动按钮位置，用于新增、编辑、创建等操作。
    image-20260611180809937
    1. 左下角停靠：位于底部导航栏左侧，与底部区域紧密结合。
    image-20260611180902511
    1. 底部中央停靠：位于底部导航栏中央，通常配合凹槽（Notch）设计，实现自定义导航栏的功能。常用语首页核心功能入口，如发布、扫码、拍照等。
    image-20260611180938481
    1. 右下角停靠：位于底部导航栏右侧，与底部区域紧密结合。
    image-20260611181009594

    操作流程

    1. 在小部件面板中搜索“浮动按钮”，找到对应组件后拖拽到页面中。添加完成后，浮动按钮默认显示在页面右下角。
    image-20260611182757261
    1. 选中浮动按钮，在右侧属性面板中可配置按钮的各项属性，包括：
    • 宽度、高度
    • 背景颜色
    • 阴影效果
    • 显示位置
    image-20260611182832311

    1. 若需要修改按钮中的图标（默认显示为“+”图标），可在右侧属性面板的图标配置区域选择新的图标。

      image-20260611182912222

    2. 若需要完全自定义按钮内容，可先选中按钮内的图标，右键选择删除。删除后按钮内容区域将变为空白，此时可将其他小部件拖拽到按钮内部，实现自定义布局和内容展示。

    image-20260611182943938
    1. 由于浮动按钮尺寸通常较小，直接在画布中操作内部组件可能不够方便。此时可点击页面管理按钮，在当前编辑页面中找到对应的浮动按钮，然后通过小部件树对其内部组件进行选择、拖拽和编辑。
    image-20260611183028138

    提示： 浮动按钮不仅可以显示图标，也可以作为容器使用，通过嵌套文本、图片或其他组件，实现个性化的悬浮操作入口。

页面滑动

  页面滑动是一种在同一视图容器中通过滑动方式切换多个页面的布局形式，适用于页面轮播、引导页、多页浏览等场景。页面之间通过手势滑动或编程控制方式切换，支持横向或纵向布局，每个页面内容互不干扰。

应用场景

  1. 页面轮播展示

    适用于 Banner、轮播广告、引导页等内容，页面可循环或按顺序滑动展示，提升视觉体验。

  1. 滑动式页面结构

   用于内容分页、教程步骤、图文混排等场景，用户可连续滑动查看多个内容页，保持界面流畅性和阅读节奏。

常用属性

属性名称作用备注
宽设置组件的显示宽度最大宽度
高设置组件的显示高度300
滑动方向设置滑动方向（水平、垂直）默认为水平
元素总数表示页面数量默认为4，每个元素为独立模块
初始页索引控制默认显示第几页从第 0 页开始
允许滑动控制是否允许手势滑动切换页面禁用时仅通过按钮或事件控制切换
image-20250709173020524
页面滑动圆点指示器属性
属性名称作用默认值
显示页面滑动原点指示器控制是否显示圆点指示器true
对齐方式圆点指示器的位置左侧
活动颜色设置当前选中圆点的颜色#FF2196F3
非活动颜色设置未选中圆点的颜色#42000000
点宽度设置未选中圆点的宽度16
点高度设置未选中圆点的高度8
膨胀系数设置选中圆点的放大倍数3
圆角大小设置圆点的圆角大小16
image-20250709173043068

导航切换

  导航切换是一种将页面内容根据功能或分类分组展示的布局方式，常用于多区域并存、但需分时呈现的场景。通过顶部或底部的标签栏，用户可以在多个视图之间快速切换，实现模块化的内容管理与界面整洁展示。

应用场景

  1. 多分类内容展示

  适用于将不同类型的数据、模块、页面等分类管理，例如“我的消息”中的“系统消息、评论、点赞”等，通过切换标签快速查看对应内容。

  1. 表单分段填写

  在表单较长或逻辑结构复杂时，可使用标签切换进行内容分段，如“基本信息、联系信息、扩展设置”等，减少页面长度，提高填写体验。

常用属性

大小
属性作用默认值
宽设置导航切换的宽度390
高设置导航切换的高度400
image-20250709164750068
导航标题
属性作用备注
选项标题设置标签栏显示的标题文本支持修改内容，实时更新显示
删除图标用户点击后删除对应标签页每个选项卡右侧显示红色删除图标
添加选项页允许动态新增一个新的标签页点击 “添加选项页” 按钮执行操作
image-20250709164818025
选项卡文本属性
属性作用默认值
选中的颜色设置当前选中标签的文本颜色#FF000000
未选中的颜色设置未被选中的标签文本颜色#FF9E9E9E
字体粗细设置文本的字体粗细500-Medium
文本大小设置标签文字的字体大小
字体行号设置标签文本的最大行数
字体间距设置字符之间的距离
文本对齐设置文字在标签内的对齐方式左对齐
image-20250709164844893
选中选项下划线属性
属性作用默认值
下划线颜色设置当前选中标签的文本颜色#FF000000
下划线高度设置未被选中的标签文本颜色2
image-20250709164900289
上次更新: