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

compose--初入compose、资源获取、标准控件与布局

首先compose目前只支持kotlin,基于google对移动端的鸿图,未来应该也不会支持其他语言,和传统安卓的xml布局不同,compose是通过kotlin定义一个一个组件,由于是通过代码定义的组件...官方地址:https://developer.android.google.cn/jetpack/compose/mental-model 我这边也是根据官方文档,对重要的部分和自己的想法进行融合,介绍什么是...TextField就是输入框,并且需要用到state,关于state后续会详细介绍 3.1 基本使用 TextField必须传入的两个参数,一个是value,一个是onValueChange ,结合之前的重组概念理解...、TextRange指定光标位置: @Immutable class TextFieldValue constructor( val annotatedString: AnnotatedString...append("你好\n") } }, selection = TextRange(2)// 光标默认显示第二个字符位置

5.6K30

Jetpack Compose实现 验证码输入框

Jetpack Compose 作为 Android 的新一代 UI 开发框架,提供了非常强大的工具构建用户界面。 今天,我们就利用 Compose 实现一个炫酷的验证码输入框!...开始的思路是用6个TextField实现 // 用于存储验证码的长度 val codeLength = 6 // 定义一个变量,用于存储验证码的值 val code = remember { mutableStateOf...实现才符合我的风格 后来突发奇想利用BasicTextField的decorationBox试试 decorationBox的作用 Jetpack Compose 中的 BasicTextField...输入框输入或获取焦点具有过渡效果。 实现各种自定义输入框效果,比如我们实现的验证码输入框。...fontSize 控制输入框内文本的大小 onVerify 是一个回调函数,完成所有输入框的输入时会被调用,参数是一个 String 表示最终输入的验证码。

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

写给初学者的Jetpack Compose教程,基础控件和布局

但也正是因为如此,Composable函数名才特意要求首字母需要大写,这样我们就能够更加直观地通过函数名称快速地判断一个函数是不是Composable函数,不然的话还需要找到这个函数的定义位置,看看它有没有...Text Text毫无疑问一定是Compose当中最常用的一个控件,主要用于显示一段文本,对应的是View当中的TextView。...现在运行一下程序,效果如下图所示: 可以看到,输入框已经显示出来了。 到这里为止还算比较简单,可是当你尝试输入框里输入内容,你会发现不管你键盘上敲了什么东西,输入框上都不会显示出来。...而TextField显示的内容就是一种状态,因为随着你的输入,界面上显示的内容也需要跟着更新才行。 那么这里,当在TextField中输入内容,首先我们并没有去做刷新页面这个操作。...首先你会发现,目前Column中的所有控件都是居左对齐的,那么我们有没有办法让它们居中对齐呢?

1.4K20

HarmonyOS实战——TextField文本输入框组件基本使用

TextField案例——获取文本输入框中的内容并进行Toast提示 通过TextField获取文本输入框中的内容并进行Toast提示 新建项目:TextFieldApplication ability_main...,这还是 TextField 文本输入框组件,只不过是背景色没有设置,让它跟布局的颜色一致了,看不到背景而已 [在这里插入图片描述] 3.3 气泡的设置 当用鼠标长按选中输入的内容后,就会选中内容,前面的光标和后面的光标...,以及中间选中的内容颜色会改变,华为官方给前、后的光标,以及没有选中内容状态下出现的小气球取名为气泡 <TextField ohos:height="50vp" ohos...selection_color="#FF0000" /> ohos:element_selection_left_bubble、ohos:element_selection_right_bubble分别设置左右气泡显示的图片...ohos:element_cursor_bubble:设置没有选中气泡图片 ohos:selection_color:设置选中内容的颜色 运行: [请添加图片描述] 4.

97620

从零开始,开发一个 Web Office 套件(15):拖动边框,平移编辑

