{"id":29278012,"url":"https://github.com/ltttttttttttt/composeviews","last_synced_at":"2026-01-18T11:48:10.175Z","repository":{"id":41055646,"uuid":"370338027","full_name":"ltttttttttttt/ComposeViews","owner":"ltttttttttttt","description":"Compose Multiplatform views, in to Android, Web, Desktop, iOS: Pager, Banner, Indicator, Refresh Layout, Flow Layout, Menu Floating Action Button, Pull To Refresh, Chain Scrollable Component, Scrollable App Bar(Nested Scroll View),Date Selector(Time Selector Date Picker), Swipe To Dismiss, Image viewer, ZoomLayout, Star Bar and more","archived":false,"fork":false,"pushed_at":"2025-07-01T03:35:22.000Z","size":28533,"stargazers_count":505,"open_issues_count":3,"forks_count":37,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-07-01T04:30:42.508Z","etag":null,"topics":["android","banner","compose","compose-jb","compose-multiplatform","dateselector","desktop","flowlayout","image-viewer","ios","jetpack-compose","kmm","kmp","pager","starbar","timeselector","viewpager","wasm","web","zoomlayout"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ltttttttttttt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-05-24T12:05:00.000Z","updated_at":"2025-07-01T03:35:25.000Z","dependencies_parsed_at":"2023-10-15T06:02:25.465Z","dependency_job_id":"2e7cf0ec-083f-449c-bc36-cd89867942d2","html_url":"https://github.com/ltttttttttttt/ComposeViews","commit_stats":null,"previous_names":[],"tags_count":81,"template":false,"template_full_name":null,"purl":"pkg:github/ltttttttttttt/ComposeViews","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ltttttttttttt%2FComposeViews","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ltttttttttttt%2FComposeViews/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ltttttttttttt%2FComposeViews/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ltttttttttttt%2FComposeViews/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ltttttttttttt","download_url":"https://codeload.github.com/ltttttttttttt/ComposeViews/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ltttttttttttt%2FComposeViews/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263723228,"owners_count":23501500,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","banner","compose","compose-jb","compose-multiplatform","dateselector","desktop","flowlayout","image-viewer","ios","jetpack-compose","kmm","kmp","pager","starbar","timeselector","viewpager","wasm","web","zoomlayout"],"created_at":"2025-07-05T10:04:13.410Z","updated_at":"2026-01-18T11:48:10.164Z","avatar_url":"https://github.com/ltttttttttttt.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eComposeViews\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eApplicable to Compose-multiplatform(Jetpack), Supported targets: Android, iOS, Web(js, Wasm js), Desktop(Windows, Linux, macOS)\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/Kotlin-Multiplatform-%237f52ff?logo=kotlin\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/license-Apache%202-blue.svg?maxAge=2592000\"\u003e\n\u003cimg src=\"https://img.shields.io/maven-central/v/io.github.ltttttttttttt/ComposeViews\"/\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003eus English | \u003ca href=\"https://github.com/ltttttttttttt/ComposeViews/blob/main/README_CN.md\"\u003ecn 简体中文\u003c/a\u003e | \u003ca href=\"https://sakurajimamaii.github.io/ComposeViewsDocs/\"\u003edetailed documentation\u003c/a\u003e\u003c/div\u003e\n\n## Views:\n\n1. ComposePager\n2. Banner\n3. PagerIndicator\n4. ImageBanner\n5. RefreshLayout + PullToRefresh + VerticalRefreshableLayout\n6. FlowLayout\n7. ValueSelector + DateSelector\n8. MenuFloatingActionButton\n9. ChainScrollableComponent + ScrollableAppBar + SwipeToDismiss\n\n\u003ca href=\"https://github.com/ltttttttttttt/ComposeViews/blob/main/md_resource/compose_views_demo.apk\"\u003e\nView demo.apk\u003c/a\u003e\n\n[![Star History Chart](https://api.star-history.com/svg?repos=ltttttttttttt/ComposeViews\u0026type=Date)](https://star-history.com/#ltttttttttttt/ComposeViews\u0026Date)\n\n## Version support\n\n\u003ctable broder=\"1\"\u003e\n\u003ctr\u003e\u003ctd\u003eComposeViews version\u003c/td\u003e\u003ctd\u003ejetpack compose version\u003c/td\u003e\u003ctd\u003ecompose-multiplatform version\u003c/td\u003e\u003ctd\u003ekotlin version\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003cimg src=\"https://img.shields.io/maven-central/v/io.github.ltttttttttttt/ComposeViews\"/\u003e\u003c/td\u003e\u003ctd\u003e1.9.0\u003c/td\u003e\u003ctd\u003e1.9.0\u003c/td\u003e\u003ctd\u003e2.1.10+\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e1.8.0.1\u003c/td\u003e\u003ctd\u003e1.8.0\u003c/td\u003e\u003ctd\u003e1.8.0\u003c/td\u003e\u003ctd\u003e2.1.10+\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e1.7.0.3\u003c/td\u003e\u003ctd\u003e1.7.1\u003c/td\u003e\u003ctd\u003e1.7.0\u003c/td\u003e\u003ctd\u003e2.0.0+\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e1.6.11.4\u003c/td\u003e\u003ctd\u003e1.6.7\u003c/td\u003e\u003ctd\u003e1.6.11\u003c/td\u003e\u003ctd\u003e2.0.0+\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e1.6.0.4\u003c/td\u003e\u003ctd\u003e1.6.1\u003c/td\u003e\u003ctd\u003e1.6.0\u003c/td\u003e\u003ctd\u003e1.9.22\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e1.5.10.5\u003c/td\u003e\u003ctd\u003e1.5.4\u003c/td\u003e\u003ctd\u003e1.5.10\u003c/td\u003e\u003ctd\u003e1.9.20\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e1.5.1.5\u003c/td\u003e\u003ctd\u003e1.5.0\u003c/td\u003e\u003ctd\u003e1.5.1\u003c/td\u003e\u003ctd\u003e1.9.0\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e1.5.0.3\u003c/td\u003e\u003ctd\u003e1.5.0\u003c/td\u003e\u003ctd\u003e1.5.0\u003c/td\u003e\u003ctd\u003e1.9.0\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e1.4.0.14\u003c/td\u003e\u003ctd\u003e1.4.0\u003c/td\u003e\u003ctd\u003e1.4.0\u003c/td\u003e\u003ctd\u003e1.8.20\u003c/td\u003e\u003c/tr\u003e\n\u003c/table\u003e\n\n## Add to your project\n\nYour app or common dir, build.gradle.kts add:\n\nversion\n= [![](https://img.shields.io/maven-central/v/io.github.ltttttttttttt/ComposeViews)](https://repo1.maven.org/maven2/io/github/ltttttttttttt/ComposeViews/)\n\n```kotlin\ndependencies {\n    ...\n    implementation(\"io.github.ltttttttttttt:ComposeViews:$version\")//this, such as 1.6.11.2\n}\n```\n\n## ComposePager\n\n\u003cdiv align=center\u003e\n    \u003cimg src=\"md_resource/compose_pager.gif\" width=25%\u003e\n    \u003cimg src=\"md_resource/compose_pager_transformation.png\" width=45%\u003e\n\u003c/div\u003e\n\n\u003ca href=\"https://github.com/ltttttttttttt/ComposeViews/blob/main/common_app/src/commonMain/kotlin/com/lt/common_app/ComposePagerActivity.kt\"\u003e\nsample\u003c/a\u003e\n\u003ca href=\"https://github.com/ltttttttttttt/ComposeViews/blob/main/common_app/src/commonMain/kotlin/com/lt/common_app/ContentPaddingA.kt\"\u003e\nsample\u003c/a\u003e\n\n```kotlin\n/**\n * Pager (Equivalent to the ViewPager in android)\n * @param pageCount Sum page count\n * @param modifier\n * @param composePagerState ComposePager's state\n * @param orientation Scroll orientation\n * @param userEnable Whether the user can scroll\n * @param pageCache The number of pagers cached on the left and right sides\n * @param scrollableInteractionSource Scroll state monitor\n * @param pagerKey Using key to improve performance, reduce recombination, and achieve the same effect as [LazyColumn#items#key]\n * @param clip Whether to crop the content area\n * @param contentTransformation Transform the Content of ComposePager\n * @param content Content of compose\n */\n@Composable\nfun ComposePager()\n```\n\n## Banner\n\n\u003ca href=\"https://github.com/ltttttttttttt/ComposeViews/blob/main/common_app/src/commonMain/kotlin/com/lt/common_app/BannerActivity.kt\"\u003e\nsample\u003c/a\u003e\n\n```kotlin\n/**\n * [ComposePager] that can auto scroll\n * @param pageCount Sum page count\n * @param modifier\n * @param bannerState Banner's state\n * @param orientation Scroll orientation\n * @param userEnable Whether the user can scroll\n * @param autoScroll Whether to scroll automatically\n * @param autoScrollTime Auto scroll interval\n * @param bannerKey Using key to improve performance, reduce recombination, and achieve the same effect as [LazyColumn#items#key]\n * @param clip Whether to crop the content area\n * @param contentTransformation Transform the Content of ComposePager\n * @param content Content of compose\n */\n@Composable\nfun Banner()\n```\n\n## PagerIndicator\n\n\u003cdiv align=center\u003e\u003cimg src=\"md_resource/image_banner.gif\" width=50%\u003e\u003c/div\u003e\n\n\u003cdiv align=center\u003e\u003cimg src=\"md_resource/text_pager_indicator.gif\" width=50%\u003e\u003c/div\u003e\n\n\u003ca href=\"https://github.com/ltttttttttttt/ComposeViews/blob/main/common_app/src/commonMain/kotlin/com/lt/common_app/PagerIndicatorActivity.kt\"\u003e\nsample\u003c/a\u003e\n\n\u003ca href=\"https://github.com/ltttttttttttt/ComposeViews/blob/main/common_app/src/commonMain/kotlin/com/lt/common_app/TextPagerIndicatorActivity.kt\"\u003e\nsample\u003c/a\u003e\n\n```kotlin\n/**\n * Indicator for pager\n * @param size Number of indicator\n * @param offsetPercentWithSelectFlow The offset percentage of the selected indicator\n * @param selectIndexFlow The index of selected indicator\n * @param indicatorItem The indicator\n * @param selectIndicatorItem The selected indicator\n * @param modifier\n * @param margin Spacing between indicators\n * @param orientation Orientation of indicators\n * @param userCanScroll Whether the user can scroll\n */\n@Composable\nfun PagerIndicator()\n\n/**\n * Text indicator for pager\n * @param texts The text list\n * @param offsetPercentWithSelectFlow The offset percentage of the selected indicator\n * @param selectIndexFlow The index of selected indicator\n * @param fontSize Font size of the text indicator\n * @param selectFontSize Font size of the selected text indicator\n * @param textColor Font color of the text indicator\n * @param selectTextColor Font color of the selected text indicator\n * @param selectIndicatorColor Color of the indicator\n * @param onIndicatorClick Click event of the text indicator\n * @param modifier\n * @param margin Spacing between the text indicators\n * @param userCanScroll Whether the user can scroll\n */\n@Composable\nfun TextPagerIndicator()\n```\n\n## ImageBanner\n\n\u003ca href=\"https://github.com/ltttttttttttt/ComposeViews/blob/main/common_app/src/commonMain/kotlin/com/lt/common_app/PagerIndicatorActivity.kt\"\u003e\nsample\u003c/a\u003e\n\n```kotlin\n/**\n * [Banner] showing images\n * @param imageSize Number of images\n * @param imageContent Content of the images\n * @param indicatorItem The indicator, if null, do not display indicator\n * @param selectIndicatorItem The indicator, if null, do not display indicator\n * @param modifier\n * @param bannerState Banner's state\n * @param orientation Orientation of indicators\n * @param autoScroll Whether to scroll automatically\n * @param autoScrollTime Auto scroll interval\n * @param bannerKey Using key to improve performance, reduce recombination, and achieve the same effect as [LazyColumn#items#key]\n * @param clip Whether to crop the content area\n * @param contentTransformation Transform the Content of ComposePager\n */\n@Composable\nfun ImageBanner()\n```\n\n## RefreshLayout\n\n\u003cdiv align=center\u003e\u003cimg src=\"md_resource/refresh_layout.gif\" width=30%\u003e\u003c/div\u003e\n\n\u003ca href=\"https://github.com/ltttttttttttt/ComposeViews/blob/main/common_app/src/commonMain/kotlin/com/lt/common_app/RefreshLayoutActivity.kt\"\u003e\nsample\u003c/a\u003e\n\n```kotlin\n/**\n * The refreshed container can be dragged in any direction\n * @param refreshContent Refreshed content area\n * @param refreshLayoutState State of the [RefreshLayout]\n * @param modifier\n * @param refreshContentThreshold Refresh threshold for layout dragging\n * @param composePosition Set where the refreshed layout is located\n * @param contentIsMove Whether the content component moves with it on refresh\n * @param dragEfficiency The 'efficiency' of dragging\n * @param isSupportCanNotScrollCompose Whether to support non-scrollable components\n * @param userEnable Whether the user can drag\n * @param refreshingCanScroll Can I scroll during refresh\n * @param content Content of compose\n */\n@Composable\nfun RefreshLayout()\n\n/**\n * Pull down to refresh\n * @param refreshLayoutState State of the [RefreshLayout]\n * @param modifier\n * @param refreshContent Refreshed content area\n * @param content Content of compose\n */\n@Composable\nfun PullToRefresh()\n\n/**\n * Pull down and up refresh components\n * @param topRefreshLayoutState State of the top of the [RefreshLayout]\n * @param bottomRefreshLayoutState State of the bottom of the [RefreshLayout]\n * @param modifier\n * @param topRefreshContent Refreshed content area of top\n * @param bottomIsLoadFinish Bottom is it loaded\n * @param bottomRefreshContent Refreshed content area of bottom\n * @param content Content of compose\n */\n@Composable\nfun VerticalRefreshableLayout()\n```\n\n## FlowLayout\n\n\u003cdiv align=center\u003e\u003cimg src=\"md_resource/flow_layout.png\" width=40%\u003e\u003c/div\u003e\n\n\u003ca href=\"https://github.com/ltttttttttttt/ComposeViews/blob/main/common_app/src/commonMain/kotlin/com/lt/common_app/FlowLayoutActivity.kt\"\u003e\nsample\u003c/a\u003e\n\n```kotlin\n/**\n * Linear layout with word wrapping\n * @param modifier\n * @param orientation Direction of arrangement\n * @param horizontalAlignment Alignment of horizontal\n * @param verticalAlignment Alignment of vertical\n * @param horizontalMargin Margin of horizontal\n * @param verticalMargin Margin of vertical\n * @param maxLines How many lines can be placed\n * @param content Content of compose\n */\n@Composable\nfun FlowLayout()\n\n/**\n * [FlowLayout] that can automatically determine the selected state\n */\n@Composable\nfun LabelsFlowLayout()\n```\n\n## ValueSelector and DateSelector\n\n\u003cdiv align=center\u003e\u003cimg src=\"md_resource/date_selector.gif\" width=30%\u003e\u003c/div\u003e\n\n\u003ca href=\"https://github.com/ltttttttttttt/ComposeViews/blob/main/common_app/src/commonMain/kotlin/com/lt/common_app/DateSelectorA.kt\"\u003e\nsample\u003c/a\u003e\n\n```kotlin\n/**\n * Date Selector\n * @param state DateSelector's state\n * @param modifier\n * @param isLoop Whether the value list is loop\n */\n@Composable\nfun DateSelector()\n\n/**\n * Value selector\n */\n@Composable\nfun ValueSelector()\n```\n\n## MenuFloatingActionButton\n\n\u003cdiv align=center\u003e\u003cimg src=\"md_resource/fab.gif\" width=20%\u003e\u003c/div\u003e\n\n\u003ca href=\"https://github.com/ltttttttttttt/ComposeViews/blob/main/common_app/src/commonMain/kotlin/com/lt/common_app/MenuFabActivity.kt\"\u003e\nsample\u003c/a\u003e\n\n```kotlin\n/**\n * Floating action button\n * @param icon Menu icon\n * @param label Menu text\n * @param srcIconColor Icon color\n * @param labelTextColor Label text color\n * @param labelBackgroundColor Background color of label text\n * @param fabBackgroundColor Background color of floating action button\n */\n@Composable\nfun MenuFloatingActionButton()\n```\n\n## ChainScrollableComponent\n\n\u003cdiv align=center\u003e\u003cimg src=\"md_resource/scrollable_app_bar.gif\" width=40%\u003e\u003c/div\u003e\n\n\u003cdiv align=center\u003e\u003cimg src=\"md_resource/swipe_to_dismiss.gif\" width=20%\u003e\u003c/div\u003e\n\n\u003ca href=\"https://github.com/ltttttttttttt/ComposeViews/blob/main/common_app/src/commonMain/kotlin/com/lt/common_app/ScrollableAppBarActivity.kt\"\u003e\nsample\u003c/a\u003e\n\n\u003ca href=\"https://github.com/ltttttttttttt/ComposeViews/blob/main/common_app/src/commonMain/kotlin/com/lt/common_app/SwipeToDismissActivity.kt\"\u003e\nsample\u003c/a\u003e\n\n```kotlin\n/**\n * Chain scrollable component\n * @param minScrollPosition Minimum scroll position\n * @param maxScrollPosition Maximum scroll position\n * @param chainContent Content of chain\n * @param modifier\n * @param onScrollStop Callback of scroll stop event\n * @param composePosition Set the position of the top bar layout\n * @param chainMode Chain mode\n * @param content Content of compose\n */\n@Composable\nfun ChainScrollableComponent()\n\n/**\n * Scalable top navigation bar\n * @param title Title of top bar\n * @param background Background of top bar\n * @param modifier\n * @param onScrollStop Callback of scroll stop event\n * @param minScrollPosition Minimum scroll position\n * @param maxScrollPosition Maximum scroll position\n * @param navigationIcon Icon of top bar\n * @param composePosition Set the position of the top bar layout\n * @param chainMode Chain mode\n * @param content Content of compose\n */\n@Composable\nfun ScrollableAppBar()\n\n/**\n * Swipe to delete controls\n * @param minScrollPosition Minimum scroll position\n * @param maxScrollPosition Maximum scroll position\n * @param backgroundContent Content of background\n * @param modifier\n * @param contentIsMove Does content follow\n * @param content Content of compose\n */\n@Composable\nfun SwipeToDismiss()\n```\n\n## More\n\n\u003cdiv align=center\u003e\u003cimg src=\"md_resource/star_bar.gif\" width=20%\u003e\u003c/div\u003e\n\n\u003cdiv align=center\u003e\u003cimg src=\"md_resource/text_field.png\" width=30%\u003e\u003c/div\u003e\n\n\u003cdiv align=center\u003e\u003cimg src=\"md_resource/image_viewer.gif\" width=30%\u003e\u003c/div\u003e\n\n```kotlin\n/**\n * Image viewer\n */\n@Composable\nfun ImageViewer()\n\n/**\n * Zoom layout\n */\n@Composable\nfun ZoomLayout()\n\n/**\n * Button without click effect\n */\n@Composable\nfun ButtonWithNotRipple()\n\n/**\n * Star bar\n */\n@Composable\nfun StarBar()\n\n/**\n * Progress bar\n */\n@Composable\nfun BasicsProgressBar()\n\n/**\n * More convenient and easy to use the [TextField]\n */\n@Composable\nfun GoodTextField()\n\n/**\n * More convenient and easy to use the [TextField], for entering passwords\n * Api is almost the same as the [GoodTextField]\n */\n@Composable\nfun PasswordTextField()\n\n/**\n * Offset by a percentage of its own width or height\n */\nfun Modifier.offsetPercent()\n\n/**\n * ComposePager-based navigation\n * Navigation relative to jetpack:\n * 1.Easier to use and more single function\n * 2.All state of each page can be saved\n * 3.no animation\n */\n@Composable\nfun PagerNav()\n```\n\n## Config\n\n```kotlin\n//Set multiple languages, get the system language by default\nStrings.setLanguage(\"en\")\n```\n\n## contact information\n\nKotlin Communication Group(QQ): 101786950\n\n## thank\n\n\u003ch4\u003eFinally, thanks to \u003ca href=\"https://www.jetbrains.com/?from=ltviews\" target=\"_blank\"\u003eJetBrains\u003c/a\u003e\nfor supporting the project\u003ch4\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fltttttttttttt%2Fcomposeviews","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fltttttttttttt%2Fcomposeviews","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fltttttttttttt%2Fcomposeviews/lists"}