Jetpack Compose

Jetpack Compose：声明式UI框架

(Composition over inheritance) 组合优于继承

1. 什么是Compose，有什么优势？

Jetpack Compose 是一个现代工具包，旨在简化UI开发。它结合了反应式编程模型和Kotlin编程语言的简洁性和易用性。它是完全声明性的，Compose的口号就是消灭xml，在撸过代码之后总结总体上UI的结构和Flutter一致，只有在语法上存在部分差异，因为我是基于dev2的版本体验的，所以在页面的体验上并不是很流畅，
而且Compose是没有view复用的，可能也是较早期的版本可用的资源也不是很多
在使用上Compose可以让你更专心的处理业务，因起特性声明UI组件和业务都在class中，较现在的xml模式可以省去很多findViewbyId等一系列绑定的操作
在更新UI上Compose也有类似Flutter的Provide一样的更新机制，当基础数据更改时，框架会自动调用这些功能，从而更新视图层次结构
Compose在UI上改动是非常大的不是采用了传统UI的多层继承结构，而是多个View组合成一个View
更新数据只要在使用的实体上面加注解@Model在更新实体的同时会通知UI进行修改

2. 使用

我是基于Android Studio 3.5.1 / build:gralde 3.5.1 / gradle 5.4.1 / compse 0.1.0-dev02 / kotlin 1.3.60-eap-76 版本进行开发的
基本核心库 (其中androidx.ui为Compose.UI库)
androidx.compose:compose-runtime
androidx.ui:ui-framework
androidx.ui:ui-layout
androidx.ui:ui-material
androidx.ui:ui-tooling
androidx.appcompat:appcompat
androidx.activity:activity-ktx
androidx.core:core-ktx
com.pinterest:ktlint
Android studio 4.0以上要打开开关 (Compose对4.0以下版本部分功能不支持)
buildFeatures {
compose true
}

3. 基本UI和使用

VerticalScroller - 纵向滑动
HorizontalScroller - 横向滑动
Column - 纵向布局
Row - 横向布局
MaterialTheme - 主题
Surface - 背景色
FlexColumn - 权重布局
TopAppBar - 标题栏
DrawImage - 图片
Clip - 圆角
Container - 容器
Text - 文本
Divider - 线
HeightSpacer - 高度填充
WidthSpacer - 宽度填充
TabRow - 导航栏
Tab - 导航标题
Button - 按钮
Checkbox - 选项框
Card - 卡片布局
Ripple - 水波纹
repeat - 循环
VectorImageButton - Vector图片按钮

代码

import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.Composable
import androidx.compose.Model
import androidx.compose.unaryPlus
import androidx.ui.core.*
import androidx.ui.foundation.DrawImage
import androidx.ui.foundation.HorizontalScroller
import androidx.ui.foundation.VerticalScroller
import androidx.ui.foundation.shape.corner.RoundedCornerShape
import androidx.ui.graphics.Color
import androidx.ui.layout.*
import androidx.ui.material.*
import androidx.ui.material.ripple.Ripple
import androidx.ui.material.surface.Card
import androidx.ui.material.surface.Surface
import androidx.ui.res.imageResource
import androidx.ui.text.TextStyle
import androidx.ui.text.style.TextOverflow
import androidx.ui.tooling.preview.Preview
import com.example.jetnews.R

/**
 * @fileName: YTestActivity
 * @date: 2019/11/21 18:12
 * @auther: YuanShuai
 * @tag: class//
 * @describe:
 **/
class YTestActivity : AppCompatActivity() {
   

    override fun onCreate(savedInstanceState: Bundle?) {
   
        super.onCreate(savedInstanceState)
        setContent {
   
            MyApp {
   
                layout()
            }
        }
    }


    @Composable  //ComposeUI
    fun layout(
        nums: List<String> = listOf("Hello Compose !", "Two Container !"),
        counterState: NumState = NumState()
    ) {
   
        //纵向滑动布局
        VerticalScroller {
   
            //纵向布局
            Column {
   
                //循环添加
                for (num in nums) {
   
                    Greeting(num, counterState)