I want to create a top app bar that contains a back icon and a search. Here is what I have tried.

SmallTopAppBar(
    title = {
        Text(
            text = "MyApp"
        )
    },
    navigationIcon = {
        IconButton(
            onClick = navController.popBackStack()
        ) {
            Icon(
                imageVector = Icons.Filled.ArrowBack,
                contentDescription = null
            )
        }
    },
    actions = {
        OutlinedTextField(
            modifier = Modifier.fillMaxWidth(1f) //Here is the issue.
                .padding(2.dp)
            value = search,
            maxLines = 1,
            singleLine = true
        )
    }
)

The problem comes when I try to use .fillMaxWidth(1f), it doesn't take only the remaining space, but it get over the arrow button?

This is what I expect:

How to solve this?

CodePudding user response：

You can put the OutlinedTextField inside the title attribute instead of the actions attribute

SmallTopAppBar(
    title = {
        OutlinedTextField(
            value = text,
            onValueChange = {text = it},
            modifier = Modifier.fillMaxWidth(1f) 
                .padding(2.dp),
            maxLines = 1,
            singleLine = true
        )
    },
    navigationIcon = {
        //IconButton            
    },
    actions = {
        //IconButton
    }
)