Android Compose 一:基础控件

Flutter 与 Compose 组件辣么像,难道是同一个google团队整的;也未深究,只是猜测。

创建项目

需要使用新版本Android studio,忽略步骤...

项目目录

MainActivity说明
1 系统默认页面

@Preview 修饰的方法,只用来供开发者预览使用,删除不影响运行

@Composable 修饰的方法 只能被@Composable修饰的方法调用

预览效果

2 MyApplicationTheme 说明

MyApplicationTheme 对应的时 ui.theme 中的Theme.kt中的 MyApplicationTheme ; ctrl+左键点过去

下面看代码

@Composable
fun MyApplicationTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {

咋看这这么像flutter 万物皆组件嘞;咱也不懂,咱也不敢吭;

  • 同样MyApplicationTheme 是被@Composable注解修饰
darkTheme: Boolean = isSystemInDarkTheme(), //判断是否是暗黑主题

那么我们把它写死成ture;

预览结果 变黑啦

dynamicColor: Boolean = false, //动态颜色

暂未发现有啥变化

代码里判断了支持动态颜色,调用了

/**
 * Creates a light dynamic color scheme.
 *
 * Use this function to create a color scheme based off the system wallpaper. If the developer
 * changes the wallpaper this color scheme will change accordingly. This dynamic scheme is a
 * light theme variant.
 *
 * @param context The context required to get system resource data.
 */
@RequiresApi(Build.VERSION_CODES.S)
fun dynamicLightColorScheme(context: Context): ColorScheme {
    val tonalPalette = dynamicTonalPalette(context)
    return lightColorScheme(
        primary = tonalPalette.primary40,
        onPrimary = tonalPalette.primary100,
        primaryContainer = tonalPalette.primary90,
        onPrimaryContainer = tonalPalette.primary10,
        inversePrimary = tonalPalette.primary80,
        secondary = tonalPalette.secondary40,
        onSecondary = tonalPalette.secondary100,
        secondaryContainer = tonalPalette.secondary90,
        onSecondaryContainer = tonalPalette.secondary10,
        tertiary = tonalPalette.tertiary40,
        onTertiary = tonalPalette.tertiary100,
        tertiaryContainer = tonalPalette.tertiary90,
        onTertiaryContainer = tonalPalette.tertiary10,
        background = tonalPalette.neutral99,
        onBackground = tonalPalette.neutral10,
        surface = tonalPalette.neutral99,
        onSurface = tonalPalette.neutral10,
        surfaceVariant = tonalPalette.neutralVariant90,
        onSurfaceVariant = tonalPalette.neutralVariant30,
        inverseSurface = tonalPalette.neutral20,
        inverseOnSurface = tonalPalette.neutral95,
        outline = tonalPalette.neutralVariant50,
    )
}

百度翻译

content: @Composable () -> Unit 页面布局内容@Composable修饰的组件

content 应该就是Surface,kotlin 最后一个参数如果是lambda表达式,那么lambda表达式可以放在外边

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyApplicationTheme(
        content = {
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = MaterialTheme.colorScheme.background
            ) {
                Greeting("Android")
            }
        }
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyApplicationTheme(){
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            Greeting("Android")
        }
    }
}
MyApplicationTheme 方法的实现代码分析
 val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {     //这就是动态颜色
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }

        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    val view = LocalView.current    
    if (!view.isInEditMode) {     //这个就是判断 是否在编辑模式  然后设置了状态栏的颜色
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme  //这一样也是设置状态栏的颜色  大概意思就是看翻译
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,    //设置主题颜色   ui.theme.Color
        typography = Typography,   // ui.theme.Type
        content = content
    )

view.isInEditMode 注释的翻译

WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme

通过以上的分析,我们或许可以实现 多主题的功能 用来更改app的主题颜色 字体显示大小(比如老年模式)等功能 //TODO 后续尝试

基础组件

组件一般都包含Modifier的参数

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = Modifier.padding()
    )
}

方法参数有个 modifier: Modifier = Modifier ctrl+左键 点

发现是Modifier.kt 的对象

 // The companion object implements `Modifier` so that it may be used as the start of a
    // modifier extension factory expression.
    companion object : Modifier {
        override fun <R> foldIn(initial: R, operation: (R, Element) -> R): R = initial
        override fun <R> foldOut(initial: R, operation: (Element, R) -> R): R = initial
        override fun any(predicate: (Element) -> Boolean): Boolean = false
        override fun all(predicate: (Element) -> Boolean): Boolean = true
        override infix fun then(other: Modifier): Modifier = other
        override fun toString() = "Modifier"
    }

