android 调整视图大小单击Jetpack编写

e0bqpujr  于 2023-02-14  发布在  Android
关注(0)|答案(1)|浏览(124)

我刚开始编写视图,很难调整视图大小。我有一个视图,我最初是硬编码到一定大小的。当单击视图时,我希望它扩展到一定程度来填充宽度。这在编写中是如何实现的?

@Composable
fun InputBar(
   hint: String,
   onClick: () -> Unit
) {
    Card(
        onClick = { /* update view to fillMaxWidth() */ },
        modifier = Modifier
            .width(150.dp)
            .height(44.dp),
    ) {
        Row(modifier = Modifier.fillMaxWidth()) {
            TextField(
                value = "",
                onValueChange = {

                },
                placeholder = { Text(hint) }
            )
        }
    }
}
nzk0hqpo

nzk0hqpo1#

你可以通过这样的方式来实现你的目标:

import android.util.Log
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.PressInteraction
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.material.Card
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import kotlin.math.log

private const val TAG = "InputBar"

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun InputBar(
    hint: String,
    onClick: () -> Unit
) {
    var isFillMaxWidth by remember { mutableStateOf(false) }
    val isExpandModifier = remember(isFillMaxWidth){
        Modifier
            .height(44.dp)
            .then(
                if (isFillMaxWidth) {
                    Log.i(TAG, "InputBar: fillMaxWidth")
                    Modifier.fillMaxWidth()
                } else {
                    Log.i(TAG, "InputBar: 150")
                    Modifier.width(150.dp)
                }

            )}
    Card(
        modifier = isExpandModifier,
    ) {
        Row(modifier = Modifier.fillMaxWidth()) {
            TextField(
                value = "",
                onValueChange = {

                },
                placeholder = { Text(hint) },
                interactionSource = remember { MutableInteractionSource() }
                    .also { interactionSource ->
                        LaunchedEffect(interactionSource) {
                            interactionSource.interactions.collect {
                                if (it is PressInteraction.Release) {
                                    // works like onClick
                                    isFillMaxWidth = !isFillMaxWidth
                                    Log.i(TAG, "InputBar: onClick")
                                }
                            }
                        }
                    }
            )
        }
    }
}

相关问题