Skip to content

lightfeather721/Material3Gallery

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Material 3 Gallery

一个可直接在 Android Studio 中打开、同步、编译和运行的原生 Android 应用。应用使用 Kotlin、Jetpack Compose、Material Design 3、Navigation Compose、ViewModel、Preferences DataStore 和版本目录构建,默认界面语言为简体中文。

构建环境

  • Android Gradle Plugin:9.3.0
  • Gradle Wrapper:9.6.1
  • Kotlin / Compose Compiler plugin:2.4.10
  • Compose BOM:2026.06.01
  • Material 3:1.4.0(Stable)
  • Activity Compose:1.12.4
  • Navigation Compose:2.9.8
  • Lifecycle:2.10.0
  • DataStore Preferences:1.2.1
  • compileSdk / targetSdk:37
  • minSdk:23
  • JDK:17 或更新版本

依赖版本统一位于 gradle/libs.versions.toml

编译与运行

  1. 使用 Android Studio 打开本目录。
  2. 确保已安装 Android SDK Platform 37.0 和 Build Tools 36.0.0。
  3. 等待 Gradle Sync 完成。
  4. 选择 app 配置并运行到 Android 设备或模拟器。

命令行构建:

.\gradlew.bat :app:assembleDebug
.\gradlew.bat :app:testDebugUnitTest
.\gradlew.bat :app:assembleDebugAndroidTest

Debug APK:

app/build/outputs/apk/debug/app-debug.apk

目录说明

app/src/main/java/com/example/material3gallery/
├─ MainActivity.kt                  # 单 Activity、edge-to-edge 入口
├─ Material3GalleryApp.kt           # 根主题与窗口尺寸分类
├─ navigation/                      # Navigation Compose、自适应导航壳
├─ data/                            # 统一组件注册表、示例代码、DataStore
├─ viewmodel/                       # 应用状态和持久化操作
├─ theme/                           # Color、Theme、Type、Shape
├─ ui/                              # 首页、列表、详情、收藏、主题、设置
└─ demos/                           # 按类别组织的真实交互演示

已实现组件

注册表包含 94 个条目,覆盖:

  • Actions:全部按钮、图标按钮、FAB 与单选/多选分段按钮。
  • Communication:Badge、进度指示器、Snackbar、PlainTooltip、RichTooltip。
  • Containment:三类 Card、AlertDialog、BasicAlertDialog、两类 Bottom Sheet、Divider、ListItem、Carousel、Scaffold。
  • Navigation:四类 TopAppBar、BottomAppBar、NavigationBar、抽屉、NavigationRail、固定和可滚动 TabRow。
  • Selection:Checkbox、TriStateCheckbox、RadioButton、Switch、Slider、RangeSlider、菜单、日期与时间选择器。
  • Chips:Assist、Filter、Input、Suggestion 的普通和 Elevated 变体。
  • Text Inputs:TextField、OutlinedTextField、密码、搜索、单/多行、数字、错误、只读、禁用、图标、字符限制和 supporting text 状态。
  • Lists and Layouts:LazyColumn、LazyRow、两类 LazyGrid、FlowRow、FlowColumn、水平/垂直 Pager、PullToRefresh、展开列表项与 SwipeToDismissBox。

每个条目都通过 component/{id} 获得独立详情路由,并提供实时预览、收藏、浅/深背景、参数交互、代码展开/复制、使用建议与无障碍说明。

实验性控件

以下条目在当前实现中使用 ExperimentalMaterial3Api 或对应实验性 API,并在应用内标记为 Experimental API,同时出现在独立“实验性控件”分类:

SingleChoiceSegmentedButtonRowMultiChoiceSegmentedButtonRowPlainTooltipRichTooltipBasicAlertDialogModalBottomSheetBottomSheetScaffoldCarouselMediumTopAppBarLargeTopAppBarExposedDropdownMenuBoxDatePickerDateRangePickerTimePickerTimeInputSearchBarDockedSearchBarPullToRefreshBox

实验性条目可以在设置中整体隐藏,不影响稳定组件页面。

API 名称调整与未提供项

  • Material 3 的可滚动主选项卡使用实际 API PrimaryScrollableTabRow,替代旧名称 ScrollableTabRow
  • “NavigationDrawer”条目使用 Material 3 实际提供的 ModalNavigationDrawer 交互演示;同时单独保留 ModalNavigationDrawerPermanentNavigationDrawer 条目。
  • Password TextField 使用稳定 OutlinedTextFieldPasswordVisualTransformation 组合。
  • 当前稳定 Material 3 1.4.0 未提供可在本项目稳定依赖中直接使用的 SecureTextField / OutlinedSecureTextField,因此未虚构这些 API。

自适应、主题与数据

  • Compact:底部 NavigationBar,列表为单列或双列。
  • Medium:NavigationRail,网格为三列。
  • Expanded:永久导航抽屉;组件页使用左侧主列表与右侧实时详情双栏。
  • 主题支持浅色、深色、跟随系统、Android 12+ 动态颜色、四种种子色、圆角、字体缩放、动画速度设置和高对比度预览。
  • 收藏、最近查看、主题模式与全部设置持久化到 DataStore。

测试结果

  • :app:assembleDebug:通过。
  • :app:testDebugUnitTest:通过(注册表 ID 唯一、代码示例非空、所有分类有条目)。
  • :app:assembleDebugAndroidTest:通过(Compose UI 测试 APK 成功编译)。
  • :app:connectedDebugAndroidTest:在 Android 6.0 / API 23 模拟器上 11/11 通过;覆盖搜索、导航、默认布局、按钮实时预览、关于信息、SearchBar、DockedSearchBar、ModalBottomSheet 和 BottomSheetScaffold 回归测试。

About

Material 3 Gallery:原生 Android Jetpack Compose 交互式组件图鉴

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages