# Owl

**Repository Path**: wang_qichen12138/Owl

## Basic Information

- **Project Name**: Owl
- **Description**: 智能移动开发FinalProject
- **Primary Language**: Kotlin
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/wang_qichen12138/Owl
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-05-14
- **Last Updated**: 2024-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Owl

此项目是一个使用Jetpack Compose实现的Owl，一个非遗文化相关文章展示app。

要尝试这个示例应用程序，请使用稳定版本的Android Studio。您可以克隆这个仓库或者在Android Studio中导入项目，按照这里的步骤进行操作。

这个示例展示了：

* Material主题设计 和 浅色/深色主题
* 自定义布局
* 动画

## 截图

<img src="screenshots/1.jpg"/>
<img src="screenshots/2.jpg"/>
<img src="screenshots/3.jpg"/>
<img src="screenshots/4.jpg"/>
<img src="screenshots/5.jpg"/>
<img src="screenshots/6.jpg"/>
<img src="screenshots/7.png"/>
<img src="screenshots/8.png"/>
<img src="screenshots/9.png"/>


## 特点

#### [介绍屏幕](app/src/main/java/com/example/owl/ui/onboarding)
屏幕允许用户通过选择主题来自定义他们的界面。值得注意的功能包括：
* [自定义交错网格布局](app/src/main/java/com/example/owl/ui/onboarding/Onboarding.kt#L239).
* [主题切片](app/src/main/java/com/example/owl/ui/onboarding/Onboarding.kt#L171) 使用用户 [自定义选择动画](app/src/main/java/com/example/owl/ui/onboarding/Onboarding.kt#L157).

#### [文章屏幕](app/src/main/java/com/example/owl/ui/courses)
文章屏幕展示了已有非遗文章，以及一个搜索屏幕。值得注意的功能包括：
* 自定义 [`StaggeredVerticalGrid`](app/src/main/java/com/example/owl/ui/courses/FeaturedCourses.kt#L161) 根据可用空间响应式布局。
* [`FeaturedCourse`](app/src/main/java/com/example/owl/ui/courses/FeaturedCourses.kt#L70) 可组合演示了对 [`ConstraintLayout`](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#ConstraintLayout(androidx.compose.ui.Modifier,%20kotlin.Function1)) 的使用。

#### [文章详情屏幕](app/src/main/java/com/example/owl/ui/course/CourseDetails.kt)
显示所选文章的详情，包括：

* 一个可点击或拖动的 [浮动操作按钮](https://material.io/components/buttons-floating-action-button) 可以转换成一个 [`LessonsSheet`](app/src/main/java/com/example/owl/ui/course/CourseDetails.kt#L309).
* 一系列使用嵌套BlueTheme的 [`RelatedCourses`](app/src/main/java/com/example/owl/ui/course/CourseDetails.kt#L262) 。

#### [主题设计](app/src/main/java/com/example/owl/ui/theme)
Owl遵循Material Design，自定义了 [颜色](app/src/main/java/com/example/owl/ui/theme/Color.kt), [排版](app/src/main/java/com/example/owl/ui/theme/Type.kt) and [形状](app/src/main/java/com/example/owl/ui/theme/Shape.kt). 这些在Owl的多个 [主题](app/src/main/java/com/example/owl/ui/theme/Theme.kt)中汇聚在一起，每个颜色方案有一个主题。 此外，Owl支持 [图片](app/src/main/java/com/example/owl/ui/theme/Images.kt) 和 [高程](app/src/main/java/com/example/owl/ui/theme/Elevation.kt) 主题设计, 在浅色/深色主题中提供备用图片/高程。

#### [通用UI](app/src/main/java/com/example/owl/ui/common)
Compose使创建组件库并在整个应用程序中使用它们变得简单。详情见：
* [`CourseListItem`](app/src/main/java/com/example/owl/ui/common/CourseListItem.kt) 被使用于 [文章列表](app/src/main/java/com/example/owl/ui/courses/MyCourses.kt) 屏幕 和  [文章详情](app/src/main/java/com/example/owl/ui/course/CourseDetails.kt) 屏幕中的相关部分。
* [`OutlinedAvatar`](app/src/main/java/com/example/owl/ui/common/OutlinedAvatar.kt) 被使用于 [文章分块](app/src/main/java/com/example/owl/ui/courses/FeaturedCourses.kt) 屏幕 和 [文章详情](app/src/main/java/com/example/owl/ui/course/CourseDetails.kt) 屏幕。

#### [实用工具](app/src/main/java/com/example/owl/ui/utils/)
Owl实现了一些有趣的实用功能：
* [惰性布局](https://developer.android.com/jetpack/compose/lists) - 特别是LazyColumn和LazyRow，传递 [item keys](https://developer.android.com/jetpack/compose/lists#item-keys) 并使用 [`animateItemPlacement()`](https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyItemScope#(androidx.compose.ui.Modifier).animateItemPlacement(androidx.compose.animation.core.FiniteAnimationSpec))。
* [窗口插图](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets) 由Compose Foundation库提供。
* [NavGraph](app/src/main/java/com/example/owl/ui/NavGraph.kt) 使用 [Jetpack Navigation](https://developer.android.com/jetpack/compose/navigation) 模拟应用程序内的导航。

#### [ChatBot]()

实现了基于传统文化知识的聊天机器人。

## 数据
领域类型在 [model包](app/src/main/java/com/example/owl/model) 中进行建模，每个类型包含使用虚假`Repo`对象暴露的静态示例数据。

本项目使用的图床为 [聚合图床](https://www.superbed.cn/)， 并使用 [coil][coil] 加载。


## 开源
[owl]: https://gitee.com/wang_qichen12138/Owl