布局

1. 垂直布局 

所有内部组件从上到下依次排成一列,适合做页面主体、表单、纵向列表内容,是页面最常用的基础布局。

2. 水平布局 

所有内部组件从左到右排成一行,空间不足时组件会被截断,不能自动换行,适合单行按钮、一行图文、顶部导航栏。

3. 相对布局 

不依靠排列顺序,通过设置锚点,让组件相对容器、其他控件自由摆放,上下左右位置都能自定义,适合元素分散、排版不规则的复杂界面。

4. 层叠布局 

组件分层叠加,后放置的控件会盖在前面控件上方,可单独调整每个子组件在层内的上下左右位置,适合图片加水印、卡片角标、弹窗遮罩。

5. 弹性布局 

整合水平、垂直布局能力,支持切换横竖排列,超出容器宽度能自动换行,还能分配剩余空间自适应屏幕,适合标签流式排版、多列自适应布局。

     简易区分

  • 只需要单列上下排列 → 垂直布局
  • 只需要单行左右排列、不需要换行 → 水平布局
  • 组件需要分层覆盖(图 + 文字 / 角标)→ 层叠布局
  • 标签多、需要自动换行自适应 → 弹性布局
  • 控件分散、需要自由定位、不受排列顺序限制 → 相对布局

组件

1. 轮播图 

  • 功能:滑动容器组件,多用于首页广告横幅、商品图集、启动引导页
  • 核心能力:支持手指左右滑动切换图片;可开启自动轮播、循环往复播放;底部自带小圆点指示器,标记当前展示第几张图;能自定义轮播切换时长、是否自动播放。

2. 视频 

  • 功能:专门承载视频播放的媒体组件,可加载本地视频、线上网络视频
  • 核心能力:自带播放控制面板,包含暂停 / 播放按钮、进度拖动条、全屏按钮;可设置打开页面自动播放、静音播放,自由控制视频宽高与画面填充样式。

3. 图片 

  • 功能:基础媒体展示组件,用来显示图标、海报、头像、背景图等各类静态图像
  • 核心能力:支持本地素材、网络图片、矢量 SVG 图;可设置圆角、拉伸铺满 / 自适应留白等画面缩放规则,调整图片透明度、边框样式。

4. 选项卡 

  • 功能:页面切换导航组件,常见底部菜单栏、顶部分类标签
  • 核心能力:由标签栏和对应页面组成,点击不同标签,快速切换对应独立内容页面;标签栏可放在页面顶部或底部,能自定义标签文字、选中高亮样式。

5. 文本 / 输入框

文本 Text

仅用于展示固定文字,页面标题、说明文字、商品描述、标签文案都用它;可调整字体大小、颜色、加粗、对齐方式。

Logo

作为“人工智能6S店”的官方数字引擎,为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