【原创】Jetpack Compose学习笔记(一)
Jetpack Compose学习笔记(一)
Jetpack Compose
是Google推出的全新的UI框架。很多人都说学不动了,但是作为一个程序员,学不动也要学哦,不然就会被淘汰。
目录结构
HelloWorld
式这里就免了,新建工程的目录结构就这个样子,默认新建了一个主题的包,同时在res目录下也没有了layout目录。Compose
是响应式UI,不同以往的xml布局,所有页面都是通过代码来实现的。

初识
打开MainActivity
如下
左边是编码,右边可以实时预览到效果,预览主要是通过@Preview
注解来展示。
设置界面不再是之前的setContentView
而是通过函数setContent
,进入setContent
方法里面我们也可以看到setContentView
的调用,实际上JetpackCompose
是在一个ComposeView
上构建的UI体系。
预览工具
具体实现原理后面再学习,所话说工欲善其事,必先利其器,所以先学习下这个@Preview
注解
@Preview
的作用仅限右侧预览面板的使用,主要参数如下:
-
name 预览面板中该组件显示的名称
-
group 组名,在预览面板中以组显示
-
widthDp 预览面板中渲染的宽
-
heightDp 预览面板中渲染的高
-
fontScale 预览中字体缩放比例
-
showSystemUi 是否展示状态栏和actionbar,预览效果
-
showBackground 是否展示背景
-
backgroundColor 背景颜色
-
uiMode UI模式,夜间模式等
-
device 预览的设备型号
下面我们分别来看看各个参数的实际效果。
name
预览面板中该组件显示的名称,默认展示名称为你预览方法名字这里DefaultPreview
。当我们配置以后就会显示配置的名称。

group
在开发中我们会用很多预览的组件,为了方便管理,可以通过该属性将预览的组件分组,在预览时候选择同一组内的显示

widthDp & heightDp
我们可以通过配置widthDp和heightDp属性来指定预览界面的宽高。下图配置了320x200
大小的预览界面,单位是dp。

fontScale
在预览中如果你觉得字体显示太小或太大,你可以通过设置fontScale属性来设置字体的缩放大小比例,最小0.01。下图是默认1
与2倍
缩放的展示。

showSystemUi
如果你看惯了xml配置中那种展示效果,你可以通过配置showSystemUi为true
来展示页面效果。

showBackground
默认新建的项目预览showBackground为true
,也即展示背景,背景默认白色。如果不想展示去掉该属性即可,效果如图中上

backgroundColor
为了更好的看到预览效果,我们可以通过backgroundColor配置预览页面的背景色。设置该属性必须设置showBackground = true否则无效果哦。

uiMode
如果你想看下夜间模式,可以通过配置uiMode来实现。下面展示了夜间模式效果。

device
话说这个属性没测试出来什么效果。。。其实你都能自定义宽高了,也不需要用这个设备显示效果了。

呃呵🤗🇨🇳,今天到这,下个学学Text
__EOF__

本文链接:https://www.cnblogs.com/baiyuas/p/14988885.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!