JetpackCompose从入门到实战学习笔记11——在compose中使用DropdownMenu

最新推荐文章于 2024-09-15 18:07:55 发布

淡淡的香烟

最新推荐文章于 2024-09-15 18:07:55 发布

阅读量747

点赞数

分类专栏： Android Jetpack 文章标签：学习 android kotlin

本文链接：https://blog.csdn.net/u012556114/article/details/129905025

版权

Android Jetpack 专栏收录该内容

35 篇文章 21 订阅

订阅专栏

JetpackCompose从入门到实战学习笔记11——在compose中使用DropdownMenu

1.简介：

DropdownMenu：

下拉列表菜单，菜单具有一个切换按钮，它是生成菜单的元素。例如一个图标，点击该图标可以触发菜单。 DropdownMenu的内容可以是DropdownMenuItems，也可以是自定义内容。

@Composable
fun DropdownMenu(
    expanded: Boolean?,
    onDismissRequest: (() -> Unit)?,
    modifier: Modifier? = Modifier,
    offset: DpOffset? = DpOffset(0.dp, 0.dp),
    properties: PopupProperties? = PopupProperties(focusable = true),
    content: (@Composable @ExtensionFunctionType ColumnScope.() -> Unit)?
): Unit

2.各个属性参数的含义:

参数	描述	类型
expanded	是否展开	boolean
onDismissRequest	在菜单关闭时调用	Unit
offset	设置偏移量	float
properties	可以设置 focusable、dismissOnBackPress、dismissOnClickOutside、securePolicy	boolean

3.简单使用：

package com.example.dropdowncomposedemo

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.dropdowncomposedemo.ui.theme.DropDownComposeDemoTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DropDownComposeDemoTheme {
                LazyColumn(modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.spacedBy(16.dp),
                contentPadding = PaddingValues(16.dp)//添加内容间距
                ){
                    items(
                        listOf(
                            "Philipp",
                            "Martin",
                            "Carl",
                            "John",
                            "Jake",
                            "Melanie",
                            "Tony",
                            "Tom",
                            "JoJo",
                            "Mary",
                            "Jack",
                            "Henry",
                            "James",
                            "MiMi",
                            "Hank",
                        )
                    ){ name ->
                        PersonItem(personName = name.toString(), dropDownItems = listOf(
                            DropDownItem("点赞"),
                            DropDownItem("评论"),
                            DropDownItem("收藏"),
                        ), onItemClick = {
                            Toast.makeText(applicationContext,it.text,Toast.LENGTH_LONG).show()
                        })
                    }
                }
            }
        }
    }
}

4.PersonItem类：

/**
 *@author: njb
 *@date:  2023/3/30 23:02
 *@desc:
 */
data class DropDownItem(
    val text: String
)

@Composable
fun PersonItem(
    personName: String,
    dropDownItems: List<DropDownItem>,
    modifier: Modifier = Modifier,
    onItemClick: (DropDownItem) -> Unit
) {
    var isContextMenuVisible by rememberSaveable {
        mutableStateOf(false)
    }
    var pressOffset by remember {
        mutableStateOf(0.dp)
    }
    var itemHeight by remember {
        mutableStateOf(0.dp)
    }
    val density = LocalDensity.current
    val interactionSource = remember {
        MutableInteractionSource()
    }

    Card(
        elevation = 4.dp,
        modifier = modifier
            .onSizeChanged {
                itemHeight = with(density) { it.height.toDp() }
            }
    ) {
        Box(modifier = Modifier
            .fillMaxWidth()
            .indication(interactionSource, LocalIndication.current)
            .pointerInput(true) {
                detectTapGestures(
                    onLongPress = {
                        isContextMenuVisible = true
                    },
                    onPress = {
                        isContextMenuVisible = true
                        val press = PressInteraction.Press(it)
                        interactionSource.emit(press)
                        tryAwaitRelease()
                        interactionSource.emit(PressInteraction.Release(press))
                    }
                )
            }
            .padding(16.dp)
        ) {
            Text(text = personName)
        }
        DropdownMenu(
            expanded = isContextMenuVisible,
            offset = DpOffset(x= 10.dp,y = 10.dp),
                    onDismissRequest = { isContextMenuVisible = false }) {
            dropDownItems.forEach { item ->
                run {
                    DropdownMenuItem(
                        onClick = {
                            onItemClick(item)
                            isContextMenuVisible = false
                        }
                    )
                    {
                        Text(text = item.text)
                    }
                }
            }
        }
    }
}