Compose状态栏的一些尝试记录（一）

贴上效果图以及完整代码

需要加入的库，可以自己看下版本

    implementation "androidx.window:window:1.0.0"
    implementation "com.google.accompanist:accompanist-systemuicontroller:0.24.13-rc"

代码如下：说明一下，里面的代码有公用代码，后面的直接替换掉最后一个代码块即可，有些内容可能仅仅是数值改变了，从而得到不同的效果，所以可以自己调试一下里面的数值，这样印象更深刻些

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.SideEffect
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.core.view.WindowCompat
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.systemuicontroller.rememberSystemUiController
import com.un.immersionstatusbar.ui.theme.ImmersionStatusBarTheme
import com.un.immersionstatusbar.utils.verticalGradientScrim

// 相同代码
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        WindowCompat.setDecorFitsSystemWindows(window, false)

        setContent {
            ImmersionStatusBarTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = Color.White
                ) {
                    SystemUiControllerX()
                    StatusBarCustom6()
                }
            }
        }
    }
}

// 相同代码
@Composable
fun SystemUiControllerX() {
    val systemUiController = rememberSystemUiController()
    val useDarkIcons = MaterialTheme.colors.isLight
    SideEffect {
        systemUiController.setSystemBarsColor(
            color = Color.Transparent,
            darkIcons = useDarkIcons
        )
    }
}

// 复制替换掉以下代码块即可
/**
 * 半透明状态栏
 */
@OptIn(ExperimentalPagerApi::class)
@Composable
fun StatusBarCustom6() {
    Column(modifier = Modifier
        .fillMaxSize().background(Color.Yellow)
        .verticalGradientScrim(
            color = MaterialTheme.colors.primary.copy(alpha = 0.58f),
            startYPercentage = 0.99f,
            endYPercentage = 0.24f
        )){
        val appBarColor = MaterialTheme.colors.surface.copy(alpha = 0.1f)

        Spacer(
            Modifier.fillMaxWidth().background(appBarColor)
                .windowInsetsTopHeight(WindowInsets.statusBars)
        )
    }
}

---

分割线

代码如下：

@OptIn(ExperimentalPagerApi::class)
@Composable
fun StatusBarCustom() {
    Column( ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .verticalGradientScrim(
                    color = MaterialTheme.colors.primary.copy(alpha = 0.98f),
                    startYPercentage = 1f,
                    endYPercentage = 0f
                )
        ) {
            /**
             * 设置状态栏的透明度
             */
            val appBarColor = MaterialTheme.colors.surface.copy(alpha = 0.15f)

            Spacer(
                Modifier
                    .background(appBarColor)
                    .fillMaxWidth()
                    .windowInsetsTopHeight(WindowInsets.statusBars)
            )
        }
    }
}

---

分割线

@OptIn(ExperimentalPagerApi::class)
@Composable
fun StatusBarCustom2() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .verticalGradientScrim(
                color = MaterialTheme.colors.primary.copy(alpha = 0.88f),
                startYPercentage = 0.8f,
                endYPercentage = 0.1f,
            )
    ) {}
}

---

分割线

@Composable
fun StatusBarCustomTest2() {
    Column(  modifier = Modifier.fillMaxWidth().background(Color.Cyan)) {
        SystemUiControllerX()
        StatusBarCustom3()
        Text("内容显示在状态栏下面", modifier = Modifier.background(Color.Green)
            .fillMaxWidth().verticalGradientScrim(
                color = MaterialTheme.colors.primary.copy(alpha = 0.88f),
                startYPercentage = 0.9f,
                endYPercentage = 0.02f,
            ).systemBarsPadding()
        )
    }
}

---

分割线

@Composable
fun StatusBarCustomTest22() {
    Column(  modifier = Modifier.fillMaxWidth()) {
        SystemUiControllerX()
        Spacer(modifier = Modifier.background(Color.Green)
            .fillMaxWidth().verticalGradientScrim(
                color = MaterialTheme.colors.primary.copy(alpha = 0.48f),
                startYPercentage = 0.9f,
                endYPercentage = 0.02f,
            ).systemBarsPadding()
        )
    }
}