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.currentif (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)}darkTheme -> DarkColorSchemeelse -> LightColorScheme}val view = LocalView.current    if (!view.isInEditMode) {     //这个就是判断 是否在编辑模式  然后设置了状态栏的颜色SideEffect {val window = (view.context as Activity).windowwindow.statusBarColor = colorScheme.primary.toArgb()WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme  //这一样也是设置状态栏的颜色  大概意思就是看翻译}}MaterialTheme(colorScheme = colorScheme,    //设置主题颜色   ui.theme.Colortypography = Typography,   // ui.theme.Typecontent = 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 = initialoverride fun <R> foldOut(initial: R, operation: (Element, R) -> R): R = initialoverride fun any(predicate: (Element) -> Boolean): Boolean = falseoverride fun all(predicate: (Element) -> Boolean): Boolean = trueoverride infix fun then(other: Modifier): Modifier = otheroverride 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

  @JvmDefaultWithCompatibilityinterface 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!")}}
效果

在这里插入图片描述

其他布局用到时详解
接下来的问题
  • 布局的对齐方式 在父布局中的位置 父布局控制子布局的位置

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/10797.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VUE.JS详细的使用方法

Vue.js是一个轻量级的前端JavaScript框架&#xff0c;它用于构建用户界面和单页应用。以下是Vue.js的基本使用方法和帮助。 安装Vue.js 使用npm: npm install vue使用CDN: <script src"https://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.min.js"></script&…

撤销 git add 操作(忽略被追踪的文件)

文章目录 引言I git rm命令来取消暂存【推荐】II 撤销特定文件的暂存状态2.1 git rese2.2 git restoresee also引言 应用场景: 修改.gitignoregitignore只能忽略那些原来没有被追踪的文件,如果某些文件已经被纳入了版本管理中,则修改.gitignore是无效的。那么解决方法就是先…

Kruskal算法刷题笔记

理论基础&#xff1a; 例题&#xff1a; 卡码网---53&#xff1a;寻宝 题目 题目描述 在世界的某个区域&#xff0c;有一些分散的神秘岛屿&#xff0c;每个岛屿上都有一种珍稀的资源或者宝藏。国王打算在这些岛屿上建公路&#xff0c;方便运输。 不同岛屿之间&#xff0c…

精选多个炫酷的数据可视化大屏(含源码),拿走就用~

末尾有链接 演示地址&#xff1a;可视化大数据展示中心 (null.fit) 可视化大数据展示模板-科技语者 (chgskj.cn)

block性能考虑和线程安全

性能考虑 频繁地创建和销毁大量的 block 可能会对性能造成影响&#xff0c;特别是当这些 block 被拷贝到堆上时。同时&#xff0c;block 捕获大量数据时也会增加内存使用。 在讨论性能考虑时&#xff0c;主要关注的是 block 的创建、拷贝到堆上以及捕获变量的成本。以下是针对…

【Java】:方法重写、动态绑定和多态

目录 一个生动形象的例子 场景设定 1. 方法重写&#xff08;Method Overriding&#xff09; 2. 动态绑定&#xff08;Dynamic Binding&#xff09; 3. 多态&#xff08;Polymorphism&#xff09; 归纳关系&#xff1a; 重写 概念 条件 重写的示例 重载与重写的区别 …

CUDA is not availabe on this machine.

assert torch.cuda.is_available(), "CUDA is not availabe on this machine." AssertionError: CUDA is not availabe on this machine. 这个错误信息表明你尝试在PyTorch中使用CUDA&#xff08;也就是NVIDIA的GPU加速&#xff09;&#xff0c;但是你的机器上似乎没…

libssh C++封装之七(File)

1 概述 libssh是一个在客户端和服务器端实现SSHv2协议的多平台C库。使用libssh,您可以远程执行程序、传输文件、使用安全透明的隧道、管理公钥等等。本文描述的对libssh客户端功能的C++封装。 libssh下载地址 3 实现 3.6 File File类型可以读写远程文件。 3.6.1 File定义 …

使用rsync+lnotify实现远程数据实时同步备份

目录 1、定时备份与实时备份区别 2、配置客户端 2.1、在客户端安装inotify-tools软件。以便提供inotifywait inotifywatch 辅助工具程序 2.2 验证&#xff1a;监控客户端/data_backup目录的变化 2.3 编写自动同步脚本 2.4 后台运行脚本 2.5 验证数据实时同步效果 1、定…

【JS面试题】call - apply - bind

推荐哔站一个老师的视频讲解&#xff0c;非常详细易懂&#xff0c;5分钟学会&#xff01;前端面试题&#xff1a;call、apply、bind的基本概念 这三个都是函数的方法&#xff0c;用来改变函数中的this指向&#xff01; 关于call的使用&#xff1a;&#xff08;3个方法类似&am…

SpringCloud:服务拆分和远程调用

程序员老茶 &#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; P   S : 点赞是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#…

使用socat做端口转发

最近买的云上mongo数据库但是数据库不支持外网访问&#xff0c;准备做iptables转发但是一直不成功&#xff0c;腾讯云官方给予的解释是受服务器内启动的docker影响 做iptables转发会冲突&#xff0c;所以只能另想办法&#xff0c;我发现使用socat做转发也很好用&#xff0c;所以…

JAVA_4

JAVA_4 一、JAVA内存总体架构二、栈的特点如下三、堆的特点如下四、方法区&#xff08;又叫静态区&#xff0c;也是堆&#xff09;特点如下五、this的本质 一、JAVA内存总体架构 多个线程里面有&#xff1a;程序计数器、虚拟机栈、本地方法栈方法区&#xff1a;运行时常量池堆…

FPGA相关论文阅读

一、Achieving 100Gbps Intrusion Prevention on a Single Server 论文名称中文翻译&#xff1a;在单台服务器上实现100Gbps吞吐量的入侵防御检测。 文章中的Mixed-1和Norm-1 二、Distributed Password Hash Computation on Commodity Heterogeneous Programmable Platforms…

【回溯 字典树(前缀树)】212. 单词搜索 II

本文涉及知识点 回溯 字典树&#xff08;前缀树&#xff09; LeetCode212. 单词搜索 II 给定一个 m x n 二维字符网格 board 和一个单词&#xff08;字符串&#xff09;列表 words&#xff0c; 返回所有二维网格上的单词 。 单词必须按照字母顺序&#xff0c;通过 相邻的单元…

第3周 后端微服务基础架构与前端项目联调配备

第3周 后端微服务基础架构与前端项目联调配备 1. 微服务项目层次设计与Maven聚合1.1 项目层次设计1.2 父项目pom1.2.1 打包方式 1.3 创建通用 ************************************************************************************** 1. 微服务项目层次设计与Maven聚合 1.1…

电商平台遭遇DDOS、CC攻击有什么防护方案

电商平台遭遇DDOS、CC攻击有什么防护方案&#xff1f;在数字化浪潮的推动下&#xff0c;电商平台已成为现代商业的重要组成部分&#xff0c;为消费者提供便捷、多样的购物体验。然而&#xff0c;随着业务的发展&#xff0c;电商平台也面临着日益严峻的网络安全挑战&#xff0c;…

Tower for Mac:Git管理的新境界

Tower for Mac&#xff0c;让您的Git管理进入新境界&#xff01;这款专为Mac用户打造的Git客户端&#xff0c;凭借其出色的性能和丰富的功能&#xff0c;成为众多开发者的首选工具。 Tower不仅支持常规的Git操作&#xff0c;如提交、推送和拉取&#xff0c;还提供了许多高级功能…

四、VGA项目:联合精简帧+双fifo+sobel算法 实现VGA显示

前言&#xff1a;该项目实际上是在很多基础的小练习上合成起来的&#xff0c;例如涉及到uart&#xff08;rs232&#xff09;的数据传输、双fifo流水线操作、VGA图像显示&#xff0c;本次内容在此基础上又增添了sobel算法&#xff0c;能实现图像的边沿监测并VGA显示。 文章目录…

简单的DbUtils工具类【精细】

目录 单条通用增删改方法 1.创建maven项目&#xff0c;并加载依赖 2.创建数据库连接工具类(Dbutils类) 3.创建一个执行器(SqlExecutor类) 4.通用(增&#xff0c;删&#xff0c;改)方法 1.创建方法 2.创建userInfo实体类 3.创建测试类&#xff0c;测试增&#xff0c;删&#xf…