【原创】Jetpack Compose学习笔记(一)

Jetpack Compose学习笔记(一)

Jetpack Compose是Google推出的全新的UI框架。很多人都说学不动了,但是作为一个程序员,学不动也要学哦,不然就会被淘汰。

目录结构

HelloWorld式这里就免了,新建工程的目录结构就这个样子,默认新建了一个主题的包,同时在res目录下也没有了layout目录。Compose是响应式UI,不同以往的xml布局,所有页面都是通过代码来实现的。

初识

打开MainActivity如下

image.png

左边是编码,右边可以实时预览到效果,预览主要是通过@Preview注解来展示。

设置界面不再是之前的setContentView而是通过函数setContent,进入setContent方法里面我们也可以看到setContentView的调用,实际上JetpackCompose是在一个ComposeView上构建的UI体系。

预览工具

具体实现原理后面再学习,所话说工欲善其事,必先利其器,所以先学习下这个@Preview注解

@Preview的作用仅限右侧预览面板的使用,主要参数如下:

  • name 预览面板中该组件显示的名称

  • group 组名,在预览面板中以组显示

  • widthDp 预览面板中渲染的宽

  • heightDp 预览面板中渲染的高

  • fontScale 预览中字体缩放比例

  • showSystemUi 是否展示状态栏和actionbar,预览效果

  • showBackground 是否展示背景

  • backgroundColor 背景颜色

  • uiMode UI模式,夜间模式等

  • device 预览的设备型号

下面我们分别来看看各个参数的实际效果。

name

预览面板中该组件显示的名称,默认展示名称为你预览方法名字这里DefaultPreview。当我们配置以后就会显示配置的名称。

@Preview( name = "这是展示的名称", showBackground = true) @Composable fun DefaultPreview() { ComposeHelloTheme { Greeting("Android") } }

group

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

@Preview( name = "这是展示的名称", group= "简单页面", showBackground = true) @Composable fun DefaultPreview() { ComposeHelloTheme { Greeting("Android") } }

widthDp & heightDp

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

@Preview( name = "这是展示的名称", group= "简单页面", widthDp = 320, heightDp = 200, showBackground = true) @Composable fun DefaultPreview() { ComposeHelloTheme { Greeting("Android") } }

fontScale

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

@Preview( fontScale = 2f, showBackground = true ) @Composable fun FontScalePreview() { ComposeHelloTheme { Greeting("Android") } }

showSystemUi

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

@Preview( showSystemUi = true, showBackground = true ) @Composable fun ShowSystemUiPreview() { ComposeHelloTheme { Greeting("Android") } }

showBackground

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

@Preview(showBackground = true) @Composable fun ShowBackgroundPreview() { ComposeHelloTheme { Greeting("Android") } }

backgroundColor

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

@Preview( showBackground = true, backgroundColor = 0xABCC33 ) @Composable fun ShowBackgroundPreview() { ComposeHelloTheme { Greeting("Android") } }

uiMode

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

@Preview( showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES, ) @Composable fun ShowBackgroundPreview() { ComposeHelloTheme { Greeting("Android") } }

device

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

@Preview( showBackground = true, device = Devices.NEXUS_5 ) @Composable fun BackgroundColorPreview() { ComposeHelloTheme { Greeting("Android") } }

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


__EOF__

本文作者拜雨
本文链接https://www.cnblogs.com/baiyuas/p/14988885.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   拜雨  阅读(1491)  评论(0编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示