首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Jetpack-Compose 学习笔记(二)—— Compose 布局你学会了么?

在 Compose 构建的 composition 树中,如果需要将顶层的 Composable 函数中的某个变量传递到最底层的 Composable 函数,通常最简单有效的方法就是:1)定义一个全局变量...; 背景,Surface 在 shape 指定的形状上填充颜色。...这种实现方法最简单,但是会在页面开始展示时,将列表中所有的 item 加载到内存中,虽然很多 item 都没有显示在屏幕上,这种方法当列表内容很多时,会出现内存占用大的问题。...当然,ConstraintLayout 确实可以解决 View 体系中多层嵌套的问题,那么在 Compose 中也可以使用吗? 答案是肯定的。...要把 Text 放在整个屏幕的水平居中的位置,需要在 ConstraintLayout 中设置 Modifier.fillMaxWidth() 即可。

3.3K31
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【Jetpack】DataBinding 架构组件 ( 数据绑定技术简介 | Android 中的 DataBinding 数据绑定 | 启动数据绑定 | 定义数据类 | 布局文件转换 )

    Model 与 用户界面 View 进行绑定 ; 用户界面 修改 数据时 , 会自动更新到 数据模型 中 ; 数据模型 中的数据 改变时 , 用户界面 中 的数据会自动更新 ; 数据绑定 可以 使代码...布局文件中的 UI 组件 与 数据模型 Model 进行绑定 ; 当 用户 通过 UI 组件 修改数据时 , 会将数据自动更新到 数据模型 中 ; 数据模型 中的数据 改变时 , 会自动更新到 UI...组件 中 ; 使用 DataBinding 可以在 Android 的布局文件 中 , 承担部分 Activity 组件的工作 , 减少传统方式用法的 耦合度 ; 如 : 想要将 数据设置到 TextView...视图中查看 , 方便开发调试 , 不会显示在最终的应用中 ; 在布局文件中 , 使用 @{student.变量名} 获取该数据类型对象的成员 , 并设置到布局组件中 ; 在 UI 界面中 , 成功显示了 Student 对象的 name 和 age 字段值 ;

    1.6K20

    带你领略 ConstraintLayout 1.1 的新功能前言带你领略 ConstraintLayout 1.1 的新功能

    带你领略 ConstraintLayout 1.1 的新功能 约束布局(ConstraintLayout)通过使用 Android Studio 中的可视化编辑器来为您生成绝大多数的 UI,进而达到简化...在 1.1 版本中,我们已经修复了链条的一些问题,并使它们能够处理更多的视图。您可以通过在两边添加约束来生成一个链条。例如在下面这个动画中,每个视图之间都有一个约束。 ?...在布置国际化字符串或显示用户生成的无法预测大小的内容时,屏障非常有用。 ? image 屏障允许您通过几个视图来创建一个约束。 屏障将始终将自己置于虚拟群组之外,并且您可以使用它来限制其他视图。...一个 ConstraintSet 仅持有一个 ConstraintLayout 的约束。你可以在代码中创建一个ConstraintSet,或者从一个布局文件中加载它。...如果你想尝试试验性的优化上述中的 dimensions 和 chains,你可以在 ConstraintLayout 中通过如下代码来启用它们: ConstraintLayout

    1.7K20

    100行JavaScript代码在React中优雅的实现简单组件keep-Alive

    ,从详情页退回列表页时,需要停留在离开列表页时的浏览位置上 类似的数据或场景还有已填写但未提交的表单、管理系统中可切换和可关闭的功能标签等,这类数据随着用户交互逐渐变化或增长,这里理解为状态,在交互过程中...,因为某些原因需要临时离开交互场景,则需要对状态进行保存 在 React 中,我们通常会使用路由去管理不同的页面,而在切换页面时,路由将会卸载掉未匹配的页面组件,所以上述列表页例子中,当用户从详情页退回列表页时...,会回到列表页顶部,因为列表页组件被路由卸载后重建了,状态被丢失 如何实现 React 中的状态保存 在 Vue 中,我们可以非常便捷地通过 标签实现状态的保存,该标签会缓存不活动的组件实例...,我们需要研究如何自动保存状态 最初的版本react-keep-alive image.png 1500行TypeScript代码在React中实现组件keep-alive 我的这篇文章对源码进行了解析...image.png 庖丁解牛,源码解析 最简单版本的react中keep-alive实现演示地址 使用方式:开箱即用 import React, { useState } from 'react

    5K10

    带你领略 ConstraintLayout 1.1 的新功能

    )通过使用 Android Studio 中的可视化编辑器来为您生成绝大多数的 UI,进而达到简化 Android 中创建复杂布局的目的。...在 1.1 版本中,我们已经修复了链条的一些问题,并使它们能够处理更多的视图。您可以通过在两边添加约束来生成一个链条。例如在下面这个动画中,每个视图之间都有一个约束。 ?...在布置国际化字符串或显示用户生成的无法预测大小的内容时,屏障非常有用。 ? 屏障允许您通过几个视图来创建一个约束。 屏障将始终将自己置于虚拟群组之外,并且您可以使用它来限制其他视图。...一个 ConstraintSet 仅持有一个 ConstraintLayout 的约束。你可以在代码中创建一个ConstraintSet,或者从一个布局文件中加载它。...如果你想尝试试验性的优化上述中的 dimensions 和 chains,你可以在 ConstraintLayout 中通过如下代码来启用它们: ConstraintLayout

    1.5K20

    【建议收藏】Jetpack Compose编程知识全汇总 (含详细实例讲解)

    包含了基本组件compose.ui、Material Design 组件、动画组件等众多UI组件,在此我就不赘述了,在对应的文档中大家都可以参阅,此处我重点讲解一下关于Compose的关键点 ####...`group: String`: 为该Preview设置group名字,可以在UI中以group为单位显示。 6. `fontScale: Float`: 可以在预览中对字体放大,范围是从0.01。...setContent的方法也是有@Compose注解的方法。所以,在setContent中写入关于UI的@Compopse方法,即可在Activity中显示。...Modifier.fillMaxHeight() // 填充整个高度 Modifier.fillMaxSize() // 填充整个宽度和高度 Modifier.width(2.dp) // 设置宽度...Compose 如果想使用Compose的情况下,又不想迁移整个应用,可以在xml里面增加ComposeView,类似于占位符,然后在Actviity/fragment中寻找该控件并调用setContent

    6.5K60

    端开发技术——解密Flutter响应式布局

    Android的方法 为了处理不同的屏幕尺寸和像素密度,在Android中使用了以下概念: 1.1 ConstraintLayout Android UI设计中引入的一个革命性的东西是ConstraintLayout...但这并不能解决大型设备的问题,在大型设备中,拉伸或只是调整UI组件的大小并不是利用屏幕面积的最优雅的方式。在屏幕面积很小的智能手表,调整组件以适应屏幕大小可能会导致奇怪的UI。...在Android中,要在单个屏幕上显示多个UI视图,请使用Fragments,它们类似于可在应用程序的Activity中运行的可重用组件。...记住,在Flutter中,每个屏幕和整个应用程序也是一个widget! widget本质上是可重用的,因此在Flutter中构建响应式布局时,您不需要学习任何其他概念。...当Expanded 使用在一个Row、Column或Flex中,Expanded 可以使它的子Widget自动填充可用空间,与之相反,Flexible 的子widget不会填满整个可用空间。

    2.3K00

    【Jetpack】ViewModel 架构组件 ( 视图 View 和 数据模型 Model | ViewModel 作用 | ViewModel 生命周期 | 代码示例 | 使用注意事项 )

    、Activity 组件 3、UI 布局文件 4、运行效果 五、ViewModel 生命周期 六、ViewModel 使用注意事项 一、Activity 遇到的问题 ---- Activity 遇到的问题...的 瞬态数据 丢失 ; 内存泄漏 : 在 系统组件 如 Activity 中 , 启动了一个线程 , 在线程中执行一系列操作 , 如果 Activity 在线程停止前销毁 , 那么 从 Activity...销毁 到 线程停止前 的这一段时间 , 就出现了内存泄漏问题 ; 组件代码量大 : 在 Activity 中写了大量的代码 , 导致 可维护性 降低 , 测试难度 增加 ; 二、视图 View 和 数据模型...Model ---- 在 Activity 中 , 存在两种元素 , 视图 View 和 填充视图数据用的 数据模型 Model ; 如果将 视图 和 数据模型 都写在 Activity 中 , 二者..., 令显示的文本数字自增 ; <?

    87120

    【Jetpack】LiveData 架构组件 ( LiveData 简介 | LiveData 使用方法 | ViewModel + LiveData 示例 )

    一、LiveData 简介 ---- 在 视图 View 与 数据模型 Model 通过 ViewModel 架构组件 进行绑定后 , 可以立即 将 ViewModel 中的数据设置到 UI 界面中..., 运行过程中 , 在 UI 界面中 , 可以 修改 ViewModel 中的值 , 并 将新的值设置在 视图 View 中 ; 但是 , 如果 数据是在 ViewModel 中发生的改变 , 那么如何...这里引入 LiveData 架构组件 , 在 ViewModel 中 , 可以 通过 LiveData 将数据修改的信息发送给 视图 View , 通知 UI 界面进行修改 ; 场景举例 : 在 ViewModel...在 Activity 系统组件中 , 绑定 ViewModel , 从 ViewModel 中获取 LiveData 显示到 UI 界面中 , 并为该 LiveData 设置 Observer 监听器...> 第二个 Fragment 代码 在 Fragment2 中 , 只放了一个 TextView 组件 , 该组件显示的是 ViewModel 中的 LiveData 数据 , 当该 LiveData

    1.3K20

    静若处子动若脱兔-Constraintlayout2.0一探究竟

    MotionLayout的设计初衷是为了简化Android中的过渡动画,因此它几乎可以替代TransitionManager来实现组件间的过渡效果。...但是下的app:transitionEasing只能设置某个组件的插值器,而定义的是整个动画的插值器 下的app:transitionEasing必须在start和end中都定义 KeyCycle KeyCycle...使用场景 ConstraintLayout是一盘大棋,Google先通过ConstraintLayout来将整个布局打平,再借助MotionLayout来实现动画就自然而然解决了很多原始Android布局的限制...比较复杂的UI界面的约束会比较复杂,维护成本比较高,需要在团队中建立比较统一的约束风格。...UI与动画进行了分离,MotionLayout将所有的动画逻辑放在了Scene中,跟最早Android布局的写法,将UI和代码进行分离的方式类似,但这种方式在现在的开发模式下,并不是很直观,因为MotionLayout

    1.1K10

    如何优化 Android 的布局性能?如何使用 ConstraintLayout 来减少嵌套层级?

    三、高效布局组件使用 ViewStub 延迟加载延迟初始化不立即显示的布局(如错误页、占位符): ConstraintLayout 的核心优势扁平化布局:通过灵活的约束关系替代传统嵌套,单层布局即可实现复杂 UI。...使用 merge 标签:在根布局为 ConstraintLayout 时,用 消除冗余父容器。延迟加载:对非立即显示的视图使用 ViewStub。...六、总结ConstraintLayout 通过约束关系和辅助组件,能够在单层布局中实现复杂 UI,是减少嵌套的首选方案。关键在于:熟练使用 chains、Guideline、Barrier 等特性。...在简单布局中,避免过度使用 ConstraintLayout(如单按钮场景可直接用 FrameLayout)。

    9600

    【Jetpack】Lifecycle 架构组件 ( 系统组件与普通组件解耦 | Lifecycle 解耦系统组件与普通组件 | 解耦服务组件与普通组件 | 监听应用程序生命周期 )

    ④ 执行效果 一、系统组件与普通组件解耦 ---- 在 Android 应用开发过程中 , 普通组件 如 UI 控件 , 需要 与 Android 组件 的 生命周期函数相关联 , 当 Android...组件生命周期 发生改变时 , 可以 通知 普通组件 执行某种操作 ; 如 : 显示的自定义 UI 组件 , 要随着 Activity 组件生命周期的变化 , 进行相应改变 , 当 界面被覆盖 也就是...Activity 生命周期的 回调 , 不需要在 Activity 组件中开发大量的 自定义组件 相关的业务逻辑 ; 使用了 Lifecycle 的 组件 , 组件可移植性增强 , 在组件内部 增加了...组件就是 系统组件 , 在 Activity 中使用到的 UI 组件 , 就是实际实现业务逻辑的 普通组件 ; 实现一个功能 : 监控页面的打开时间 , 将页面打开时间直接显示在页面中 ; 1、传统实现方式...使用传统方式 , UI 组件 直接定义在了 Activity 系统组件 中 , 二者耦合性太高 , 不利于项目维护 ; UI 组件的业务逻辑 与 Activity 系统组件 绑定程度很高 , 并且 UI

    90920

    DSL In Action

    最近在写项目时,再次拿出anko这个框架,思考它在UI小组件上的可用性。 PS: Anko !...中,将Activity的布局方式从 setContentView()中传入Layout ID换到了直接的DSL,嗯… 看起来还不错,官方文档也提供了一个Anko View 组件化的方案: class MyActivity...怎么把Anko灵活用起来 简单回顾一下上面一节的内容: 如果我们拥有一个ViewGroup或者拥有一个Context,就可以用来创建View 因此Anko的用法远要比你想象中的灵活 -> 可以拿到Context...而当你的设计图可以精确到dp的时候,完全可以用DSL来描述UI的各个小组件,因此DSL在这里不应该被一棒子打死,DSL在目前的项目中,可以很好的替代手工 newView,add view的部分,以及小规模的...如果你认真看了上面的内容,并且有自己的体会,可以在已有的UI构架中很快的用上Anko Layout来解决一些轻量级UI的构建。比如说List中的一个Item,或者一个小Dialog之类。

    1.1K20

    Jetpack 重磅更新!

    Paging3 - 逐步加载和显示数据 Paging 是一个帮助你逐步分块加载和显示数据的类库。今天我们发布了 Paging3 ,使用 Kotlin Coroutines 完全重写。...App Startup - 在应用启动时初始化组件 App Startup 类库提供了一种简单高效的方法在应用启动时初始化组件,而不是为每个需要初始化的组件定义单独的 ContentProvider 。...Jetpack 的 AutoFill API 通过 InlineSuggestionUi 使得键盘和自动填充服务更简单的使用这一特性。...MotionLayout,构建流畅的交互式动画 MotionLayout 继承了 ConstraintLayout 的丰富特性,帮助 Android 开发者管理复杂的运动和窗口组件动画。...这个版本添加了许多新特性:与 View 的互交互性,更多的 Material UI 组件,支持深色主题,新的 UI 测试和动画 API ,ConstraintLayout 基本支持,优化状态管理,集成可观察流

    1.2K70

    可折叠设备的桌面模式

    △ Duo 应用在优化前后的对比 在这篇文章中,您会了解到一个简单而又高效的方式来使您的应用在可折叠设备上运行时适配布局。...这是一个简单的媒体播放器案例,它会自动调节尺寸以避免让折叠处出现在画面中间,并且调整播放控制组件的位置,从屏幕完全展开时嵌入画面中,变为当屏幕部分折叠时显示为单独的面板。...同时还用到了以下 Jetpack 组件: MotionLayout,它是 ConstraintLayout 的一个子类。...当设备完全展开时,整个屏幕都会被用于显示主 PlayerView。 最后的问题: 当设备折叠时,您应该将 ReactiveGuide 移动到哪里?...在其他的所有情况下 (非全屏) 您需要考虑导航栏或屏幕上其他 UI 组件占据的空间。 为了移动参考线,您必须指定它距离父布局底部的距离。

    2.4K30

    安卓入门手册

    MyFragment.java - 自定义 Fragment 类 Fragment 是可以嵌套到 Activity 中的模块化 UI 组件,增加了界面的灵活性。...Intent 在 Android 中,Intent 是一种用于在组件之间传递消息的对象。它主要用于启动组件(如启动 Activity、启动 Service)或者在组件之间传递数据。...尺寸单位 在布局文件中,通常使用 dp(density-independent pixels)作为尺寸单位,以确保在不同设备上显示一致的大小。...1.2 Activity 和 Fragment Activity 是 Android 应用中用户界面的一个组成部分,而 Fragment 则是可以嵌套到 Activity 中的模块化 UI 组件。...2.3 数据绑定 数据绑定是一种通过声明性布局文件绑定 UI 组件和应用数据的方式,可以简化 UI 更新的过程。

    12310

    回顾 | Android Jetpack 重要更新

    App Startup — 在应用启动时初始化组件 App Startup 开发库提供了一种相当直接且高效的方式,来帮助程序在启动过程中初始化组件。...输入法集成自动填充功能 Android 11 为软键盘引入了一系列系统 API 来显示自动填充内容,并且提示内容可以来自其他应用,比如密码管理器。...在 最近的版本 中,CameraX 引入了对于 PreviewView 组件的优化。该组件如今可以更好地处理应用生命周期和 ViewPager。...AppCompat 库 AppCompat 库提供了大量向前兼容的 UI 组件和系统功能,从 Material 主题到 Toolbar 等组件,再到深色主题。...新版本添加了许多新功能,包括视图组件的互通性、更多的 Material UI 组件、支持深色主题、新的 UI 测试和动画 API、对于 ConstraintLayout 的支持、优化状态管理、集成可观察的数据流和

    27040

    代码实验室--带你一步步理解使用 ConstraintLayout

    Builder UI 生成器 其中 Handle 不知如何翻译更佳, 目前想到可供选择的有 '手柄' '纽' '轴' '操作点' '操作柄', 此文先选取最简单的翻译'手柄', 如果有更好的翻译还请赐教...ConstraintLayout一开始就被构建为在 UI 生成器中单独使用. UI 生成器就会立即询问其所使用的资源(显示在 ImageView 中的图)....删除约束 使用这个 显示在布局中的删除约束按钮以删除选中控件上的 所有 约束. 要删除单个约束, 点击设定了该约束的锚点 如果你打算删除布局中的所有约束, 使用菜单图标....继续, 从布局中删除 TextView 创建 ImageView 底锚点和容器底部的约束 UI 生成器应该看起来是这样 Inspector 显示出控件控件在一个方形区域的中间.

    2.7K60
    领券