Android | Compose 初上手（下）

setContent {
    PrimaryTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            Column {
                Row {
                    Button(
                        onClick = { themeTypeState.value = ThemeType.RED_THEME },
                        modifier = Modifier.width(100.dp),
                        colors = ButtonDefaults.buttonColors(containerColor = Color.Yellow)
                    ) {
                        Greeting(name = "按钮1")
                    }
                    Button(
                        onClick = { themeTypeState.value = ThemeType.GREEN_THEME },
                        modifier = Modifier.width(100.dp),
                        colors = ButtonDefaults.elevatedButtonColors()
                    ) {
                        Greeting(name = "按钮2")
                    }
                }
                Greeting(name = "Hello Android")
                Greeting(name = "Hello 345")
            }
        }
    }
}

fun Text(
    text: String, //显示内容
    modifier: Modifier = Modifier, //修饰，可修改透明度，边框，背景等
    color: Color = Color.Unspecified, //文字颜色
    fontSize: TextUnit = TextUnit.Unspecified,// size
    fontStyle: FontStyle? = null, //文字样式，粗体，斜体等
    fontWeight: FontWeight? = null,//文字厚度
    fontFamily: FontFamily? = null,//字体
    letterSpacing: TextUnit = TextUnit.Unspecified, //用于与文本相关的维度值的单位。该组件还在测试中
    textDecoration: TextDecoration? = null,//文字装饰，中划线，下划线
    textAlign: TextAlign? = null,对齐方式
    lineHeight: TextUnit = TextUnit.Unspecified,//行高
    overflow: TextOverflow = TextOverflow.Clip,//如何处理溢出，默认裁切
    softWrap: Boolean = true,//是否软换行
    maxLines: Int = Int.MAX_VALUE,//最大行数
    onTextLayout: (TextLayoutResult) -> Unit = {},//计算布局时回调
    style: TextStyle = LocalTextStyle.current //文本的样式配置，如颜色、字体、行高等。
)

@Composable
fun Greeting(name: String) {
    Text(
        text = name,
        fontSize = 18.sp,
        fontWeight = FontWeight.Medium,
        color = MaterialTheme.colorScheme.primary,
        modifier = Modifier.height(30.dp)
    )
}

fun Button(
    onClick: () -> Unit,//点击时调用
    modifier: Modifier = Modifier,//同上
    enabled: Boolean = true,//是否启用
    elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),// z轴上的高度
    shape: Shape = FilledButtonTokens.ContainerShape.toShape(), 
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

Button(
    onClick = { themeTypeState.value = ThemeType.GREEN_THEME },
    modifier = Modifier.width(100.dp),
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Yellow,
        contentColor = Color.Red,
        disabledContainerColor = Color.Black,
        disabledContentColor = Color.Green
    )
) {
    Greeting(name = "按钮2")
}

Image
@Composable
fun Image(
    painter: Painter,
    bitmap: ImageBitmap, //
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
)

@Composable
@Preview
fun Image() {
    Image(
        painter = painterResource(id = R.drawable.one),
        contentDescription = "无障碍提示",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .width(100.dp)
            .height(100.dp)
    )
}

@Composable
@Preview
fun Image() {
    Image(
        painter = painterResource(id = R.drawable.one),
        contentDescription = "无障碍提示",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .width(100.dp)
            .height(100.dp)
            .clip(shape = CircleShape)
            .border(2.dp, color = Color.Red, shape = CircleShape)
    )
}

//图片加载库
implementation("io.coil-kt:coil:2.0.0")
implementation("io.coil-kt:coil-compose:2.0.0")

@Composable
@Preview
fun Image() {
    AsyncImage(
        model = "https://img0.baidu.com/it/u=3147375221,1813079756&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=836",
        contentDescription = "无障碍提示",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .width(100.dp)
            .height(100.dp)
            .clip(shape = CircleShape)
            .border(2.dp, color = Color.Red, shape = CircleShape)
    )
}

fun Surface(
    modifier: Modifier = Modifier,
    shape: Shape = Shapes.None,
    color: Color = MaterialTheme.colorScheme.surface,
    contentColor: Color = contentColorFor(color),
    tonalElevation: Dp = 0.dp,
    shadowElevation: Dp = 0.dp,
    border: BorderStroke? = null,
    content: @Composable () -> Unit
)

fun Scaffold(
    modifier: Modifier = Modifier,
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    snackbarHost: @Composable () -> Unit = {},
    floatingActionButton: @Composable () -> Unit = {},
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    containerColor: Color = MaterialTheme.colorScheme.background,
    contentColor: Color = contentColorFor(containerColor),
    content: @Composable (PaddingValues) -> Unit
)

Scaffold(
    topBar = {
       //.....
    },
    bottomBar = bottomBar,
) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(top = it.calculateTopPadding(), bottom = it.calculateBottomPadding())
    ) {
        content.invoke(it)
    }
}

///系统 UI 控制器
implementation "com.google.accompanist:accompanist-systemuicontroller:0.24.8-beta"
//正确获取状态栏高度
api "com.google.accompanist:accompanist-insets-ui:0.24.8-beta"

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    WindowCompat.setDecorFitsSystemWindows(window, false)
    setContent {
        SetImmersion()
        PrimaryTheme {
            SetContent()
        }
    }
}
@Composable
private fun SetImmersion() {
    if (isImmersion()) {
        val systemUiController = rememberSystemUiController()
        SideEffect {
            systemUiController.run {
                setSystemBarsColor(color = Color.Transparent, darkIcons = isDark())
                setNavigationBarColor(color = Color.Black)
            }
        }
    }
}

@Composable
fun MainCompose(navController: NavHostController, mainBottomState: MutableState<Int>) {
    SetScaffold(
        bottomBar = {
            BottomBar(mainBottomState)
        }
    ) {
        when (mainBottomState.value) {
            0 -> HomeCompos(navController)
            1 -> ProjectCompos()
            2 -> FLCompos()
            else -> UserCompos()
        }
    }
}
@Composable
private fun BottomBar(mainBottomState: MutableState<Int>) {
    BottomNavigation(
        backgroundColor = MaterialTheme.colors.background,
    ) {
        navigationItems.forEachIndexed { index, navigationItem ->
            BottomNavigationItem(
                selected = mainBottomState.value == index,
                onClick = {
                    mainBottomState.value = index
                },
                icon = {
                    Icon(
                        imageVector = navigationItem.icon,
                        contentDescription = navigationItem.name
                    )
                },
                label = {
                    BottomText(
                        isSelect = mainBottomState.value == index,
                        name = navigationItem.name
                    )
                },
                selectedContentColor = Color.White,
                unselectedContentColor = Color.Black
            )
        }
    }
}
@Composable
fun BottomText(isSelect: Boolean, name: String) {
    if (isSelect) {
        Text(
            text = name,
            color = MaterialTheme.colors.primary,
            fontSize = 12.sp
        )
    } else {
        Text(
            text = name,
            color = Color.Black,
            fontSize = 12.sp
        )
    }
}