nowinandroid icon indicating copy to clipboard operation
nowinandroid copied to clipboard

[Bug]: Top app bar dissapears in not top level destinations

Open padrecedano opened this issue 1 year ago • 0 comments

Is there an existing issue for this?

  • [X] I have searched the existing issues

Is there a StackOverflow question about this issue?

  • [X] I have searched StackOverflow

What happened?

In the source code we see a clear intention that the TopAppBar is not displayed in those destinations that do not belong to TopLevelDestination:

            // Show the top app bar on top level destinations.
            val destination = appState.currentTopLevelDestination
            var shouldShowTopAppBar = false

            if (destination != null) {
                shouldShowTopAppBar = true
                NiaTopAppBar(
                    titleRes = destination.titleTextId,
                    navigationIcon = NiaIcons.Search,
                    navigationIconContentDescription = stringResource(
                        id = settingsR.string.feature_settings_top_app_bar_navigation_icon_description,
                    ),

What is the reason for this being mandatory and how can I change it?

In my case, I want to display content from the main menu of the application, and I need that content to have the TopAppBar.

I show two screenshots.

Screenshot_1727909589

In this second screenshot, when I scroll up, the text blends in with the device bar showing the time:

Screenshot_1727909608

Code:

@ExperimentalFoundationApi
@Composable
fun FileScreen(
    onFileClick: (String) -> Unit,
    modifier: Modifier = Modifier,
    fileName: String?,
    viewModel: FileViewModel = hiltViewModel(),

    ) {

    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    FileScreen(modifier = modifier, uiState = uiState)
}

@ExperimentalFoundationApi
@Composable
internal fun FileScreen(
    modifier: Modifier,
    uiState: FileViewModel.FileUiState
) {

    val state = rememberLazyListState()
    Box(
        modifier = modifier,
    ) {
        LazyColumn(
            state = state,
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            item {
                Spacer(Modifier.windowInsetsTopHeight(WindowInsets.safeDrawing))
            }
            when (uiState) {
                FileViewModel.FileUiState.Empty -> item { EmptyState() }
                is FileViewModel.FileUiState.Error -> item { ErrorState() }
                is FileViewModel.FileUiState.Loaded -> item {
                    FileToolbar(uiState = uiState)
                    FileResourceCardExpanded()
                }
                FileViewModel.FileUiState.Loading -> item { LoadingState() }
            }
            item {
                Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.safeDrawing))
            }
        }
        val itemsAvailable = 1
        val scrollbarState = state.scrollbarState(
            itemsAvailable = itemsAvailable,
        )
        state.DraggableScrollbar(
            modifier = Modifier
                .fillMaxHeight()
                .windowInsetsPadding(WindowInsets.systemBars)
                .padding(horizontal = 2.dp)
                .align(Alignment.CenterEnd),
            state = scrollbarState,
            orientation = Orientation.Vertical,
            onThumbMoved = state.rememberDraggableScroller(
                itemsAvailable = itemsAvailable,
            ),
        )
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FileToolbar(
    uiState: FileViewModel.FileUiState,
    modifier: Modifier = Modifier,
    showBackButton: Boolean = true,
    onBackClick: () -> Unit = {},
) {
    Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically,
        modifier = modifier
            .fillMaxWidth()
            .padding(bottom = 32.dp),
    ) {
        if (showBackButton) {
            IconButton(onClick = { onBackClick() }) {
                Icon(
                    imageVector = LPlusIcons.ArrowBack,
                    contentDescription = stringResource(
                        id = R.string.core_ui_back,
                    ),
                )
            }
        } else {
            Spacer(modifier = Modifier.width(1.dp))
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FileResourceCardExpanded() {
    Card(
        shape = RoundedCornerShape(16.dp),
        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface),
    ) {
        Column {
            Box(
                modifier = Modifier.padding(16.dp),
            ) {
                Column {
                    Spacer(modifier = Modifier.height(12.dp))
                    Row {
                        var title: String = "Title"
                        UniversalisResourceTitle(
                            title,
                            modifier = Modifier.fillMaxWidth((.8f)),
                        )
                        Spacer(modifier = Modifier.weight(1f))
                    }
                    Spacer(modifier = Modifier.height(14.dp))
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        Spacer(modifier = Modifier.height(14.dp))
                        var lipsum = LoremIpsum()
                        Text(lipsum.values.last())
                    }
                }
            }
        }
    }
}

Relevant logcat output

No response

Code of Conduct

  • [X] I agree to follow this project's Code of Conduct

padrecedano avatar Oct 02 '24 23:10 padrecedano