android Jetpack中的两个下拉列表组成等宽

hrirmatl  于 2023-05-12  发布在  Android
关注(0)|答案(1)|浏览(182)

我试图添加到下拉组件并排,但第二个不填补可用空间,我试图有两个相等的宽度字段和/或占用可用空间的领域。

下拉列表的代码:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Dropdown() {
    val ctx = LocalContext.current

    var coffeeDrinks = arrayOf( "One", "Two", "Three" )

    var expanded by remember {
        mutableStateOf(false )
    }
    var selectedText by remember {
        mutableStateOf(  coffeeDrinks[0] )
    }

    ExposedDropdownMenuBox(
        expanded = expanded,
        modifier = Modifier
            .fillMaxWidth( 0.5f )
            .padding(all = 8.dp),
        onExpandedChange = {
            expanded = !expanded
        }
    ) {
        TextField(
            value = selectedText,
            onValueChange = {},
            readOnly = true,
            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
            modifier = Modifier
                .menuAnchor()
                .fillMaxWidth()
        )

        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            coffeeDrinks.forEach { item ->
                DropdownMenuItem(
                    text = { Text(text = item) },
                    onClick = {
                        selectedText = item
                        expanded = false
                        Toast.makeText(ctx, item, Toast.LENGTH_SHORT).show()
                    }
                )
            }
        }
    }
}

然后我把它放在UI中,如下所示:

@Composable
fun ThisLayoutUI() {

    val ctx = LocalContext.current
    var email = "abc"

    val configuration = LocalConfiguration.current

    val screenHeight = configuration.screenHeightDp.dp
    val screenWidth = configuration.screenWidthDp.dp

    Surface(
        modifier = Modifier.fillMaxSize()
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    .............
                )
            }
        ) { contentPadding ->
            Box(modifier = Modifier.padding(contentPadding)) {
                Column(
                    modifier = Modifier.padding( all = 22.dp )
                ) {

                    .............

                    Row(
                        modifier = Modifier.fillMaxWidth()
                    ) {
                        Dropdown()
                        Dropdown()
                    }

                    ............
                }
            }
        }
    }
}

我已经尝试了许多不同的方法来尝试强制/计算宽度并将其传递给组件,但它从来没有使宽度相等的字段!

6tr1vspr

6tr1vspr1#

而不是fillMaxWidth,你应该使用weight,它应该工作正常,对于使用权重,你可以改变方法,如

@Composable
fun RowScope.Dropdown() {
}

或者你可以在root方法中创建修饰符,然后把它传递给下拉列表。
例如,使用下面的代码,

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun RowScope.Dropdown() {
    val ctx = LocalContext.current

    var coffeeDrinks = arrayOf("One", "Two", "Three")

    var expanded by remember {
        mutableStateOf(false)
    }
    var selectedText by remember {
        mutableStateOf(coffeeDrinks[0])
    }

    ExposedDropdownMenuBox(expanded = expanded,
        modifier = Modifier
            .weight(1f)
            .padding(all = 8.dp),
        onExpandedChange = {
            expanded = !expanded
        }) {

        TextField(value = selectedText,
            onValueChange = {},
            readOnly = true,
            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
            modifier = Modifier
                .menuAnchor()
                .fillMaxWidth()
        )

        ExposedDropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
            coffeeDrinks.forEach { item ->
                DropdownMenuItem(text = { Text(text = item) }, onClick = {
                    selectedText = item
                    expanded = false
                    Toast.makeText(ctx, item, Toast.LENGTH_SHORT).show()
                })
            }
        }
    }
}

相关问题