Jetpack Compose Scaffold和TopAppBar(顶部导航)

Jetpack Compose 以下简称JC
JC提供了Scaffold这个组件来实现一些导航的效果，例如顶部菜单，底部导航，旁边的抽屉菜单等等，Scaffold的意思是脚手架，也就是Scaffold这是提供的一个支架，或者说固定了一些控件实现的位置。下面通过实现TopAppBar来说明。
TopAppBar有两种实现方式，下面这个是一种实现方式。

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

还有第二种实现方式：

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

两者方式的区别就是，第一种方式是已经做了限制的，内部Icon和文本的位置都有一定的限制，而第二种方式实际上是完全的自定义样式，需要自己手动设置位置，总的来说，还是推荐使用第一种比较方便。下面举例说明。
第一种方式：
看注释，写的非常清楚了，这种方式标题部分非常容易居中对齐，第二种方式可能出现问题。

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

                    },
                    //导航按钮，一般为返回按钮
                    navigationIcon = {
    
                        IconButton(onClick = {
     println("返回") }) {
    
                            Icon(imageVector = Icons.Default.ArrowBack, contentDescription = null)
                        }
                    },
                    //其它按钮
                    actions = {
    
                        IconButton(onClick = {
     println("分享") }) {
    
                            Icon(imageVector = Icons.Default.Share, contentDescription = null)
                        }
                        IconButton(onClick = {
     println("设置") }) {
    
                            Icon(imageVector = Icons.Default.Settings, contentDescription = null)
                        }
                    },
                    //背景色
                    backgroundColor = Color(0xffffffaa),
                    //内容颜色
                    contentColor = Color.Black,
                    //底部阴影
                    elevation = 5.dp
                )

第二种方式的需要完全自定义控件，特别是标题Text的fillMaxWidth()方法，如果设置为1.0f，那么左边的按钮将看不到，如果写一个比例如0.8又可能出现位置的偏差，还是比较难以看着控制的，可能需要别的约束控件来约束位置，那样的话就比第一种方式麻烦的多。

 TopAppBar(contentColor = Color.Black, backgroundColor = Color.Red) {
    
                    //返回按钮
                    IconButton(onClick = {
     }) {
    
                        Icon(Icons.Filled.ArrowBack, null)
                    }
                    Text(text = "TODO", modifier = Modifier.fillMaxWidth(0.9f).wrapContentSize(Alignment.Center))
                    IconButton(onClick = {
     println("分享") }) {
    
                        Icon(Icons.Default.Share, null)
                    }
                    IconButton(onClick = {
     println("设置") }) {
    
                        Icon(Icons.Default.Settings, null)
                    }
                }