Compose中Material Design风格的设计我们的做法如下：

1、使用Scafoold作为页面的顶级，Scafoold中承载topbar和bottombar分别作为顶部导航栏和底部导航栏。

2、调用WindowCompat.setDecorFitsSystemWindows(window, false)方法让我们的布局超出状态栏和底部导航栏的位置 3、使用ProvideWindowInsets包裹布局，使我们可以获取到状态栏和底部导航栏的高度（不包裹无法获取状态栏和底部导航栏高度） 4、手动处理顶部和底部导航栏让页面适应屏幕

界面设计

TopBar设计

实现方式

因为使用WindowCompat.setDecorFitsSystemWindows(window, false)设置后页面布局顶到了状态栏的上面，因为我们需要用一个Spacer来填充状态栏，让我们的布局看起来正常点

代码

如下是封装的状态栏方法

@Composable
fun TopBarView(title: String, callback: () -> Unit) {

    Column {

        Spacer(

            modifier = Modifier

                .statusBarsHeight()//设置状态栏高度

                .fillMaxWidth()

        )

        TopAppBar(title = {

            Text(title)

        }, navigationIcon = {

            IconButton(onClick = {

                callback()

            }) {

                Icon(Icons.Filled.ArrowBack, "")

            }

        })

    }

}
 

处理状态栏前后的ui状态

处理前：

 处理后：

 结论是经过我们的处理后解决了状态栏的遮挡

BottomBar设计

实现方式

因为使用ProvideWindowInsets包裹后底部导航栏顶到了底部，所以需要填充一个底部导航栏高度的Spacer。

代码

bottomBar = {

            Column {

                Row(

                    modifier = Modifier

                        .fillMaxWidth()

                        .height(60.dp)

                        .background(statusbarColor),

                    horizontalArrangement = Arrangement.SpaceAround,

                    verticalAlignment = Alignment.CenterVertically

                ){

                    Text(text = "首页")

                    Text(text = "通讯录")

                    Text(text = "朋友圈")

                    Text(text = "我的")


                }

                Spacer(modifier = Modifier.navigationBarsHeight())

            }

        }
 

处理状态栏前后的ui状态

处理前：

处理后：

结论是经过我们的处理后解决了底部导航栏的遮挡问题

状态栏和底部导航栏颜色的处理

状态栏和底部导航栏颜色设置

依赖

   implementation "com.google.accompanist:accompanist-insets:0.16.0"

    implementation "com.google.accompanist:accompanist-systemuicontroller:0.16.0"
 

代码

 rememberSystemUiController().run {

                    setStatusBarColor(statusbarColor, false)

                    setSystemBarsColor(statusbarColor, false)

                    setNavigationBarColor(statusbarColor, false)

                }
 

整体效果

我们发现状态栏和底部导航栏的颜色都变了

如何处理内容部分超出底部导航栏的区域

使用WindowCompat.setDecorFitsSystemWindows(window, false)处理了页面后，Scafoold的内容区域也会被顶到底部导航栏的下方，同样也需要我们处理

以下是处理前和处理后的代码和效果

处理前

代码

LazyColumn() {

            items(30) { index ->

                Box(

                    modifier = Modifier

                        .padding(top = 10.dp)

                        .fillMaxWidth()

                        .height(50.dp)

                        .background(Color.Green),

                    contentAlignment = Alignment.Center

                ) {

                    Text(text = index.toString())

                }

            }

        }
 

效果

这里只展示到第27个item，第28、29个item没有展示出来，所以需要处理才行 

处理后

代码

 {padding->

        LazyColumn(Modifier.padding(bottom = padding.calculateBottomPadding())) {//这里会计算出距离底部的距离，然后设置距离底部的padding

            items(30) { index ->

                Box(

                    modifier = Modifier

                        .padding(top = 10.dp)

                        .fillMaxWidth()

                        .height(50.dp)

                        .background(Color.Green),

                    contentAlignment = Alignment.Center

                ) {

                    Text(text = index.toString())

                }

            }

        }


    }
 

效果

改正后的第29个item展示了出来 

代码：github.com/ananananzhu…