Jetpack compose scaffold and topappbar (top navigation)

Jetpack Compose hereinafter referred to as JC
JC Provides Scaffold This component is used to realize some navigation effects , E.g. top menu , Bottom navigation , Next to the drawer menu and so on ,Scaffold Scaffolding means scaffolding , That is to say Scaffold This is a bracket provided , Or fix the position of some control implementation . The following is achieved by TopAppBar To illustrate .
TopAppBar There are two ways to do it , The following is an implementation .

@Composable
public fun TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier,
    navigationIcon: @Composable() (() -> Unit)?,
    actions: @Composable() (RowScope.() -> Unit),
    backgroundColor: Color,
    contentColor: Color,
    elevation: Dp
): Unit

There is also a second implementation ：

@Composable
public fun TopAppBar(
    modifier: Modifier,
    backgroundColor: Color,
    contentColor: Color,
    elevation: Dp,
    contentPadding: PaddingValues,
    content: @Composable() (RowScope.() -> Unit)
): Unit

The difference between the two ways is , The first method is the one that has been restricted , Inside Icon And the position of the text , The second method is actually a completely custom style , You need to set the position manually , in general , The first one is more convenient . Here's an example .
The first way ：
Read notes , It's very clear , This way the title section is very easy to center , The second approach may be problematic .

TopAppBar(
                    // title 
                    title = {
    
                        Text(
                            modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.Center),
                            text = "TODO"
                        )

                    },
                    // Navigation button , Generally, it is a return button 
                    navigationIcon = {
    
                        IconButton(onClick = {
     println(" return ") }) {
    
                            Icon(imageVector = Icons.Default.ArrowBack, contentDescription = null)
                        }
                    },
                    // Other buttons 
                    actions = {
    
                        IconButton(onClick = {
     println(" Share ") }) {
    
                            Icon(imageVector = Icons.Default.Share, contentDescription = null)
                        }
                        IconButton(onClick = {
     println(" Set up ") }) {
    
                            Icon(imageVector = Icons.Default.Settings, contentDescription = null)
                        }
                    },
                    // Background color 
                    backgroundColor = Color(0xffffffaa),
                    // Content color 
                    contentColor = Color.Black,
                    // Bottom shadow 
                    elevation = 5.dp
                )

The second method needs to completely customize the control , Especially the title Text Of fillMaxWidth() Method , If set to 1.0f, Then the button on the left will not be visible , If you write a scale like 0.8 There may also be position deviation , It is still difficult to control , You may need other constraint controls to constrain the position , That would be much more troublesome than the first way .

 TopAppBar(contentColor = Color.Black, backgroundColor = Color.Red) {
    
                    // Return button 
                    IconButton(onClick = {
     }) {
    
                        Icon(Icons.Filled.ArrowBack, null)
                    }
                    Text(text = "TODO", modifier = Modifier.fillMaxWidth(0.9f).wrapContentSize(Alignment.Center))
                    IconButton(onClick = {
     println(" Share ") }) {
    
                        Icon(Icons.Default.Share, null)
                    }
                    IconButton(onClick = {
     println(" Set up ") }) {
    
                        Icon(Icons.Default.Settings, null)
                    }
                }