简体   繁体   English

在 Jetpack Compose 中单击时更改表面项目的背景颜色

[英]Change background color of surface item when click in jetpack compose

I want to make a background color change when user select a item on Surface .当用户 select 是Surface上的项目时,我想更改背景颜色。 I am using Column in my parent, so I can't make LazyColumn .我在我的父母中使用Column ,所以我不能制作LazyColumn So I am using Foreach to make a list of view.所以我正在使用Foreach来制作视图列表。 By default no view will be selected, when user click on item then I want change the color.默认情况下不会选择任何视图,当用户单击项目时我想更改颜色。 Note: Only one item will select at a time.注意:一次只有一项将是 select。

ScanDeviceList扫描设备列表

@Composable
fun ColumnScope.ScanDeviceList(
    scanDeviceList: List<ScanResult>,
    modifier: Modifier = Modifier,
    pairSelectedDevice: () -> Unit
) {
    Spacer()
    AnimatedVisibility() {
        Column {
            Text()
            Spacer()
            scanDeviceList.forEachIndexed { index, scanResult ->
                ClickableItemContainer(
                    rippleColor = AquaLightOpacity10,
                    content = {
                        ScanDeviceItem(index, scanResult, scanDeviceList)
                    }
                ){}
            }
            AvailableWarningText()
            PairSelectedDevice(pairSelectedDevice)
        }
    }
}

ScanDeviceItem扫描设备项

@Composable
fun ScanDeviceItem(
    index: Int,
    scanResult: ScanResult,
    scanDeviceList: List<ScanResult>
) {
    Column {
        if (index == 0) {
            Divider(color = Cloudy, thickness = 1.dp)
        }
        Text(
            text = scanResult.device.name,
            modifier = Modifier.padding(vertical = 10.dp)
        )
        if (index <= scanDeviceList.lastIndex) {
            Divider(color = Cloudy, thickness = 1.dp)
        }
    }
}

ClickableItemContainer可点击项目容器

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ClickableItemContainer(
    rippleColor: Color = TealLight,
    content: @Composable (MutableInteractionSource) -> Unit,
    clickAction: () -> Unit
) {
    val interactionSource = remember { MutableInteractionSource() }
    CompositionLocalProvider(
        LocalRippleTheme provides AbcRippleTheme(rippleColor),
        content = {
            Surface(
                onClick = { clickAction() },
                interactionSource = interactionSource,
                color = White
            ) {
                content(interactionSource)
            }
        }
    )
}

I want to something like this我想要这样的东西

在此处输入图像描述

Now above solution is only working on ripple effect, Now I want to extend my function to select a single item at a time.现在上面的解决方案只适用于涟漪效应,现在我想一次将我的 function 扩展到 select 一个项目。 Many Thanks非常感谢

You can store the selected index and use the clickAction to update its value when the user clicks on each item.您可以存储选定的索引,并在用户单击每个项目时使用clickAction更新其值。

Something like:就像是:

@Composable
fun MyList(

      var selectedIndex by remember { mutableStateOf(-1) }

      Column() {
          itemsList.forEachIndexed() { index, item ->
              MyItem(
                  selected = selectedIndex == index,
                  clickAction = { selectedIndex = index }
              )
      }
}

@Composable
fun MyItem(
    selected : Boolean = false,
    clickAction: () -> Unit
){
     Surface(
        onClick = { clickAction() },
        color = if (selected) Color.Red else Color.Yellow
     ) {
         Text("Item...")
     }
}

To have only item selected at a time, you can follow a behavior that is similar.要一次只选择项目,您可以遵循类似的行为。 You save your item selected in a mutableState variable, like:您将所选项目保存在 mutableState 变量中,例如:

var itemSelected by remember { mutableState(ScanDeviceResult()) }

After that, when you click the item, you update the itemSelected, something like:之后,当您单击该项目时,您会更新 itemSelected,例如:

ClickableItemContainer(
                    rippleColor = AquaLightOpacity10,
                    content = {
                        ScanDeviceItem(index, scanResult, scanDeviceList)
                    }
                ){ newItemSelected ->
itemSelected = newItemSelected
}

Now, each ClickableItemContainer needs to have an associated ScanResult.现在,每个 ClickableItemContainer 都需要有一个关联的 ScanResult。

    @OptIn(ExperimentalMaterialApi::class)
@Composable
fun ClickableItemContainer(
itemSelected: ScanResult,
scanResult: ScanResult,
    rippleColor: Color = TealLight,
    content: @Composable (MutableInteractionSource) -> Unit,
    clickAction: (ScanResult) -> Unit
) {
    val interactionSource = remember { MutableInteractionSource() }
    CompositionLocalProvider(
        LocalRippleTheme provides AbcRippleTheme(rippleColor),
        content = {
            Surface(
                onClick = { clickAction.invoke(scanResult) },
                interactionSource = interactionSource,
                color = if (itemSelected == scanResult) YOUR_BACKGROUND-SELECTED_COLOR else White
            ) {
                content(interactionSource)
            }
        }
    )
}

Now, on your ScanDeviceList method:现在,在您的 ScanDeviceList 方法上:

    @Composable
    fun ColumnScope.ScanDeviceList(
        itemSelected: MutableState<ScanResult>,
        scanDeviceList: List<ScanResult>,
        modifier: Modifier = Modifier,
        pairSelectedDevice: () -> Unit
    ) {
        Spacer()
        AnimatedVisibility() {
            Column {
                Text()
                Spacer()
                scanDeviceList.forEachIndexed { index, scanResult ->
                    ClickableItemContainer(
                        itemSelected = itemSelected,
                        scanResult = scanResult,
                        rippleColor = AquaLightOpacity10,
                        content = {
                            ScanDeviceItem(index, scanResult, scanDeviceList)
                        }
                    ){ scanResultToSelect ->
               itemSelected = scanResultToSelect
}
                }
                AvailableWarningText()
                PairSelectedDevice(pairSelectedDevice)
            }
        }
    }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Android Jetpack Compose - 背景颜色不会改变 - Android Jetpack Compose - Background color does not change 如何在 Jetpack Compose 中将 Surface 中的 Item 居中 - How to center Item inside Surface in jetpack compose 如何使 Surface 背景透明(Jetpack Compose) - How to make Surface background transparent (Jetpack Compose) Jetpack Compose 中按钮的背景颜色 - background color on Button in Jetpack Compose 单击RecyclerView Cardview项的背景颜色更改 - RecyclerView Cardview item background color change When Click on Its Item Jetpack compose state管理,无法更改Card背景色 - Jetpack compose state management, unable to change background color of Card 如何更改卡片的边框颜色,在 Jetpack Compose 中点击卡片? - How to change the border color of a card, on card click in Jetpack Compose? 如何在自定义布局中添加拖动并更改 Jetpack Compose 中拖动表面的颜色 - How to add drag to custom layout and change the color of the dragged surface in jetpack compose 喷气背包中 +(...)% colors 的表面组成 - Surface at +(...)% colors in jetpack compose Jetpack Compose Spacer,背景颜色未显示在屏幕上 - Jetpack Compose Spacer with background color not shown on screen
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM