{"id":370859,"date":"2024-05-21T04:35:10","date_gmt":"2024-05-21T04:35:10","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=370859"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=370859","title":{"rendered":"Drag and Drop \u0432 Jetpack Compose<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u0412\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h2>\n

\u0412 \u044f\u043d\u0432\u0430\u0440\u0435 2024, \u043a\u0440\u0443\u043f\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 Jetpack Compose \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u043e \u0434\u0432\u0430 \u043d\u043e\u0432\u044b\u0445 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430: dragAndDropSource<\/code>\u00a0\u0438\u00a0dragAndDropTarget<\/code>. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442 Drag and Drop \u0432 Jetpack Compose.<\/p>\n

<\/div>\n

Composable \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0435\u0434\u044b<\/h2>\n

\u0421\u043f\u0435\u0440\u0432\u0430 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043a\u043e\u0434 \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0435\u0434\u044b.<\/p>\n

<\/figure>\n
fun FoodItemCard(foodItem: FoodItem) {     Card(         elevation = CardDefaults.elevatedCardElevation(defaultElevation = 10.dp),         colors = CardDefaults.elevatedCardColors(             containerColor = Color.White,         ), shape = RoundedCornerShape(24.dp),         modifier = Modifier.padding(8.dp)     ) {         Row(             verticalAlignment = Alignment.CenterVertically,             modifier = Modifier.padding(10.dp)         ) {             Image(                 painter = painterResource(id = foodItem.image),                 contentDescription = null,                 contentScale = ContentScale.Crop,                 modifier = Modifier                     .size(130.dp)                     .clip(RoundedCornerShape(16.dp))              )                       Spacer(modifier = Modifier.width(20.dp))             Column(modifier = Modifier.weight(1f)) {                 Text(                     text = foodItem.name,                     fontSize = 22.sp,                     color = Color.DarkGray                 )                 Spacer(modifier = Modifier.height(6.dp))                 Text(                     text = \"$${foodItem.price}\",                     fontSize = 18.sp,                     color = Color.Black,                     fontWeight = FontWeight.ExtraBold                 )             }         }     } }  LazyColumn(     modifier = Modifier.fillMaxSize(),     contentPadding = PaddingValues(horizontal = 10.dp) ) {     items(items = foodList) { food ->         FoodItemCard(foodItem = food)     } }<\/code><\/pre>\n
Composable \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430<\/h3>\n
\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043a\u043e\u0434 \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430.<\/p>\n
<\/figure>\n
@Composable fun PersonCard(person: Person) {         Column(             modifier = Modifier                 .padding(6.dp)                 .shadow(elevation = 4.dp, shape = RoundedCornerShape(16.dp))                 .width(width = 120.dp)                 .fillMaxHeight(0.8f)                 .background(Color.White, RoundedCornerShape(16.dp)),             verticalArrangement = Arrangement.Center,             horizontalAlignment = Alignment.CenterHorizontally         ) {             Image(                 painter = painterResource(id = person.profile), contentDescription = null,                 modifier = Modifier                     .size(70.dp)                     .clip(CircleShape),                 contentScale = ContentScale.Crop             )             Spacer(modifier = Modifier.height(10.dp))             Text(                 text = person.name,                 fontSize = 18.sp,                 color = Color.Black,                 fontWeight = FontWeight.Bold             )         } }  LazyRow(     modifier = Modifier         .fillMaxHeight(0.3f)         .fillMaxWidth()         .background(Color.LightGray, shape = RoundedCornerShape(topEnd = 10.dp, topStart = 10.dp))         .padding(vertical = 10.dp)         .align(Alignment.BottomCenter),     verticalAlignment = Alignment.CenterVertically,     horizontalArrangement = Arrangement.Center ) {     items(items = persons) { person ->         PersonCard(person)     } }<\/code><\/pre>\n
\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u043b\u044f Drag and Drop<\/h2>\n
\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u043d\u0430\u0447\u043d\u0451\u043c, \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0441\u043f\u0440\u0430\u0432\u043a\u0430 \u043f\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430\u043c:<\/p>\n
Modifier.dragAndDropSource<\/h4>\n
\u042d\u0442\u043e\u0442 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c Drag and Drop.<\/p>\n
@Composable fun MyDraggableComponent() {     Box(         modifier = Modifier             .size(100.dp)             .background(Color.Blue)             .dragAndDropSource(                 drawDragDecoration = {                     \/\/ UI \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430                 }             ) {                 \/\/ \u043b\u043e\u0433\u0438\u043a\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Drag and Drop                 startTransfer (\/* \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 *\/ )             }     ) { \/* \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 *\/ } }<\/code><\/pre>\n