Bootstrap

Android composse 声明式UI,更简单的自定义

Android compose

声明式UI,更简单的自定义; 实时带交互的预览功能 Compose 并不是类似于Recyclerview的高级控件,而是直接抛弃了View,ViewGroup那套东西,从上到下鲁了一套全新的框架,直白点说就是它的渲染机制,布局机制,触摸算法,以及UI 具体写法全都是新的

Compose 实现了声明式UI,替代传统的命令是UI; 可能对于我们来说第一个问题就是什么是声明式?什么是命令式UI? 首先看一下声明式UI长什么样

Compose是用kotlin来写的,它的每一个控件都是一个函数调用; Text() Text()并不会创建对象,它不是一个构造函数,而是一个普通函数;为了辨识度,Compose函数开头都是大写;也就是一个Composable

有人会疑问Text()地层到底是什么,是个Textview吗? 其实并不是它是更下层Canvas那套东西, Compose各个组件都是独立的新实现

看完它的写法,看刚才的问题什么是声明式UI,它这么写怎么就声明式了,它和我们一直以来的写法有什么区别

<pre mdtype="fences" cid="n107" lang="" class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
 <LinearLayout
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 >
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="hello"
 />
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="world"
 />
 </LinearLayout></pre>

这是传统写法,还需要在java中 findviewbyId获取控件对象,来进行操作; 其实对于布局来说,写法大同小异,但是为什么传统写法叫命令式,而Compose叫声明式

对于声明式来说,你只需要把控件声明出来,而不需要手动更新; 如左边对应的Textview 它对应的数据改变了,我们怎么去更改数据呢,首先是findviewbyId获取控件对象,然后setText来进行数据变更; 而如果用Compose呢,则不用更新,当数据改变时Compose会自动更新到页面上

这个自动订阅功能很容易使用,你只要在初始化时加上by mutableStateOf,剩下全由Compose自动搞定; 这个神奇的特性,是利用了kotlin的Property Delegation来实现的,也就说明了为什么Compose只能用kotlin来编写,因为使用到了kotlin的许多特性,而这些特性使用java 不能简单实现

这就是所谓的声明式UI,你只要声明页面是什么样子,不用手动去更新; 因为页面会自动更新,传统页面如果数据发生改变,要使用代码,给出详细步骤命令代码去更新,这就是所谓的命令式

传统的所谓命令式,并不在XML部分,而是在于java部分; java代码去指挥去命令控件去更新,这才是命令式含义所在,而Compose通过订阅机制来更新UI,不需要指挥控件去更新,所以是声明式; 它并不是语言角度的定义,也不是写法角度定义,而是功能角度

换句话说如果传统的XML能通过数据和页面进行关联,让页面自动更新,而不是让咱们去指定更新,那

;