一、基础交互与显示组件
- Text 查看示例
- 功能说明:用于在界面上显示文本内容,支持设置字体、大小、颜色、样式(如加粗、斜体、下划线)等属性,满足不同的文本展示需求,可传达各种信息给用户。
- 示例场景:作为标题展示应用名称或页面标题;在正文区域显示详细的说明文字、文章内容等;用于显示提示信息,如错误提示、操作引导等。
- Image 查看示例
- 功能说明:能够加载并显示图片,支持本地资源和网络资源,可对图片的大小、缩放方式、裁剪等属性进行设置,使图片以合适的方式展示在界面中,增强界面的视觉效果。
- 示例场景:在应用的启动页展示品牌 logo;在商品列表页面显示商品图片;用于设置界面的背景图片,营造特定的视觉氛围。
- Button
- 功能说明:创建可点击按钮,允许自定义外观(如背景颜色、形状)和文字内容,通过设置点击事件实现交互操作,可用于触发各种业务逻辑,如提交表单、导航到其他页面等。
- 示例场景:在登录页面,用户点击 “登录” 按钮提交账号密码信息;在电商应用中,点击 “加入购物车” 按钮将商品添加到购物车。
- TextField
- 功能说明:提供用户输入文本的功能,可设置默认文本、提示文本以及文本样式,方便获取用户输入的内容,常用于数据采集场景。
- 示例场景:在注册页面,用户输入用户名、密码、邮箱等信息;在搜索功能中,用户输入关键词进行搜索操作。
二、布局组件
- Box
- 功能说明:简单的布局组件,可容纳其他组件,并依据
alignment
属性精确指定内部组件的对齐方式,实现灵活多变的布局效果,适用于对组件位置有特定要求的场景。- 示例场景:将一个小图标和一段文字在水平方向上居中对齐,放置在屏幕的特定区域,如在一个提示框中,图标和文字组合显示。
- Column
- 功能说明:将子组件按照垂直方向依次排列,能够设置组件之间的间距、对齐方式等属性,便于构建垂直方向的布局结构,常用于呈现列表式或堆叠式的界面内容。
- 示例场景:在设置页面,多个设置选项垂直排列,每个选项独占一行,清晰明了;在聊天界面,聊天记录按照时间顺序垂直堆叠显示。
- Row
- 功能说明:把子组件按水平方向排列,常用于创建菜单、工具条等水平布局的界面元素,可灵活调整组件之间的间距和对齐方式,使界面更加整洁和美观。
- 示例场景:在导航栏中,多个导航按钮水平分布,方便用户进行页面切换操作;在工具类应用中,一排功能图标整齐排列,供用户快速选择操作。
- LazyColumn
- 功能说明:针对需要显示大量列表数据的情况进行优化,它会根据屏幕的可见区域动态地加载和显示内容,避免一次性加载所有数据,从而显著提高性能和内存使用效率,确保界面的流畅性和响应性。
- 示例场景:在社交媒体应用中,动态列表可能包含大量的帖子,使用 LazyColumn 可以让用户在滚动浏览时快速加载可见区域的内容;在新闻客户端,长长的新闻列表也能通过此组件高效展示。
- Scaffold
- 功能说明:用于构建具有基本结构的屏幕布局,通常包含一个顶部栏(AppBar)、一个底部导航栏(BottomNavigation)以及一个主要内容区域,能够为应用打造统一风格的界面框架,方便用户进行导航和操作。
- 示例场景:大多数 APP 的主页面都采用 Scaffold 布局,顶部栏显示应用名称和一些操作按钮,底部导航栏用于切换不同的功能模块,中间区域展示具体的页面内容,如在电商 APP 中,底部导航可切换首页、分类、购物车、个人中心等页面。
三、多媒体相关组件(待补充)
- Canvas(画布)
- 功能说明:提供一个绘制区域,开发者可在其上运用图形绘制 API 绘制各种自定义图形、线条、图案等,以此实现复杂的可视化效果,比如绘制精美的图表、独特的装饰图案用于界面的个性化美化。
- 示例场景:在数据可视化应用中,绘制折线图、柱状图、饼图等来直观展示数据趋势和比例关系;在游戏开发中,绘制游戏场景的各种元素,如角色、道具、背景等。
- MediaPlayer(播放器)
- 功能说明:用于播放音频、视频等多媒体文件,可对播放过程进行全面控制,包括播放、暂停、快进、后退等操作,支持多种常见的媒体格式,并且能够与界面的其他交互组件紧密结合,例如通过按钮来方便地控制播放状态。
- 示例场景:在音乐播放器 APP 中,用于播放本地或在线的音乐歌曲;在视频类 APP 中,播放各类视频内容,如电影、电视剧、短视频等;在视频教程类应用中,播放教学视频,帮助用户学习知识和技能