使用Modifier都是使用 此伴生对象;是所有链式调用的起点

打个断点看看

例如我们写了如下代码

Text(
        text = "Hello $name!",
        modifier = Modifier.padding(20.dp)
    )

调用的是Padding.kt的 其实使用的是 PaddingModifier

@Stable
fun Modifier.padding(all: Dp) =
    this.then(
        PaddingModifier(
            start = all,
            top = all,
            end = all,
            bottom = all,
            rtlAware = true,
            inspectorInfo = debugInspectorInfo {
                name = "padding"
                value = all
            }
        )
    )

PaddingModifier 其实实现LayoutModifier

private class PaddingModifier(
    val start: Dp = 0.dp,
    val top: Dp = 0.dp,
    val end: Dp = 0.dp,
    val bottom: Dp = 0.dp,
    val rtlAware: Boolean,
    inspectorInfo: InspectorInfo.() -> Unit
) : LayoutModifier, InspectorValueInfo(inspectorInfo) {

LayoutModifier

@JvmDefaultWithCompatibility
interface LayoutModifier : Modifier.Element {

Modifier.Element

  @JvmDefaultWithCompatibility
   interface Element : Modifier {
       override fun <R> foldIn(initial: R, operation: (R, Element) -> R): R =
           operation(initial, this)

       override fun <R> foldOut(initial: R, operation: (Element, R) -> R): R =
           operation(this, initial)

       override fun any(predicate: (Element) -> Boolean): Boolean = predicate(this)

       override fun all(predicate: (Element) -> Boolean): Boolean = predicate(this)
   }

Modifier 是个接口 实现如下

Modifier 可用来设置形状,大小,位置,边距,透明度,点击 等

例如 Text的modifier可以设置如下

modifier = Modifier.padding()

Padding.kt Modifer的扩展方法

Text 文本
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}
Image 图片
 Image(
            painter = painterResource(id = R.drawable.img_lufei),  //资源
            contentDescription = "",   //描述
           modifier = Modifier.size(80.dp).clip(CircleShape),  //大小 形状
            contentScale = ContentScale.Crop  //渲染方式
        )
Spacer 空白
 Text(text = "Hello $name!")
            Spacer(modifier = Modifier.padding(20.dp))
            Text(text = "Hello llo lo $name!")
Column 横布局
 Column(
            modifier = Modifier.padding(10.dp)
        ) {
            Text(text = "Hello $name!")
            Spacer(modifier = Modifier.padding(20.dp))
            Text(text = "Hello llo lo $name!")
        }
Row 竖布局
Row(
        modifier = Modifier.wrapContentHeight(align = Alignment.CenterVertically)
    ) {
        Image(
            painter = painterResource(id = R.drawable.img_lufei),
            contentDescription = "",
            modifier = Modifier.size(80.dp).clip(CircleShape),
            contentScale = ContentScale.Crop
        )

        Column(
            modifier = Modifier.padding(10.dp)
        ) {
            Text(text = "Hello $name!")
            Spacer(modifier = Modifier.padding(20.dp))
            Text(text = "Hello llo lo $name!")
        }
    }
效果
其他布局用到时详解
接下来的问题
  • 布局的对齐方式 在父布局中的位置 父布局控制子布局的位置
相关推荐
建群新人小猿1 小时前
会员等级经验问题
android·开发语言·前端·javascript·php
1024小神2 小时前
tauri2.0版本开发苹果ios和安卓android应用,环境搭建和最后编译为apk
android·ios·tauri
兰琛2 小时前
20241121 android中树结构列表(使用recyclerView实现)
android·gitee
Y多了个想法3 小时前
RK3568 android11 适配敦泰触摸屏 FocalTech-ft5526
android·rk3568·触摸屏·tp·敦泰·focaltech·ft5526
NotesChapter4 小时前
Android吸顶效果,并有着ViewPager左右切换
android
_祝你今天愉快5 小时前
分析android :The binary version of its metadata is 1.8.0, expected version is 1.5.
android
暮志未晚Webgl5 小时前
109. UE5 GAS RPG 实现检查点的存档功能
android·java·ue5
麦田里的守望者江6 小时前
KMP 中的 expect 和 actual 声明
android·ios·kotlin
Dnelic-6 小时前
解决 Android 单元测试 No tests found for given includes:
android·junit·单元测试·问题记录·自学笔记
佛系小嘟嘟7 小时前
Android Studio不显示需要的tag日志解决办法《All logs entries are hidden by the filter》
android·ide·android studio