YouTube-Clone-UI
?应用
YouTube Clone UI 是一款视觉效果惊艳的 Flutter 应用,模仿了著名的视频分享平台 YouTube 的用户界面。它提供了类似的外观和感觉,让用户能够在沉浸式且熟悉的环境中浏览视频。虽然它专注于 UI 方面,但并不包含真实 YouTube 应用的全部功能。
?主屏幕
在应用的主屏幕上,您会找到一个与 YouTube 应用类似的用户界面。屏幕顶部包含一个 SliverAppBar,提供滚动应用栏功能。SliverAppBar 可能包含一个标题或徽标,并且可以根据用户滚动内容的行为进行调整。
在 SliverAppBar 下方,您会看到使用视频卡片包显示的视频卡片。视频卡片是用于展示视频的视觉表示以及相关信息的窗口小部件,例如视频标题、缩略图、时长和观看次数。这些包为在可滚动列表中显示多个视频提供了有组织且吸引人的布局。
| 图片 1 | 图片 2 |
|---|---|
?迷你播放器屏幕
通过 Riverpod 进行状态管理,当用户点击视频时,选定的视频状态会根据选择的视频进行更新。另一方面,点击“x”按钮会将选定的视频状态设置为 null,表示未选择视频或迷你播放器已关闭。Riverpod 能够实现高效的状态更新,并确保基于用户交互的无缝用户体验。
| 迷你播放器屏幕 |
|---|
?视频屏幕
在视频屏幕的顶部,用户会找到一个代表正在播放视频的缩略图。缩略图提供了内容的视觉预览,并帮助用户一目了然地识别视频。在缩略图下方,有一个线性进度指示器,显示正在播放视频的进度。此功能允许用户跟踪他们在视频中的进度,并直观地显示已用时间。
在屏幕的左上角,有一个图标,用户可以点击该图标来关闭视频屏幕。此图标为用户提供了一种便捷的方式来退出视频播放并返回到上一屏幕或继续浏览其他视频。此外,视频屏幕还包含一个 Sliver List,允许用户在屏幕上持续滚动。Sliver List 通过呈现用户在观看当前视频时可以浏览的视频列表或相关内容,提供无缝且沉浸式的浏览体验。
| 视频屏幕 |
|---|
?导航屏幕
导航屏幕允许用户使用底部导航栏在应用的各个部分之间进行导航。通过导航栏可以访问的屏幕包括:
主页:提供个性化内容和推荐。探索:允许用户发现新内容和浏览类别。添加:使用户能够上传和分享自己的内容。订阅:管理订阅偏好和高级功能。库:整理并提供对保存的项目和播放列表的访问。
请注意,除了主屏幕之外,其他屏幕目前都没有实现用户界面。但是,以后可以开发和添加它们来增强应用程序的功能和用户体验。
| 订阅 | 库 | 探索 |
|---|---|---|