文本编辑器(MVP) 2.28 Feature:拖动边框,平移编辑器 2.28.1 算法 新建一个类DragZone, 用来监听鼠标拖动的距离: 拖动开始,记录拖动起始位置; 每一段拖动结束(mousemove...每当鼠标拖动边框一定距离,就把编辑器的位置平移同样的距离; 平移编辑器之后,要把编辑器内的子元素同时平移: 对编辑器内的字符重新排版,计算每个字符的位置相关信息; 把编辑器的边框移动相同的距离; 把编辑器的控制点移动相同的距离...: 每当鼠标拖动边框一定距离,就把编辑器的位置平移同样的距离: 平移编辑器之后,要把编辑器内的子元素同时平移: 移动控制点: 重新计算光标位置: 2.28.3 效果...当我的鼠标从两个边框重叠处开始拖动,且我拖动了一定距离(记为n),但是编辑器却移动了2n的距离。 原因分析:这是因为一次拖动两个边框内的DragZone内都触发了,所以编辑移动的距离就叠加了。...解决办法:给拖动事件添加z-index,确保一次只会触发一个拖动事件。解决之后,方便我们之后实现拖动控制点调整编辑器大小的逻辑。

13640

Jetpack-Compose 学习笔记(五)—— State 状态是个啥?又是新概念?

3、一个简单例子 先来看看效果: 其中有两个控件,一个是 Text,用于显示输入的内容;另一个TextField,相当于 View 体系中的 EditText。...可以看出,Text 显示的内容可以随着下面的 TextField 中输入的内容实时更新。...顺带说一下,Compose 首次运行渲染 Composable 组件,会为所有被调用的 Composable 组件构建一个树,然后重组期间会使用新的 Composable 组件去更新树。...此外,为了保证每次重组 State 状态不会被初始化为初值,Compose 引入 remember 关键字将数据存储相应的 Composable 组件中。...参考文献 官方文档——Jetpack Compose 中使用状态 https://developer.android.google.cn/codelabs/jetpack-compose-state

2K30

职场人必备的WORD排版十大技巧

2.Word 中巧选文本内容 问: Word 文件中进行编辑操作,经常需选定部分文件内容或全部内容进行处理,请问有没有快捷的方法进行选定?...Shift+Alt+ 鼠标左键单击:可选中原光标所在位置至后鼠标左键单击光标位置的矩形区域。 小提示: 选取还可利用“ F8 ”键进行快速选取。...4.快速定位光标 问:文件编辑中,经常需要把光标移到某个位置,如果能够快速进行移动,那肯定会节省很多时间,提高工作效率,请问怎样进行快速定位呢?...7.移动光标快速定位 问: Word 中编辑文件,经常需把光标快速移到前次编辑位置,而若采用拖动滚动条的方式非常不便,请问有没有快捷的方法呢? 答:有,可以利用一种组合键进行快速定位。...需要返回到前次编辑位置,可直接在键盘上按组合键“ Shift+F 5 ” 。同时使用该组合键还可使光标最后编辑过的三个位置间循环转换。

1.4K70

Android Compose开发

另外 Compose 里的代码基本都是可以被混淆的,所以开启混淆之后代码的压缩率也很高。 手动操纵视图会提高出错的可能性。如果一条数据多个位置呈现,很容易忘记更新显示它的某个视图。...您可以使用修饰符执行以下操作: 更改可组合项的大小、布局、行为和外观 添加信息,如无障碍标签 处理用户输入 添加高级互动,如使元素可点击、可滚动、可拖动或可缩放 修饰符是标准的 Kotlin 对象。...它控制了视图屏幕上的显示顺序。具有较高 zIndex 值的视图将显示具有较低 zIndex 值的视图之上。 默认情况下,视图的 zIndex 值为0。...如果设置一个较大的正值,则视图将显示在其他视图的上方。如果设置一个较小的负值,则视图将显示在其他视图的下方。当两个视图的 zIndex 相同时,它们将按照它们布局文件中的顺序进行绘制。...Compose 中的一个函数,用于协程中执行副作用操作。

19610

Now in Android #13 - 最新 Android 动态分享

为了让大家也能第一间了解最新信息,我准备同步跟进 Now in Android ,第一间为大家带来中文介绍。 这里不会逐字逐句翻译,根据段落大意提炼总结。...气泡气泡内置于通知系统中。它们悬浮在其他应用内容之上,并会跟随用户移动到任何位置气泡可以展开以显示应用功能和信息,并可在不使用时收起。...分区存储 Android 10 引入,本次预览版中的改进包括可选的媒体原始文件路径访问、更新过的 DocumentsUI、MediaStore 中的批量编辑操作。 生物验证 API 。...期待中...... 4.1: Canary 4.0 release 中已经删除了 Jetpack Compose 编译器。...如果你想体验 pre-alpha 版本的 Compose UI 工具,你需要 4.1 版本。 这么说,Jetpack Compose 又跳票了~ 后台定位指南 问: 用户隐私中最重要的三件事情是什么?

74520

原创|Android Jetpack Compose 最全上手指南

今年的Google/IO大会上,亮相了一个全新的 Android 原生 UI 开发框架-Jetpack Compose, 与苹果的SwiftIUI一样,Jetpack Compose一个声明式的UI...三、Jetpack Compose 环境准备和Hello World 每当我们学习一门新的语言,我们都是从一个hello world开始,今天我们也从一个hello world开始Jetpack Compose...Android Studio 4.0.png 使用Jetpack Compose 开始你的开发工作有2种方式: 将Jetpack Compose 添加到现有项目 创建一个支持Jetpack Compose...给Column添加样式 调用Column(),可以传递参数给Column()配置Column的大小、位置以及设置子元素的排列方式。...原来的安卓原生布局中,显示图片有相应的控件ImageView,设置本地图片地址或者Bitmap就能展示,Jetpack Compose 中该如何显示图片呢?

6.1K20

HyperDock for Mac(Dock优化工具)v1.8.0.10中文激活版

hyperdock  for mac中文激活版是一款专为mac用户设计Dock优化软件,hyperdock  mac版支持使用窗口自动排列功能,您可以直接通过将窗口拖拉至屏幕上方快速最大化至全屏,又或者拖动到左右进行左分屏和右分屏...而且Dock优化软件还有一个特色便是对Dock的强大管理哪里能力,只要将光标移动到Dock上的图标停留一会,如果该应用有某个桌面有已经打开的窗口便会显示出来。...图片HyperDock for Mac(Dock优化工具)Dock优化软件特色介绍窗口预览有没有想过如何激活单个窗口而不是整个应用程序?窗口预览气泡只需将鼠标放在停靠项上即可显示应用程序的每个窗口!...日历活动通过将日历停靠项目悬停查看即将发生的事件。窗口管理HyperDock为Mac OS带来了先进的窗口管理功能:只需按住键并移动鼠标即可移动和调整窗口大小。...拖动到屏幕边缘自动调整窗口大小(Window Snapping)。强大的快捷方式HyperDock为您的Dock应用添加了完全可配置的快捷方式。

92640

提高效率 |ArcGIS Pro 中所有快捷键一网打尽

C + 拖动 平移。 平移视图。 X + 拖动 缩小。 按住并拖动光标。松开指针会进行缩小。 Z + 拖动 放大或缩小。 放大或缩小视图。 T 显示折点。...您可以放大要素,而不会在活动视图中看到当前的锚点位置。 Ctrl + 拖动 移动锚点。 移动选择锚点。 S 访问辅助锚点。 打开和关闭辅助锚点。打开,锚点将位于指针位置。...选定折点之间以统一方式拖动多个线段。 A + 单击 添加折点。 单击线段的位置处创建折点。 D + 单击 删除折点。 删除单击的折点。 H + 拖动 编辑高程。...按 V 并按上箭头键、下箭头键、左箭头键或右箭头键围绕视图中心旋转。B + 拖动 3D 场景中环视。 3D 场景中,按住 B 键同时单击并拖动,以转动照相机并从您单击的位置进行环视。...Ctrl+Shift+N 显示字段名和显示别名之间切换。 编辑表 用于编辑表的键盘快捷键。铅笔图标将显示正在编辑的行左侧的第一个像元中。该单元格同样用加粗的深绿色勾勒轮廓。

62620

巧用PyCharm编辑器,提高编码效率

光标编辑 使用多光标编辑功能来同时编辑多个位置文本。加快重复性任务的执行,如同时编辑多个变量名、添加或删除多个行等。 操作步骤: 移动光标到你想要添加额外光标位置。...使用以下方法之一添加额外光标Windows/Linux上:按住Alt键,并单击要添加光标位置macOS上:按住Option键,并单击要添加光标位置。...继续添加更多光标,然后在这些光标位置上进行编辑。 一旦有了多个光标,可以同时输入文本,删除文本,或者进行其他编辑操作。编辑将同时应用到所有光标位置。 完成编辑后,按下Esc键以退出多光标编辑模式。...这个快捷键可以逐渐选择代码块中的更大范围的文本,非常有用,特别是需要快速选择代码块。 操作步骤: 将光标放在要开始选择的位置。 按下Ctrl + W。这将选择当前光标所在的单词或代码块。...窗口套娃 拖动标签页可以PyCharm中分割编辑器窗口,使一个编辑器窗口可以同时显示多个文件或代码片段。

29730

Android Studio 新特性详解

这部分的显示使用了颜色编码,当前帧对应的颜色为紫色,等待 GPU 和组合的位置显示了相同的紫色条。我们只要将视图缩小一些,就可以看到它何时出现在屏幕上。...我们可以查看不同的预览配置,如果一个视图显示一个屏幕上,则最好也能显示一个屏幕上。...△ Visual Linting 会检查视图中的问题并给我们提示 Jetpack Compose 最后,我们谈谈同样很重要的 Compose。...我们知道,对于 Compose 开发,测试应用逻辑,并排显示一个嵌入式的模拟器将会非常有帮助。我们正在让实时编辑功能在模拟器上也能工作。...进入轻量模式后,前文展示的 Compose 实时编辑功能将不会再工作;而在打开布局 XML 文件,也不会像通常那样默认显示拆分视图,而只是显示源文件。

2.7K20

一起看 IO | Jetpack Compose 中的新特性

文本放大镜 Android 文本提供了放大镜组件,通过放大镜可以更轻松地选择文本Compose 现已支持文本放大镜。 拖动选择图标时会显示放大镜,以便于您查看指尖下方的内容。...Compose 1.1.0 已支持在所选择的文本字段中使用放大镜,Compose 1.2.0 文本字段和 SelectionContainer 中都支持放大镜。...与 CoordinatorLayout 互操作 从现在起,当您在 View 系统的 CoordinatorLayout 中嵌套了一个支持滚动的可组合项,您可以确保它们的滚动行为是可互操作的。...△ Layout Inspector 显示重组计数和重组高亮指示器 Compose 从根本上改变了您编写界面的方式,您可以遵循我们发布的最佳实践确保应用的高性能。... I/O 演讲 Jetpack Compose 中常见的性能问题 中,Compose 团队介绍了常见的性能错误以及这些错误的解决方法。

2.2K20

快速上手 Vim 编辑器【Linux必知】

-6.8 手把手安装教程(多图+贴镜像文件) (一) 什么是 Vim 我看一本书的时候,有一句话印象很深刻,“Linux系统中一切都是文件,而配置一个服务就是修改其配置文件的参数”,所以我们需要学习一种文本编辑工具也就是今天的...Vim是从vi发展出来的一个文本编辑器。其代码补完、编译及错误跳转等方便编程的功能特别丰富,程序员中被广泛使用。...,就是普通的文本录入,例如我在下例中,命令模式下输入了 i 进入了输入模式,然后输入了上述文本 当然了,输入模式的命令有很多,摘一些常用的出来,首先是关于文本插入的 在当前光标所在位置插入随后输入的文本...,光标后的文本相应向右移动 再有就是一些别的常用的 删除(剪切)光标所在整行 还有就是使用上下左右键移动键盘,然后 Ecs键 切换到命令模式 (3) 末行模式 编辑模式主要用于对文件进行保存或者退出等等操作...打开或新建一个文件,并将光标置于第一行的首部 (2) 进行编辑 关于几种常见的插入文本的命令,在前面已经输入模式已经说过了,所以我们直接从查找开始说 A:删除文本 删除光标所在位置的字符 B:复制粘贴

98310

tmux和vim工具的使用

window关闭时会关闭当前没有window的session 选中:鼠标光标选中,或者按前缀键后按方向键 修改分割线的位置:直接鼠标光标拖动分割线;后者按住前缀键的同时按方向键(前缀键必须按住不动,不松手...操作 可以tmux中打开,防止当断网时会丢失数据 一般命令模式:没有办法编辑,可以输入命令,每一个字母都是一个命令 编辑模式:一般命令模式下按下i键,既可以编辑,按下esc键盘即可退出编辑模式(进入编辑模式底部会有...移动光标不会在行的开头和末尾自动换行,和普通编辑器不同!!!...(类似剪切复制) 删除当前行,和ctrl+d相同 复制选中的文本 复制当前选中的行 post或者为,当为复制的文本光标的下一个位置粘贴,当为复制的为一行(不一定是用yy复制的一行,也可以是用z选中的完整的行...恢复行号 :删除所有文本(将光标移动到开头,设置为选中模式,再将光标移动到末尾) :全文格式化,解决当代码复制的时候出现多重缩进的问题 paste模式:带有缩进的模式;

14610

一个创建产品动画说明视频的新手指南

将播放头移动到六秒钟,然后将光标层拖到所需位置,我们将在底部的大白色文本框中。将作出新的关键框架。 当你在这里,击中旁边的秒表Scale(比例尺),时间轴上前进几帧,由5%下降规模。...然后向前移动几帧,并将缩放比例缩小到原来的范围。 该动画框架上,单击Position(位置)左侧的菱形。这将创建一个关键位置的新关键帧。向前走一秒钟左右,并将光标拖到合成物外。...当你预览,它应该看起来像这样: ? 7.文本和预设 我们添加一些文本----显然是动画文本。 ? 选择顶部工具栏中的类型工具,并在我们刚才指出的白框中添加一些文本。...当我们它,按command+option+F(或ctrl + alt + F)调整您的动画到新的合适大小。预览 它应该与以前一样,只是缩小。 使用关键帧缩放大小和位置。...图形编辑器 现在,我们将使用图形编辑器使所有内容流动得更好一些,从而可以调整关键帧之间的转换。 logo上选择您的两个位置关键帧,然后按按钮,如图所示(请参见下面的蓝色突出显示的按钮): ?

2.9K10

写给初学者的Jetpack Compose教程,使用State让界面动起来

大家好,写给初学者的Jetpack Compose教程第4篇更新了。 今天我们要介绍的是Compose当中至关重要的一个组件,State。...上述代码采用的做法是,定义一个count变量,Text控件中显示这个count变量的值,并且每次点击Button让count变量加1。 思路非常简单,那么这段代码能正常工作吗?...写给初学者的Jetpack Compose教程,基础控件和布局 这篇文章中讲到了TextField控件,也就是输入框。...但遗憾的是,当时的我们不管键盘上输入了任意内容,TextField上都不会显示出来。...因为TextField显示的内容就是一种状态,需要刷新界面才能显示。 而当我们键盘上输入内容,并没有哪里去做了刷新界面这个操作。

61920
领券