androidkotlinscaffold

why my Scaffold topBar is not working well(look the image)


I dont know why my Scaffold is not working Currectly(in topBar ) could you help me to fix it please?

this is my Code :

package com.farshadchalenges.littlelemonapp03

import android.annotation.SuppressLint
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.tooling.preview.Preview

@ExperimentalMaterial3Api
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HomeScreen()
        }
    }


    @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
    @Composable
    fun HomeScreen() {
        Scaffold(
            topBar = {
                TopAppBar()
            }
        ) {
            Column {
                UpperPanel()
                LowerPanel()
                var number by rememberSaveable {
                    mutableStateOf(0)
                }
                Counting(number, { number-- }, { number++ })
            }
        }

    }

    @Preview(showBackground = true)
    @Composable
    fun HomeScreenPreview() {
        HomeScreen()
    }
}

i tried to search and find the solution but i couldn't . and this is the error that i recieving : Content padding parameter it is not used


Solution

  • This is a fairly easy solution: Scaffold's topBar places a composable at the top of the screen, then it measures the height and width of the topBar, which you can use to move all of the content of the Scaffold (in your case the column composable) to make sure your content is not hidden (partially at least) by the topBar, what you should do to fix it is:

        @Composable
        fun HomeScreen() {
            Scaffold(
                topBar = {
                    TopAppBar()
                }
            ) { contentPadding ->
                Column(modifier = Modifier.padding(contentPadding)) {
                    UpperPanel()
                    LowerPanel()
                    var number by rememberSaveable {
                        mutableStateOf(0)
                    }
                    Counting(number, { number-- }, { number++ })
                }
            }
    
        }