[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-7347":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":42,"readmeContent":43,"aiSummary":44,"trendingCount":16,"starSnapshotCount":16,"syncStatus":45,"lastSyncTime":46,"discoverSource":47},7347,"Jetpack-Compose-Tutorials","SmartToolFactory\u002FJetpack-Compose-Tutorials","SmartToolFactory","🚀🧨📝 Series of Tutorials to learn about Jetpack Compose with subjects Material Widgets, Layout, SubcomposeLayout, custom layouts, State, custom rememberable, recomposition, LaunchedEffect, side-effects, Gesture, Animation,  Navigation, Canvas, UIs like whatsapp and others.","",null,"Kotlin",3655,418,63,4,0,1,10,3,29.87,"Apache License 2.0",false,"master",true,[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41],"android","android-ui","canvas","compose-animation","compose-canvas","compose-ui-test","custom-layout","jetpack-compose","jetpack-compose-animation","jetpack-compose-canvas","jetpack-compose-navigation","jetpack-compose-tutorial","material-components","material-design","sideeffects","unit-testing","2026-06-12 02:01:38","### Jetpack Compose Tutorials and Playground\n\n## 🤓 Overview\n\nSeries of Tutorials to learn about Jetpack Compose, Material Widgets, State, Animation, and\nNavigation. Easy to search in code and in app. Each chapter module contains its own content in code.\nSearchBar can be used to search with a tag or description available for each tutorial.\n\nRecommended section is under constructions for now, when finished it will get recommended tags using\nprevious searches using a database, domain with ViewModel.\n\n\u003Cbr>\n\u003Cdiv align=\"center\">\n\u003Cimg src=\"\u002F.\u002Fscreenshots\u002Fintro.gif\" align=\"center\" width=\"32%\"\u002F>\n\u003C\u002Fdiv>\n\n\u003Cbr>\u003Cbr>\u003Cbr>\n\n| Tutorial                                                                                                                                                                                                                     | Preview                                               |\n|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------|\n| \u003Ch3>1-1 Column, Row, Box, Modifiers\u003C\u002Fh3>\u003Cbr\u002F>Create Row that adds elements in horizontal order, and Column that adds elements in vertical order.\u003Cbr>\u003Cbr> • Column\u003Cbr>• Row\u003Cbr>• Box\u003Cbr>• Modifier\u003Cbr>                        | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial1_1.jpg\" width=200> |\n|                                                                                                                                                                                                                              |                                                       |\n| \u003Ch3>1-2 Surface, Shape, Clickable\u003C\u002Fh3>\u003Cbr\u002F>Create and modify Surface to draw background for Composables, add click action to any composable. Set weight or offset modifiers.\u003Cbr>\u003Cbr> • Surface\u003Cbr>• Shape\u003Cbr>• Clickable\u003Cbr> | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial1_2.jpg\" width=200> |\n|                                                                                                                                                                                                                              |                                                       |\n\n### Material Widgets\n\n| Tutorial                                                                                                                                                                                                                                                                                                                                                                                                                           | Preview                                                   |\n|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------|\n| \u003Ch3>2-1 Text\u003C\u002Fh3>\u003Cbr\u002F>Create Text component with different properties such as color, background, font weight, family, style, spacing and others\u003Cbr>\u003Cbr> • Text\u003Cbr>• Row\u003Cbr>• FontStyle\u003Cbr>• Annotated String Hyperlink\u003Cbr>                                                                                                                                                                                                         | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial2_1.jpg\" width=200>     |\n|                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                                           |\n| \u003Ch3>2-2 Button, IconButton, FAB, Chip\u003C\u002Fh3>\u003Cbr\u002F>Create button with text and\u002For with image, Floating Action Button  or Chips. Modify properties of buttons including color, text, and click actions.\u003Cbr>\u003Cbr> • Button\u003Cbr>• IconButton\u003Cbr>• FloatingActionButton\u003Cbr>• Chip\u003Cbr>                                                                                                                                                        | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial2_2.jpg\" width=200>     |\n|                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                                           |\n| \u003Ch3>2-3 TextField\u003C\u002Fh3>\u003Cbr\u002F>Create TextField component with regular style or outlined. Set error, colors, state, icons, and IME actions.\u003Cbr>\u003Cbr> • TextField\u003Cbr>• OutlinedTextField\u003Cbr>• IME\u003Cbr>• Phone format VisualTransformation\u003Cbr>• Regex\u003Cbr>                                                                                                                                                                                  | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial2_3.jpg\" width=200>     |\n|                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                                           |\n| \u003Ch3>2-4 Image\u003C\u002Fh3>\u003Cbr\u002F>Create Image with image, vector resource or with Painter, set image and Content scales to fit, expand or shrink image. Change shape of Image or apply ColorFilter and PorterDuff modes.\u003Cbr>\u003Cbr> • Image\u003Cbr>• Canvas\u003Cbr>• Drawable\u003Cbr>• Bitmap\u003Cbr>                                                                                                                                                           | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial2_4.gif\" width=200>     |\n|                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                                           |\n| \u003Ch3>2-5 LazyColumn\u002FRow\u002FVerticalGrid\u003C\u002Fh3>\u003Cbr\u002F>Vertical, horizontal grid lists with LazyColumn, LazyRow and LazyVerticalGrid. Use contentPadding set paddings for lists, verticalArrangement or horizontalArrangement for padding between items, rememberLazyListState to manually scroll.\u003Cbr>\u003Cbr> • LazyColumn(Vertical RecyclerView)\u003Cbr>• LazyRow(Horizontal RecyclerView\u003Cbr>• LazyVerticalGrid(GridLayout)\u003Cbr>• StickyHeaders\u003Cbr> | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial2_5.gif\" width=200>     |\n|                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                                           |\n| \u003Ch3>2-6 TopAppbar & Tab\u003C\u002Fh3>\u003Cbr\u002F>TopAppbar with actions, overflow menus. Tabs with text only, image only and image+text with different background, divider, and indicators.\u003Cbr>\u003Cbr> • TopAppBar\u003Cbr>• Overflow menu\u003Cbr>• TabRow and Tab\u003Cbr>• Tab Indicator, Divider\u003Cbr>                                                                                                                                                             | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial2_6.gif\" width=200>     |\n|                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                                           |\n| \u003Ch3>2-7 BottomNavigation\u003C\u002Fh3>\u003Cbr\u002F>Bottom navigation bars allow movement between primary destinations in an app. BottomNavigation should contain multiple BottomNavigationItems, each representing a singular destination.\u003Cbr>\u003Cbr> • BottomNavigation\u003Cbr>• BottomNavigationItem\u003Cbr>                                                                                                                                                 | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial2_7.jpeg\" width=200>    |\n|                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                                           |\n| \u003Ch3>2-8 BottomAppBar\u003C\u002Fh3>\u003Cbr\u002F>A bottom app bar displays navigation and key actions at the bottom of screens.\u003Cbr>\u003Cbr> • BottomAppBar\u003Cbr>• Scaffold\u003Cbr>                                                                                                                                                                                                                                                                              | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial2_8.jpeg\" width=200>    |\n|                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                                           |\n| \u003Ch3>2-9-1 Side Navigation\u003C\u002Fh3>\u003Cbr\u002F>A backdrop appears behind all other surfaces in an app, displaying contextual and actionable content.\u003Cbr>\u003Cbr> • Scaffold\u003Cbr>• Side Navigation\u003Cbr>• DrawerState\u003Cbr>                                                                                                                                                                                                                              | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial2_9.jpeg\" width=200>    |\n|                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                                           |\n| \u003Ch3>2-9-2 ModalDrawer\u003C\u002Fh3>\u003Cbr\u002F>Modal navigation drawers block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\u003Cbr>\u003Cbr> • ModalDrawer\u003Cbr>• DrawerState\u003Cbr>• Scaffold\u003Cbr>                                                                                                                                                         | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial2_9_2.jpeg\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                                           |\n| \u003Ch3>2-10-1 BottomSheet\u003C\u002Fh3>\u003Cbr\u002F>Create bottom sheet using BottomSheetScaffold and rememberBottomSheetScaffoldState, create modal bottom sheets.\u003Cbr>\u003Cbr> • BottomSheetScaffold\u003Cbr>• BottomSheetState\u003Cbr>• ModalBottomSheetLayout\u003Cbr>                                                                                                                                                                                                | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial2_10.jpeg\" width=200>   |\n|                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                                           |\n| \u003Ch3>2-10-4 BottomDrawer\u003C\u002Fh3>\u003Cbr\u002F>BottomDrawer with BottomAppBar.\u003Cbr>\u003Cbr> • BottomDrawer\u003Cbr>• BottomAppBar\u003Cbr>• Scaffold\u003Cbr>                                                                                                                                                                                                                                                                                                        | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial2_10_4.jpeg\" width=200> |\n|                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                                           |\n| \u003Ch3>2-10-5 BackdropScaffold\u003C\u002Fh3>\u003Cbr\u002F>BackdropScaffold provides an API to put together several material components to construct your screen.\u003Cbr>                                                                                                                                                                                                                                                                                    | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial2_10_5.jpeg\" width=200> |\n|                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                                           |\n| \u003Ch3>2-11 Snackbar, Progress, Selection\u003C\u002Fh3>\u003Cbr\u002F>Create Snackbars with various layouts and styling, Checkboxes with selectable text, tri state checkbox, grouped radio buttons and sliders.\u003Cbr>\u003Cbr> • SnackBar\u003Cbr>• ProgressIndicator\u003Cbr>• Checkbox\u003Cbr>• TriStateCheckbox\u003Cbr>• Switch\u003Cbr>• RadioButton\u003Cbr>• Slider\u003Cbr>• RangeSlider\u003Cbr>                                                                                             | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial2_11.gif\" width=200>    |\n|                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                                           |\n| \u003Ch3>2-12 Dialog, AlertDialog\u003C\u002Fh3>\u003Cbr\u002F>Create Dialog, and AlertDialog with standard and custom layouts. Implement on dismiss logic and get result when dialog is closed.\u003Cbr>\u003Cbr>• AlertDialog\u003Cbr>• Dialog\u003Cbr>• DialogProperties\u003Cbr>                                                                                                                                                                                                 | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial2_12.gif\" width=200>    |\n|                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                                           |\n\n### Layout\n\n| Tutorial                                                                                                                                                                                                                                                                                                                                 | Preview                                                  |\n|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------|\n| \u003Ch3>3-1-1 Custom Modifier\u003C\u002Fh3>\u003Cbr\u002F>Create custom layout using using layout, Measurable, Constraint, Placeable.\u003Cbr>\u003Cbr>• Custom Modifier\u003Cbr>• Measurable\u003Cbr>• Constraint\u003Cbr>• Placeable\u003Cbr>                                                                                                                                               | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial3_1_1.png\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                          |                                                          |\n| \u003Ch3>3-1-2 onGloballyPositioned\u003C\u002Fh3>\u003Cbr\u002F>Use Modifier.onGloballyPositioned to get position of a Composable in parent, root or window.br>\u003Cbr>• Modifier\u003Cbr>• onGloballyPositioned\u003Cbr>                                                                                                                                                      | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial3_1_2.png\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                          |                                                          |\n| \u003Ch3>3-1-3 graphicsLayer\u003C\u002Fh3>\u003Cbr\u002F>Use Modifier.offset{} and Modifier.graphicsLayer{} to scale, translate or change other properties of a Composable.\u003Cbr>\u003Cbr>• Modifier\u003Cbr>• graphicsLayer\u003Cbr>                                                                                                                                             | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial3_1_3.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                          |                                                          |\n| \u003Ch3>3-1-4 BoxWithConstraints\u003C\u002Fh3>\u003Cbr\u002F>BoxWithConstraints is a composable that defines its own content according to the available space, based on the incoming constraints or the current LayoutDirection.\u003Cbr>\u003Cbr>• BoxWithConstraints\u003Cbr>• Constraint\u003Cbr>                                                                                | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial3_4.png\" width=200>    |                                                                                                                                                                                                                                                                                                                                     |                                                         |\n|                                                                                                                                                                                                                                                                                                                                          |                                                          |\n| \u003Ch3>3-1-6 Chaining Size Modifiers\u003C\u002Fh3>\u003Cbr\u002F>Observe how chaining Modifier.size.size, Modifier.sizeIn.size or Modifier.size.requiredSize or other combination of size modifiers effect final Constraints.\u003Cbr>\u003Cbr>• Modifier\u003Cbr>• size\u002FsizeIn\u003Cbr>• requiredWidth\u002FrequiredHeight\u002FrequiredSize\u003Cbr>                                            | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial3_1_6.png\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                          |                                                          |\n| \u003Ch3>3-1-7 Modifier.wrapContentSize\u003C\u002Fh3>\u003Cbr\u002F>Use Modifier.wrapContentSize\u002FWidth\u002FHeight to use content constraints instead of Constraints forced by parent.\u003Cbr>\u003Cbr>• Modifier\u003Cbr>• Custom Layout\u003Cbr>• Measurable\u003Cbr>                                                                                                                       | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial3_1_7.png\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                          |                                                          |\n| \u003Ch3>3-1-8 Modifier.layout\u003C\u002Fh3>\u003Cbr\u002F>Use Modifier.layout to create LayoutModifier to measure with Constraints and place Placeables based on which order Modifier.layout is assigned.\u003Cbr>\u003Cbr>• Modifier\u003Cbr>• Custom Layout\u003Cbr>• Measurable\u003Cbr>• Constraints\u003Cbr>• Placeable\u003Cbr>                                                              | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial3_1_8.png\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                          |                                                          |\n| \u003Ch3>3-2-1 Custom Layout\u003C\u002Fh3>\u003Cbr\u002F>Create custom layout using using MeasurePolicy and use intrinsic dimensions.\u003Cbr>\u003Cbr>• Custom Layout\u003Cbr>• Measurable\u003Cbr>• Constraint\u003Cbr>• Placeable\u003Cbr>                                                                                                                                                  | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial3_2_1.png\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                          |                                                          |\n| \u003Ch3>3-2-10 Constraints & Modifier.layout\u003C\u002Fh3>\u003Cbr\u002F>Constraints to measure measurables with Constraints.offset and Constraints.constrainWidth to limit maximum width or available space for Placeable.\u003Cbr>\u003Cbr>• Custom Layout\u003Cbr>• Measurable\u003Cbr>• Constraint\u003Cbr>• Placeable\u003Cbr>• Modifier.layout\u003Cbr>                                      | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial3_2_10.gif\" width=200> |\n|                                                                                                                                                                                                                                                                                                                                          |                                                          |\n| \u003Ch3>3-3-1 Scope&ParentDataModifier\u003C\u002Fh3>\u003Cbr\u002F>Add custom modifiers to Composable inside a custom layout using its scope like align modifier only available in specific Composable like a custom Column.\u003Cbr>\u003Cbr>• Custom Layout\u003Cbr>• Scope\u003Cbr>• ParentDataModifier\u003Cbr>• Measurable\u003Cbr>• Constraint\u003Cbr>• Placeable\u003Cbr>                       | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial3_3_1.png\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                          |                                                          |\n| \u003Ch3>3-5 SubcomposeLayout\u003C\u002Fh3>\u003Cbr\u002F>Subcompose layout which allows to subcompose the actual content during the measuring stage for example to use the values calculated during the measurement as params for the composition of the children.\u003Cbr>\u003Cbr>• SubcomposeLayout\u003Cbr>• Constraint\u003Cbr>• Measurable\u003Cbr>• Constraint\u003Cbr>• Placeable\u003Cbr> | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial3_5.gif\" width=200>    |\n|                                                                                                                                                                                                                                                                                                                                          |                                                          |\n| \u003Ch3>3-6-1 Custom Chat Layouts1\u003C\u002Fh3>\u003Cbr\u002F>Custom layout like whatsapp chat layout that moves time and message read status layout right or bottom based on message width.\u003Cbr>\u003Cbr>• Custom Layout\u003Cbr>• Measurable\u003Cbr>• Constraint\u003Cbr>• Placeable\u003Cbr>                                                                                         | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial3_6_1.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                          |                                                          |\n| \u003Ch3>3-6-2 Custom Chat SubcomposeLayout\u003C\u002Fh3>\u003Cbr\u002F>Custom layout like whatsapp chat. Added quote and name tag resized to longest sibling using SubcomposeColumn from previous examples to have whole layout.\u003Cbr>\u003Cbr>• Custom Layout\u003Cbr>• SubcomposeLayout\u003Cbr>• Measurable\u003Cbr>• Constraint\u003Cbr>• Placeable\u003Cbr>                                | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial3_6_2.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                          |                                                          |\n| \u003Ch3>3-9 Visibility Percentage\u003C\u002Fh3>\u003Cbr\u002F>Detect percentage of visibility of a Composable using Modifier.onPlaced inside Column with vertical scroll or LazyColumn.\u003Cbr>\u003Cbr>• Modifier\u003Cbr>• LazyColumn\u003Cbr>• LazyListState\u003Cbr>• onPlaced\u003Cbr>                                                                                                  | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial3_9.gif\" width=200>    |\n|                                                                                                                                                                                                                                                                                                                                          |                                                          |\n| \u003Ch3>3-10 Center Item on Scroll\u003C\u002Fh3>\u003Cbr\u002F>Detect position in parent and center an item while its parent is scrolled.\u003Cbr>\u003Cbr>• Modifier\u003Cbr>• LazyColumn\u003Cbr>• onPlaced\u003Cbr>                                                                                                                                                                   | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial3_10.gif\" width=200>   |\n|                                                                                                                                                                                                                                                                                                                                          |                                                          |\n\n### State\n\n| Tutorial                                                                                                                                                                                                                                                                                                 | Preview                                                 |\n|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------|\n| \u003Ch3>4-1-1 Remember&MutableState\u003C\u002Fh3>\u003Cbr\u002F>Remember and mutableState effect recomposition and states.\u003Cbr>\u003Cbr>• remember\u003Cbr>• State\u003Cbr>• Recomposition\u003Cbr>                                                                                                                                                  | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial4_1_1.png\" width=200> |\n|                                                                                                                                                                                                                                                                                                          |                                                         |\n| \u003Ch3>4-2-3 Scoped Recomposition\u003C\u002Fh3>\u003Cbr\u002F>How hierarchy of Composables effects Smart Composition.\u003Cbr>\u003Cbr>• remember\u003Cbr>• Recomposition\u003Cbr>• State\u003Cbr>                                                                                                                                                      | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial4_2_3.png\" width=200> |\n|                                                                                                                                                                                                                                                                                                          |                                                         |\n| \u003Ch3>4-4 Custom Remember\u003C\u002Fh3>\u003Cbr\u002F>Create a custom remember and custom component to have badge that changes its shape based on properties set by custom rememberable.\u003Cbr>\u003Cbr>• remember\u003Cbr>• State\u003Cbr>• Recomposition\u003Cbr>• Custom Layout\u003Cbr>                                                               | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial4_4.gif\" width=200>   |\n|                                                                                                                                                                                                                                                                                                          |                                                         |\n| \u003Ch3>4-5-1 SideEffect1\u003C\u002Fh3>\u003Cbr\u002F>Use remember functions like rememberCoroutineScope, and rememberUpdatedState and side-effect functions such as LaunchedEffect and DisposableEffect.\u003Cbr>\u003Cbr>• remember\u003Cbr>• rememberCoroutineScope\u003Cbr>• rememberUpdatedState\u003Cbr>• LaunchedEffect\u003Cbr>• DisposableEffect\u003Cbr> | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial4_5_1.png\" width=200> |\n|                                                                                                                                                                                                                                                                                                          |                                                         |\n| \u003Ch3>4-5-2 SideEffect2\u003C\u002Fh3>\u003Cbr\u002F>Use SideEffect, derivedStateOf, produceState and snapshotFlow.\u003Cbr>\u003Cbr>• remember\u003Cbr>• SideEffect\u003Cbr>• derivedStateOf\u003Cbr>• produceStateOf\u003Cbr>• snapshotFlow\u003Cbr>                                                                                                            | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial4_5_2.png\" width=200> |\n|                                                                                                                                                                                                                                                                                                          |                                                         |\n| \u003Ch3>4-7-3 Compose Phases3\u003C\u002Fh3>\u003Cbr\u002F>How deferring a state read changes which phases of frame(Composition, Layout, Draw) are called.\u003Cbr>\u003Cbr>• Modifier\u003Cbr>• Recomposition\u003Cbr>• Composition\u003Cbr>• Layout\u003Cbr>• Draw\u003Cbr>                                                                                       | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial4_7_3.gif\" width=200> |\n|                                                                                                                                                                                                                                                                                                          |                                                         |\n| \u003Ch3>4-12 LazyList Scroll Direction\u003C\u002Fh3>\u003Cbr\u002F>Detect scroll direction of a LazyColumn using LazyListStated.\u003Cbr>\u003Cbr>• Modifier\u003Cbr>• LazyColumn\u003Cbr>• LazyListState\u003Cbr>• derivedStateOf\u003Cbr>• snapshotFlow\u003Cbr>                                                                                                 | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial4_12.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                          |                                                         |\n|                                                                                                                                                                                                                                                                                                          |\n\n### Gesture\n\n| Tutorial                                                                                                                                                                                                                                                                                                                                                                                                    | Preview                                                  |\n|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------|\n| \u003Ch3>5-1-1 Clickable\u003C\u002Fh3>\u003Cbr\u002F>Use clickable modifier, Indication. Indication to clip ripples, or create custom ripple effects.\u003Cbr>\u003Cbr>• clickable\u003Cbr>• Indication\u003Cbr>• rememberRipple\u003Cbr>• pointerInput\u003Cbr>• pointerInteropFilter\u003Cbr>                                                                                                                                                                        | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial5_1_1.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                                                                                             |                                                          |\n| \u003Ch3>5-1-2 InteractionSource1\u003C\u002Fh3>\u003Cbr\u002F>Use Interaction source to collect interactions or change scale of Composables based on interaction state.\u003Cbr>\u003Cbr>• clickable\u003Cbr>• InteractionSource\u003Cbr>                                                                                                                                                                                                               | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial5_2.gif\" width=200>    |\n|                                                                                                                                                                                                                                                                                                                                                                                                             |                                                          |\n| \u003Ch3>5-1-3 InteractionSource2\u003C\u002Fh3>\u003Cbr\u002F>Use InteractionSource to update touch state of multiple Composable or another Composable based on current interaction.\u003Cbr>\u003Cbr>• clickable\u003Cbr>• InteractionSource\u003Cbr>                                                                                                                                                                                                  | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial5_1_3.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                                                                                             |                                                          |\n| \u003Ch3>5-2 Tap&Drag Gesture\u003C\u002Fh3>\u003Cbr\u002F>Use PointerInput to listen press, tap, long press, drag gestures. detectTapGestures is used for listening for tap, longPress, doubleTap, and press gestures.\u003Cbr>\u003Cbr>• pointerInput\u003Cbr>• pointerInteropFilter\u003Cbr>• detectTapGestures\u003Cbr>• detectDragGestures\u003Cbr>• onPress\u003Cbr>• onDoubleTap\u003Cbr>                                                                             | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial5_2.gif\" width=200>    |\n|                                                                                                                                                                                                                                                                                                                                                                                                             |                                                          |\n| \u003Ch3>5-3 Transform Gestures\u003C\u002Fh3>\u003Cbr\u002F>Use PointerInput to listen for detectTransformGesture to get centroid, pan, zoom and rotate params.\u003Cbr>\u003Cbr>• pointerInput\u003Cbr>• detectTransformGestures\u003Cbr>• centroid\u003Cbr>• pan\u003Cbr>• zoom\u003Cbr>                                                                                                                                                                             | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial5_3.gif\" width=200>    |\n|                                                                                                                                                                                                                                                                                                                                                                                                             |                                                          |\n| \u003Ch3>5-4-1 AwaitPointerEventScope1\u003C\u002Fh3>\u003Cbr\u002F>Use AwaitPointerEventScope to get awaitFirstDown for down events, waitForUpOrCancellation for up events, and awaitPointerEvent for move events with pointers.\u003Cbr>\u003Cbr>• AwaitPointerEventScope\u003Cbr>• PointerInputChange\u003Cbr>• awaitFirstDown\u003Cbr>• waitForUpOrCancellation\u003Cbr>• awaitPointerEvent\u003Cbr>• awaitTouchSlopOrCancellation\u003Cbr>• awaitDragOrCancellation\u003Cbr> | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial5_4_1.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                                                                                             |                                                          |\n| \u003Ch3>5-4-3 Centroid, Zoom, Pan, Rotation\u003C\u002Fh3>\u003Cbr\u002F>Use AwaitPointerEventScope to calculate centroid position and size, zoom, pan, and rotation.\u003Cbr>\u003Cbr>• AwaitPointerEventScope\u003Cbr>• centroid\u003Cbr>• pan\u003Cbr>• zoom\u003Cbr>                                                                                                                                                                                          | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial5_4_3.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                                                                                             |                                                          |\n| \u003Ch3>5-6-2 Gesture Propagation1\u003C\u002Fh3>\u003Cbr\u002F>Consume different type of touch events in Composable in an hierarchy to display gesture propagation between parent and children with MOVE gestures.\u003Cbr>\u003Cbr>• AwaitPointerEventScope\u003Cbr>• pointerInput\u003Cbr>• consume\u003Cbr>• consumePositionChange\u003Cbr>• anyChangeConsumed\u003Cbr>                                                                                            | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial5_6_2.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                                                                                             |                                                          |\n| \u003Ch3>5-6-4 Transform Propagation\u003C\u002Fh3>\u003Cbr\u002F>Consume events to rotate, zoom, move or apply drag or move events on Composables.\u003Cbr>• AwaitPointerEventScope\u003Cbr>• detectTransformGestures\u003Cbr>• consume\u003Cbr>• consumePositionChange\u003Cbr>• anyChangeConsumed\u003Cbr>• pan\u003Cbr>• zoom\u003Cbr>                                                                                                                                   | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial5_6_4.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                                                                                             |                                                          |\n| \u003Ch3>5-9-6 Collapsing TopAppBar\u003C\u002Fh3>\u003Cbr\u002F>Create a collapsing TopAppBar using Modifier.nestedScroll and NestedScrollConnection.\u003Cbr>• nestedScroll\u003Cbr>• NestedScrollConnection\u003Cbr>                                                                                                                                                                                                                             | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial5_9_6.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                                                                                             |                                                          |\n| \u003Ch3>5-9-7 Collapsing TopAppBar2\u003C\u002Fh3>\u003Cbr\u002F>Create a collapsing TopAppBar using Modifier.nestedScroll and NestedScrollConnection.\u003Cbr>• nestedScroll\u003Cbr>• NestedScrollConnection\u003Cbr>                                                                                                                                                                                                                            | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial5_9_7.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                                                                                                                             |                                                          |\n| \u003Ch3>5-10-1 Image Touch Detection\u003C\u002Fh3>\u003Cbr\u002F>Detect touch position on image and get color at touch position.\u003Cbr>• Image\u003Cbr>• AwaitPointerEventScope\u003Cbr>                                                                                                                                                                                                                                                        | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial5_10_1.gif\" width=200> |\n|                                                                                                                                                                                                                                                                                                                                                                                                             |                                                          |\n| \u003Ch3>5-11 Zoomable LazyColumn\u003C\u002Fh3>\u003Cbr\u002F>Zoom images inside a LazyColum.\u003Cbr>• Image\u003Cbr>• Zoom\u003Cbr>• AwaitPointerEventScope\u003Cbr>                                                                                                                                                                                                                                                                                  | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial5_11.gif\" width=200>   |\n|                                                                                                                                                                                                                                                                                                                                                                                                             |                                                          |\n\n### Graphics\n\n| Tutorial                                                                                                                                                                                                                                                                                               | Preview                                                 |\n|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------|\n| \u003Ch3>6-1-1 Canvas Basics 1\u003C\u002Fh3>\u003Cbr\u002F>Use canvas draw basic shapes like line, circle, rectangle, and points with different attributes such as style, stroke cap, brush.\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• DrawScope\u003Cbr>• Path\u003Cbr>• Path Effect\u003Cbr>                                                                     | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_1_1.gif\" width=200> |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-1-2 Canvas Basics 2\u003C\u002Fh3>\u003Cbr\u002F>Use canvas to draw arc, with path effect, stroke cap, stroke join, miter and other attributes and draw images with src, dst attributes.\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• DrawScope\u003Cbr>• Path\u003Cbr>• Path Effect\u003Cbr>                                                               | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_1_2.gif\" width=200> |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-1-3 Canvas Paths\u003C\u002Fh3>\u003Cbr\u002F>Use canvas to draw path using absolute and relative positions, adding arc to path, drawing custom paths, progress, polygons, quads, and cubic.\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• DrawScope\u003Cbr>• Path\u003Cbr>• Path Effect\u003Cbr>                                                           | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_1_3.gif\" width=200> |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-1-4 Canvas Path Ops\u003C\u002Fh3>\u003Cbr\u002F>Use canvas to clip paths, or canvas using path, or rectangle with operations such as Difference, Intersect, Union, Xor, or ReverseDifference..\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• DrawScope\u003Cbr>• Path\u003Cbr>• PathOperation\u003Cbr>• ClipOperation\u003Cbr>                                   | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_1_4.gif\" width=200> |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-1-5 Canvas Path Segments\u003C\u002Fh3>\u003Cbr\u002F>Use canvas to flatten Android Path to path segments and display PathSegment start and\u002For end points.\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• DrawScope\u003Cbr>• Path\u003Cbr>• PathSegment\u003Cbr>                                                                                             | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_1_5.gif\" width=200> |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-1-6 Canvas PathEffect\u003C\u002Fh3>\u003Cbr\u002F>Use PathEffect such as dashedPathEffect, cornerPathEffect, chainPathEffect and stompedPathEffect to draw shapes add path effects around Composables\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• DrawScope\u003Cbr>• Path\u003Cbr>• Path Effect\u003Cbr>                                                 | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_1_6.gif\" width=200> |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-2-1 Blend(Porter-Duff) Modes\u003C\u002Fh3>\u003Cbr\u002F>Use blend(Porter-Duff) modes to change drawing source\u002Fdestination or clip based on blend mode ,and manipulate pixels.\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• DrawScope\u003Cbr>• Path\u003Cbr>• Path Effect\u003Cbr>• BlendMode\u003Cbr>                                                         | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_2_1.gif\" width=200> |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-2-3 Multi-Color VectorDrawable\u003C\u002Fh3>\u003Cbr\u002F>Use blend(Porter-Duff) to create multi colored VectorDrawables or VectorDrawables with fill\u002Fempty animations\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• DrawScope\u003Cbr>• VectorDrawable\u003Cbr>• BlendMode\u003Cbr>                                                                       | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_2_3.gif\" width=200> |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-4-2 Drawing App\u003C\u002Fh3>\u003Cbr\u002F>Draw to canvas using touch down, move and up events using array of paths to have erase, undo, redo actions and set properties for each path separately.\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• DrawScope\u003Cbr>• Path\u003Cbr>• AwaitPointerEventScope\u003Cbr>• PointerInputChange\u003Cbr>• BlendMode\u003Cbr> | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_4_2.gif\" width=200> |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-5 Color Picker\u003C\u002Fh3>\u003Cbr\u002F>Color Picker that calculates angle from center and gets a color using hue and returns a color as in HSL or RGB color model.\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• DrawScope\u003Cbr>• Path\u003Cbr>• AwaitPointerEventScope\u003Cbr>• PointerInputChange\u003Cbr>• BlendMode\u003Cbr>                              | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_5.gif\" width=200>   |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-6 Scale\u002FTranslation Edit\u003C\u002Fh3>\u003Cbr\u002F>Editable Composable that changes position and scale when touched and dragged from handles or changes position when touched inside.\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• DrawScope\u003Cbr>• Scale\u003Cbr>• Translate\u003Cbr>• AwaitPointerEventScope\u003Cbr>• PointerInputChange\u003Cbr>            | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_6.gif\" width=200>   |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-7 Gooey Effect\u003C\u002Fh3>\u003Cbr\u002F>Create basic Gooey Effect with static circles and one with moves with touch.\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• DrawScope\u003Cbr>• Gooey\u003Cbr>• Translate\u003Cbr>• AwaitPointerEventScope\u003Cbr>• PointerInputChange\u003Cbr>                                                                            | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_7.gif\" width=200>   |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-8-1 Cutout Arc Shape\u003C\u002Fh3>\u003Cbr\u002F>Use Path.cubicTo, Path.arcTo to draw cutout shape.\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• Path\u003Cbr>• Scale\u003Cbr>                                                                                                                                                                        | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_8_1.png\" width=200> |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-9-1 Neon Glow Effect\u003C\u002Fh3>\u003Cbr\u002F>Use paint.asFrameworkPaint() to create blur effect to mimic neon glow \u003Cbr\u002F>and infinite animation to dim and glow infinitely.\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• Path\u003Cbr>• Neon\u003Cbr>• AwaitPointerEventScope\u003Cbr>• PointerInputChange\u003Cbr>                                          | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_9_1.gif\" width=200> |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-11 Canvas Erase Percentage\u003C\u002Fh3>\u003Cbr\u002F>Use blend(Porter-Duff) modes with androidx.compose.ui.graphics.Canvas to erase and compare pixels with erased Bitmap to find ou percentage of erased area.\u003Cbr>\u003Cbr>• ActualCanvas\u003Cbr>• Path\u003Cbr>• AwaitPointerEventScope\u003Cbr>• PointerInputChange\u003Cbr>           | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_11.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-12 Diagonal Price Tag\u003C\u002Fh3>\u003Cbr\u002F>Use Modifier.drawBehind and Modifier.composed to draw diagonal price tag with shimmer effect\u003Cbr>\u003Cbr>• TextMeasurer\u003Cbr>• Canvas\u003Cbr>• Composed\u003Cbr>• Brush\u003Cbr>• Image\u003Cbr>                                                                                            | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_12.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-13 Border Progress\u003C\u002Fh3>\u003Cbr\u002F>Use Path segments to create path with progress to display remaining time\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• Path\u003Cbr>• PathSegment\u003Cbr>                                                                                                                                              | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_13.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-14 Pie Chart\u003C\u002Fh3>\u003Cbr\u002F>Draw pie chart with dividers, and text between angles.\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• Path\u003Cbr>• Animatable\u003Cbr>• TextMeasurer\u003Cbr>                                                                                                                                                     | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_14.png\" width=200>  |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-15 Pie Chart with Touch Animation\u003C\u002Fh3>\u003Cbr\u002F>Animate Pie Chart on touch and get data of touched section.\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• Path\u003Cbr>• Animatable\u003Cbr>• TextMeasurer\u003Cbr>• detectTapGestures\u003Cbr>                                                                                                    | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_15.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-17 Animated Rainbow Border\u003C\u002Fh3>\u003Cbr\u002F>Draw animated rainbow color border using BlendMode.SrcIn and Modifier.drawWithCache\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• Shape\u003Cbr>• BlendMode\u003Cbr>• Brush\u003Cbr>                                                                                                                 | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_17.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-20 PathParser and PathMeasure\u003C\u002Fh3>\u003Cbr\u002F>Create Path from string and animate segments via PathMeasure.\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• Path\u003Cbr>• PathParser\u003Cbr>• PathMeasure\u003Cbr>• PathSegment\u003Cbr>• animateFloatAsState\u003Cbr>                                                                                    | \u003Cimg src =\"\u002F.\u002Fscreenshots\u002Ftutorial6_20.gif\" width=200>  |\n|                                                                                                                                                                                                                                                                                                        |                                                         |\n| \u003Ch3>6-21 Constant Velocity Animation\u003C\u002Fh3>\u003Cbr\u002F>Create constant time animation.\u003Cbr>\u003Cbr>• Canvas\u003Cbr>• animateOffsetAsState\u003Cbr>• animateValueAsState\u003Cbr>                ","SmartToolFactory\u002FJetpack-Compose-Tutorials 是一个专注于 Jetpack Compose 的教程系列，涵盖了从基础到高级的各种主题，如 Material Widgets、布局、状态管理、动画和导航等。该项目使用 Kotlin 语言编写，通过详细的代码示例和应用内搜索功能帮助开发者快速掌握 Jetpack Compose 的核心概念和技术特点。它特别适合那些希望深入了解 Android UI 开发或正在寻找迁移到现代声明式 UI 框架的 Android 开发者。无论是初学者还是有经验的开发者，都可以在这个项目中找到适合自己水平的学习资源。",2,"2026-06-11 03:11:51","top_language"]