├── .circleci
└── config.yml
├── .editorconfig
├── .github
└── workflows
│ ├── build.yml
│ ├── docs.yml
│ └── issues-stale.yml
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── app
├── .gitignore
├── build.gradle
├── proguard-rules.pro
├── release
│ ├── app-release.apk
│ └── output-metadata.json
└── src
│ ├── androidTest
│ └── java
│ │ └── com
│ │ └── king
│ │ └── compose
│ │ └── component
│ │ └── app
│ │ └── ExampleInstrumentedTest.kt
│ ├── main
│ ├── AndroidManifest.xml
│ ├── java
│ │ └── com
│ │ │ └── king
│ │ │ └── compose
│ │ │ └── component
│ │ │ └── app
│ │ │ ├── MainActivity.kt
│ │ │ ├── component
│ │ │ ├── bar
│ │ │ │ └── SideBarSample.kt
│ │ │ ├── chart
│ │ │ │ ├── CircularChartIndicatorSample.kt
│ │ │ │ ├── HorizontalChartIndicatorSample.kt
│ │ │ │ └── VerticalChartIndicatorSample.kt
│ │ │ ├── dialog
│ │ │ │ └── AnimatedDialogSample.kt
│ │ │ └── text
│ │ │ │ └── TextFieldSample.kt
│ │ │ └── navigation
│ │ │ ├── NavGraph.kt
│ │ │ └── Route.kt
│ └── res
│ │ ├── drawable-v24
│ │ └── ic_launcher_foreground.xml
│ │ ├── drawable-xxhdpi
│ │ └── logo.png
│ │ ├── drawable
│ │ └── ic_launcher_background.xml
│ │ ├── mipmap-anydpi-v26
│ │ ├── ic_launcher.xml
│ │ └── ic_launcher_round.xml
│ │ ├── mipmap-hdpi
│ │ ├── ic_launcher.webp
│ │ └── ic_launcher_round.webp
│ │ ├── mipmap-mdpi
│ │ ├── ic_launcher.webp
│ │ └── ic_launcher_round.webp
│ │ ├── mipmap-xhdpi
│ │ ├── ic_launcher.webp
│ │ └── ic_launcher_round.webp
│ │ ├── mipmap-xxhdpi
│ │ ├── ic_launcher.webp
│ │ └── ic_launcher_round.webp
│ │ ├── mipmap-xxxhdpi
│ │ ├── ic_launcher.webp
│ │ └── ic_launcher_round.webp
│ │ ├── values
│ │ ├── colors.xml
│ │ ├── strings.xml
│ │ └── themes.xml
│ │ └── xml
│ │ ├── backup_rules.xml
│ │ └── data_extraction_rules.xml
│ └── test
│ └── java
│ └── com
│ └── king
│ └── compose
│ └── component
│ └── app
│ └── ExampleUnitTest.kt
├── art
├── AnimatedDialogSamplePreview.gif
├── CircularChartIndicatorSamplePreview.png
├── HorizontalCharIndicatorSamplePreview.png
├── SideBarSamplePreview.png
├── TextFieldSamplePreview.png
├── VerticalChartIndicatorSamplePreview.png
└── compose-component.gif
├── build.gradle
├── build_docs.sh
├── component
├── .gitignore
├── build.gradle
├── consumer-rules.pro
├── gradle.properties
├── proguard-rules.pro
└── src
│ ├── androidTest
│ └── java
│ │ └── com
│ │ └── king
│ │ └── compose
│ │ └── component
│ │ └── ExampleInstrumentedTest.kt
│ ├── main
│ ├── AndroidManifest.xml
│ └── java
│ │ └── com
│ │ └── king
│ │ └── compose
│ │ └── component
│ │ ├── bar
│ │ └── SideBar.kt
│ │ ├── chart
│ │ ├── CircularChartIndicator.kt
│ │ ├── HorizontalChartIndicator.kt
│ │ └── VerticalChartIndicator.kt
│ │ ├── dialog
│ │ └── AnimatedDialog.kt
│ │ └── text
│ │ └── TextField.kt
│ └── test
│ └── java
│ └── com
│ └── king
│ └── compose
│ └── component
│ └── ExampleUnitTest.kt
├── gradle.properties
├── gradle
└── wrapper
│ ├── gradle-wrapper.jar
│ └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
├── jitpack.yml
├── mkdocs.yml
├── settings.gradle
└── versions.gradle
/.circleci/config.yml:
--------------------------------------------------------------------------------
1 | version: 2.1
2 |
3 | orbs:
4 | android: circleci/android@2.4.0
5 |
6 | jobs:
7 | build:
8 | docker:
9 | - image: cimg/android:2023.08
10 | steps:
11 | - checkout
12 | - run:
13 | command: ./gradlew build
14 |
15 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = space
5 | indent_size = 4
6 | charset = utf-8
7 | trim_trailing_whitespace = true
8 | insert_final_newline = true
9 |
10 | [*.{kt, kts}]
11 | ij_kotlin_imports_layout = *
--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
1 | name: build
2 |
3 | on:
4 | push:
5 | branches: [ master ]
6 | pull_request:
7 | branches: [ master ]
8 |
9 | jobs:
10 | build:
11 | runs-on: ubuntu-latest
12 |
13 | steps:
14 | - uses: actions/checkout@v2
15 | - name: Set up JDK 17
16 | uses: actions/setup-java@v1
17 | with:
18 | java-version: 17
19 | - name: Build with Gradle
20 | run: ./gradlew build
21 |
--------------------------------------------------------------------------------
/.github/workflows/docs.yml:
--------------------------------------------------------------------------------
1 | name: docs
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 |
8 | env:
9 | JAVA_VERSION: 17
10 | PYTHON_VERSION: 3.x
11 | GRADLE_OPTS: "-Dorg.gradle.jvmargs=-Xmx4g -Dorg.gradle.daemon=false -Dkotlin.incremental=false"
12 |
13 | permissions:
14 | contents: write
15 | id-token: write
16 | pages: write
17 |
18 | jobs:
19 | docs:
20 | environment:
21 | name: github-pages
22 | url: ${{ steps.deployment.outputs.page_url }}
23 | runs-on: ubuntu-latest
24 | if: github.ref == 'refs/heads/master'
25 |
26 | steps:
27 | - name: Checkout
28 | uses: actions/checkout@v4
29 | with:
30 | fetch-depth: 0
31 |
32 | - name: Configure JDK
33 | uses: actions/setup-java@v4
34 | with:
35 | distribution: 'zulu'
36 | java-version: ${{ env.JAVA_VERSION }}
37 |
38 | - name: Install Python
39 | uses: actions/setup-python@v5
40 | with:
41 | python-version: ${{ env.PYTHON_VERSION }}
42 |
43 | - name: Install MkDocs Material
44 | run: pip install mkdocs-material
45 |
46 | - name: Generate Docs
47 | run: ./build_docs.sh
48 |
49 | - name: Upload to GitHub Pages
50 | uses: actions/upload-pages-artifact@v3
51 | with:
52 | path: site
53 |
54 | - name: Deploy to GitHub Pages
55 | id: deployment
56 | uses: actions/deploy-pages@v4
57 |
--------------------------------------------------------------------------------
/.github/workflows/issues-stale.yml:
--------------------------------------------------------------------------------
1 | name: 'Close stale issues and PRs'
2 | on:
3 | schedule:
4 | - cron: '0 16 * * *'
5 |
6 | jobs:
7 | stale:
8 | runs-on: ubuntu-latest
9 | permissions:
10 | issues: write
11 | pull-requests: write
12 | steps:
13 | - uses: actions/stale@v5
14 | with:
15 | stale-issue-message: 'This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.'
16 | days-before-stale: 30
17 | days-before-close: 5
18 | exempt-all-pr-milestones: true
19 | exempt-issue-labels: 'help wanted'
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.iml
2 | .gradle
3 | /local.properties
4 | /.idea
5 | .DS_Store
6 | /build
7 | /captures
8 | .externalNativeBuild
9 | .cxx
10 | local.properties
11 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## 版本日志
2 |
3 | #### v1.1.0:2024-1-21
4 | * 新增`AnimatedDialog`(动画对话框:主要是在`Dialog`的基础之上增加了可见性过渡动画,并解决`Dialog`的宽度显示问题)
5 |
6 | #### v1.0.0:2023-9-3
7 | * compose-component初始版本
8 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2023 Jenly Yu
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Compose Component
2 |
3 | [](https://repo1.maven.org/maven2/com/github/jenly1314/compose-component)
4 | [](https://jitpack.io/#jenly1314/compose-component)
5 | [](https://github.com/jenly1314/compose-component/actions/workflows/build.yml)
6 | [](https://raw.githubusercontent.com/jenly1314/compose-component/master/app/release/app-release.apk)
7 | [](https://developer.android.com/guide/topics/manifest/uses-sdk-element#ApiLevels)
8 | [](https://opensource.org/licenses/mit)
9 |
10 |
11 | compose-component 是一个Jetpack Compose的组件库;主要提供了一些小组件,便于快速使用。
12 |
13 | ## 效果展示
14 |
15 | 
16 |
17 | > 你也可以直接下载 [演示App](https://raw.githubusercontent.com/jenly1314/compose-component/master/app/release/app-release.apk) 体验效果
18 |
19 | ## 引入
20 |
21 | ### Gradle:
22 |
23 | 1. 在Project的 **build.gradle** 或 **setting.gradle** 中添加远程仓库
24 |
25 | ```gradle
26 | repositories {
27 | //...
28 | mavenCentral()
29 | }
30 | ```
31 |
32 | 2. 在Module的 **build.gradle** 中添加依赖项
33 |
34 | ```gradle
35 | implementation 'com.github.jenly1314:compose-component:1.1.0'
36 | ```
37 |
38 | ## 使用说明
39 |
40 | **compose** 组件的使用大都比较直观,一般只需看一下 Composable 函数对应的参数说明基本就会使用了。
41 |
42 | > 如果通过参数还是没太看懂怎么用的,你也可以通过直接看下面各个组件对应的代码示例来加深理解。
43 |
44 | ### 组件说明
45 |
46 | 这里列一下目前 **compose-component** 所包含的一些组件,方便快速查找。
47 |
48 | | 组件名称 | 组件说明 | 组件使用示例 | 组件示例效果图 |
49 | |:-------------------------|:------------|:-----------------------------------------------------------------------------------------------------------|:----------------------------------------------------|
50 | | CircularChartIndicator | 圆形图表指示器 | [代码示例](app/src/main/java/com/king/compose/component/app/component/chart/CircularChartIndicatorSample.kt) | [示例图](art/CircularChartIndicatorSamplePreview.png) |
51 | | HorizontalChartIndicator | 水平图表指示器 | [代码示例](app/src/main/java/com/king/compose/component/app/component/chart/HorizontalChartIndicatorSample.kt) | [示例图](art/HorizontalCharIndicatorSamplePreview.png) |
52 | | VerticalChartIndicator | 垂直图表指示器 | [代码示例](app/src/main/java/com/king/compose/component/app/component/chart/VerticalChartIndicatorSample.kt) | [示例图](art/VerticalChartIndicatorSamplePreview.png) |
53 | | TextField | 文本输入框(正则限制) | [代码示例](app/src/main/java/com/king/compose/component/app/component/text/TextFieldSample.kt) | [示例图](art/TextFieldSamplePreview.png) |
54 | | SideBar | 字母索引侧边栏 | [代码示例](app/src/main/java/com/king/compose/component/app/component/bar/SideBarSample.kt) | [示例图](art/SideBarSamplePreview.png) |
55 | | AnimatedDialog | 动画对话框 | [代码示例](app/src/main/java/com/king/compose/component/app/component/dialog/AnimatedDialogSample.kt) | [示例图](art/AnimatedDialogSamplePreview.gif) |
56 |
57 | > 后续会根据需求场景,不定期补充各种小组件。
58 |
59 | 更多使用详情,请查看[app](app)中的源码使用示例或直接查看 [API帮助文档](https://jenly1314.github.io/compose-component/api/)
60 |
61 | ## 相关推荐
62 | - [UltraSwipeRefresh](https://github.com/jenly1314/UltraSwipeRefresh)一个可带来极致体验的 Compose 刷新组件;支持下拉刷新和上拉加载,可完美替代官方的 **SwipeRefresh** ;并且支持的功能更多,可扩展性更强。
63 | - [CodeTextField](https://github.com/jenly1314/CodeTextField)一个使用 Compose 实现的验证码输入框。
64 | - [SplitEditText](https://github.com/jenly1314/SplitEditText)一个灵活的分割编辑框。常常应用于验证码输入、密码输入、等场景。
65 | - [SpinCounterView](https://github.com/jenly1314/SpinCounterView) 一个类似码表变化的旋转计数器动画控件。
66 | - [CounterView](https://github.com/jenly1314/CounterView) 一个数字变化效果的计数器视图控件。
67 | - [RadarView](https://github.com/jenly1314/RadarView) 一个雷达扫描动画后,然后展示得分效果的控件。
68 | - [SuperTextView](https://github.com/jenly1314/SuperTextView) 一个在TextView的基础上扩展了几种动画效果的控件。
69 | - [LoadingView](https://github.com/jenly1314/LoadingView) 一个圆弧加载过渡动画,圆弧个数,大小,弧度,渐变颜色,完全可配。
70 | - [WaveView](https://github.com/jenly1314/WaveView) 一个水波纹动画控件视图,支持波纹数,波纹振幅,波纹颜色,波纹速度,波纹方向等属性完全可配。
71 | - [GiftSurfaceView](https://github.com/jenly1314/GiftSurfaceView) 一个适用于直播间送礼物拼图案的动画控件。
72 | - [FlutteringLayout](https://github.com/jenly1314/FlutteringLayout) 一个适用于直播间点赞桃心飘动效果的控件。
73 | - [DragPolygonView](https://github.com/jenly1314/DragPolygonView) 一个支持可拖动多边形,支持通过拖拽多边形的角改变其形状的任意多边形控件。
74 | - [CircleProgressView](https://github.com/jenly1314/CircleProgressView) 一个圆形的进度动画控件,动画效果纵享丝滑。
75 | - [ArcSeekBar](https://github.com/jenly1314/ArcSeekBar) 一个弧形的拖动条进度控件,配置参数完全可定制化。
76 | - [DrawBoard](https://github.com/jenly1314/DrawBoard) 一个自定义View实现的画板;方便对图片进行编辑和各种涂鸦相关操作。
77 | - [ImageViewer](https://github.com/jenly1314/ImageViewer) 一个图片查看器,一般用来查看图片详情或查看大图时使用。
78 |
79 |
80 |
81 | ## 版本日志
82 |
83 | #### v1.1.0:2024-1-21
84 | * 新增`AnimatedDialog`(动画对话框:主要是在`Dialog`的基础之上增加了可见性过渡动画,并解决`Dialog`的宽度显示问题)
85 |
86 | #### [查看更多版本日志](CHANGELOG.md)
87 |
88 | ---
89 |
90 | 
91 |
--------------------------------------------------------------------------------
/app/.gitignore:
--------------------------------------------------------------------------------
1 | /build
--------------------------------------------------------------------------------
/app/build.gradle:
--------------------------------------------------------------------------------
1 | plugins {
2 | id 'com.android.application'
3 | id 'org.jetbrains.kotlin.android'
4 | }
5 |
6 | android {
7 | namespace 'com.king.compose.component.app'
8 | compileSdk build_versions.compileSdk
9 |
10 | defaultConfig {
11 | applicationId "com.king.compose.component.app"
12 | minSdk build_versions.minSdk
13 | targetSdk build_versions.targetSdk
14 | versionCode app_version.versionCode
15 | versionName app_version.versionName
16 |
17 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
18 | vectorDrawables {
19 | useSupportLibrary true
20 | }
21 | }
22 |
23 | buildTypes {
24 | release {
25 | minifyEnabled false
26 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
27 | }
28 | }
29 | compileOptions {
30 | sourceCompatibility JavaVersion.VERSION_11
31 | targetCompatibility JavaVersion.VERSION_11
32 | }
33 | kotlinOptions {
34 | jvmTarget = JavaVersion.VERSION_11.toString()
35 | }
36 | buildFeatures {
37 | compose true
38 | }
39 | composeOptions {
40 | kotlinCompilerExtensionVersion '1.4.3'
41 | }
42 | packagingOptions {
43 | resources {
44 | excludes += '/META-INF/{AL2.0,LGPL2.1}'
45 | }
46 | }
47 | }
48 |
49 | dependencies {
50 |
51 | implementation "androidx.core:core-ktx:$versions.core_ktx"
52 | implementation "androidx.lifecycle:lifecycle-runtime-ktx:$versions.lifecycle_runtime_ktx"
53 | implementation "androidx.activity:activity-compose:$versions.activity_compose"
54 | implementation platform("androidx.compose:compose-bom:$versions.compose_bom")
55 | implementation "androidx.compose.ui:ui"
56 | implementation "androidx.compose.ui:ui-graphics"
57 | implementation "androidx.compose.ui:ui-tooling-preview"
58 | implementation "androidx.compose.material:material"
59 | implementation "androidx.navigation:navigation-compose:$versions.navigation_compose"
60 |
61 | testImplementation "junit:junit:$versions.junit"
62 | androidTestImplementation "androidx.test.ext:junit:$versions.android_ext_junit"
63 | androidTestImplementation "androidx.test.espresso:espresso-core:$versions.espresso"
64 |
65 | debugImplementation 'androidx.compose.ui:ui-tooling'
66 | debugImplementation 'androidx.compose.ui:ui-test-manifest'
67 |
68 | implementation project(":component")
69 |
70 |
71 | }
--------------------------------------------------------------------------------
/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # You can control the set of applied configuration files using the
3 | # proguardFiles setting in build.gradle.
4 | #
5 | # For more details, see
6 | # http://developer.android.com/guide/developing/tools/proguard.html
7 |
8 | # If your project uses WebView with JS, uncomment the following
9 | # and specify the fully qualified class name to the JavaScript interface
10 | # class:
11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview {
12 | # public *;
13 | #}
14 |
15 | # Uncomment this to preserve the line number information for
16 | # debugging stack traces.
17 | #-keepattributes SourceFile,LineNumberTable
18 |
19 | # If you keep the line number information, uncomment this to
20 | # hide the original source file name.
21 | #-renamesourcefileattribute SourceFile
--------------------------------------------------------------------------------
/app/release/app-release.apk:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jenly1314/compose-component/402c614f97840d66d1a3160974c2cddbf48b93de/app/release/app-release.apk
--------------------------------------------------------------------------------
/app/release/output-metadata.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "artifactType": {
4 | "type": "APK",
5 | "kind": "Directory"
6 | },
7 | "applicationId": "com.king.compose.component.app",
8 | "variantName": "release",
9 | "elements": [
10 | {
11 | "type": "SINGLE",
12 | "filters": [],
13 | "attributes": [],
14 | "versionCode": 2,
15 | "versionName": "1.1.0",
16 | "outputFile": "app-release.apk"
17 | }
18 | ],
19 | "elementType": "File"
20 | }
--------------------------------------------------------------------------------
/app/src/androidTest/java/com/king/compose/component/app/ExampleInstrumentedTest.kt:
--------------------------------------------------------------------------------
1 | package com.king.compose.component.app
2 |
3 | import androidx.test.platform.app.InstrumentationRegistry
4 | import androidx.test.ext.junit.runners.AndroidJUnit4
5 |
6 | import org.junit.Test
7 | import org.junit.runner.RunWith
8 |
9 | import org.junit.Assert.*
10 |
11 | /**
12 | * Instrumented test, which will execute on an Android device.
13 | *
14 | * See [testing documentation](http://d.android.com/tools/testing).
15 | */
16 | @RunWith(AndroidJUnit4::class)
17 | class ExampleInstrumentedTest {
18 | @Test
19 | fun useAppContext() {
20 | // Context of the app under test.
21 | val appContext = InstrumentationRegistry.getInstrumentation().targetContext
22 | assertEquals("com.king.compose.component.app", appContext.packageName)
23 | }
24 | }
--------------------------------------------------------------------------------
/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
15 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/app/src/main/java/com/king/compose/component/app/MainActivity.kt:
--------------------------------------------------------------------------------
1 | package com.king.compose.component.app
2 |
3 | import android.os.Bundle
4 | import androidx.activity.ComponentActivity
5 | import androidx.activity.compose.setContent
6 | import androidx.compose.foundation.clickable
7 | import androidx.compose.foundation.layout.Box
8 | import androidx.compose.foundation.layout.Column
9 | import androidx.compose.foundation.layout.fillMaxSize
10 | import androidx.compose.foundation.layout.fillMaxWidth
11 | import androidx.compose.foundation.layout.padding
12 | import androidx.compose.foundation.lazy.LazyColumn
13 | import androidx.compose.foundation.lazy.items
14 | import androidx.compose.material.Divider
15 | import androidx.compose.material.LocalTextStyle
16 | import androidx.compose.material.MaterialTheme
17 | import androidx.compose.material.Text
18 | import androidx.compose.material.TopAppBar
19 | import androidx.compose.runtime.Composable
20 | import androidx.compose.ui.Alignment
21 | import androidx.compose.ui.Modifier
22 | import androidx.compose.ui.graphics.Color
23 | import androidx.compose.ui.tooling.preview.Preview
24 | import androidx.compose.ui.unit.dp
25 | import androidx.navigation.NavController
26 | import androidx.navigation.compose.NavHost
27 | import androidx.navigation.compose.currentBackStackEntryAsState
28 | import androidx.navigation.compose.rememberNavController
29 | import com.king.compose.component.app.navigation.Route
30 | import com.king.compose.component.app.navigation.navGraph
31 |
32 | /**
33 | * @author Jenly
34 | *
35 | * Follow me
36 | */
37 | class MainActivity : ComponentActivity() {
38 |
39 | override fun onCreate(savedInstanceState: Bundle?) {
40 | super.onCreate(savedInstanceState)
41 | setContent {
42 | MainScreen()
43 | }
44 | }
45 | }
46 |
47 | /**
48 | * 主页
49 | */
50 | @Composable
51 | fun MainScreen() {
52 | MaterialTheme {
53 | Column(modifier = Modifier.fillMaxSize()) {
54 | val navController = rememberNavController()
55 |
56 | Box(
57 | modifier = Modifier.fillMaxWidth(),
58 | contentAlignment = Alignment.CenterStart
59 | ) {
60 | var route = navController.currentBackStackEntryAsState().value?.destination?.route
61 | TopAppBar(backgroundColor = Color(0xFF3CDB84), title = {
62 | Text(
63 | text = route ?: Route.Components.name,
64 | style = LocalTextStyle.current.copy(color = Color.White),
65 | )
66 | })
67 | }
68 | NavHost(
69 | navController = navController,
70 | startDestination = Route.Components.name
71 | ) {
72 | navGraph(navController)
73 | }
74 | }
75 | }
76 | }
77 |
78 | /**
79 | * 组件列表页
80 | */
81 | @Composable
82 | fun ComponentScreen(navController: NavController) {
83 | LazyColumn(modifier = Modifier.fillMaxSize()) {
84 | items(Route.values().filter { it != Route.Components }) {
85 | Text(
86 | text = it.name,
87 | style = LocalTextStyle.current.copy(color = Color.DarkGray),
88 | modifier = Modifier
89 | .fillParentMaxWidth()
90 | .clickable {
91 | navController.navigate(route = it.name)
92 | }
93 | .padding(horizontal = 16.dp, vertical = 16.dp)
94 | )
95 | Divider(modifier = Modifier.padding(horizontal = 16.dp), thickness = 0.5.dp)
96 | }
97 | }
98 | }
99 |
100 | @Preview(showBackground = true)
101 | @Composable
102 | fun MainScreenPreview() {
103 | MainScreen()
104 | }
--------------------------------------------------------------------------------
/app/src/main/java/com/king/compose/component/app/component/bar/SideBarSample.kt:
--------------------------------------------------------------------------------
1 | package com.king.compose.component.app.component.bar
2 |
3 | import androidx.compose.foundation.ExperimentalFoundationApi
4 | import androidx.compose.foundation.background
5 | import androidx.compose.foundation.layout.Box
6 | import androidx.compose.foundation.layout.fillMaxSize
7 | import androidx.compose.foundation.layout.fillMaxWidth
8 | import androidx.compose.foundation.layout.padding
9 | import androidx.compose.foundation.lazy.LazyColumn
10 | import androidx.compose.foundation.lazy.rememberLazyListState
11 | import androidx.compose.material.Text
12 | import androidx.compose.runtime.Composable
13 | import androidx.compose.runtime.getValue
14 | import androidx.compose.runtime.mutableStateOf
15 | import androidx.compose.runtime.remember
16 | import androidx.compose.runtime.rememberCoroutineScope
17 | import androidx.compose.ui.Alignment
18 | import androidx.compose.ui.Modifier
19 | import androidx.compose.ui.graphics.Color
20 | import androidx.compose.ui.tooling.preview.Preview
21 | import androidx.compose.ui.unit.dp
22 | import com.king.compose.component.bar.SideBar
23 | import kotlinx.coroutines.launch
24 | import java.util.Random
25 |
26 | /**
27 | * SideBar 示例
28 | *
29 | * @author Jenly
30 | *
31 | * Follow me
32 | */
33 | @OptIn(ExperimentalFoundationApi::class)
34 | @Composable
35 | fun SideBarSample() {
36 | val chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ#".toCharArray()
37 | val list by remember {
38 | val tempList = mutableListOf>()
39 | val random = Random()
40 | chars.forEach { char ->
41 | val count = random.nextInt(10) + 1
42 | // 随机构造一些数据
43 | repeat(count) {
44 | tempList.add(Pair(char.toString(), "$char$it"))
45 | }
46 | }
47 | mutableStateOf>>(tempList)
48 | }
49 |
50 | val positionMap by remember {
51 | val tempMap = mutableMapOf()
52 | list.forEachIndexed { index, pair ->
53 | val key = pair.first
54 | if (!tempMap.containsKey(key)) {
55 | tempMap[key] = index
56 | }
57 | }
58 | mutableStateOf