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)
                }
            }
        }
    }

    @Composable   //ComposeUI
    fun MyApp(children: @Composable() () -> Unit) {
        //Material主题
        MaterialTheme {
            //自定义主题
            //CustomTheme {
            //背景色
            Surface(color = Color(0xffffffff)) {
                //权重布局
                FlexColumn {
                    inflexible {
                        //标题栏
                        TopAppBar(
                            title = { Text("AppBar") },
                            navigationIcon = {
                                //Vector图片按钮
                                VectorImageButton(R.drawable.ic_back) {
                                    Toast.makeText(this@YTestActivity, "back", Toast.LENGTH_SHORT)
                                        .show()
                                }
                            }
                        )
                    }
                    flexible(flex = 1f) {
                        children()
                    }
                }
            }
        }
    }


    @Preview("Test Preview") //浏览视图
    @Composable   //ComposeUI
    private fun Greeting(
        text: String,
        counterState: NumState
    ) {
        val image = +imageResource(R.drawable.duia_bg)
        val image2 = +imageResource(R.drawable.duia)
        //纵向布局
        Column(
            crossAxisSize = LayoutSize.Wrap,
            modifier = Spacing(10.dp)
        ) {
            //容器
            Container(expanded = true, height = 220.dp) {
                //圆角
                Clip(shape = RoundedCornerShape(8.dp)) {
                    //图片
                    DrawImage(image)
                    Container(expanded = true, height = 100.dp, width = 100.dp) {
                        DrawImage(image2)
                    }
                }
            }
            //高度填充
            HeightSpacer(10.dp)
            //文本
            Text(text, style = (+themeTextStyle { h6 }).withOpacity(0.8f))
            HeightSpacer(10.dp)
            //分割线
            Divider(color = Color(0x33333333))
            HeightSpacer(10.dp)
            Container(expanded = true) {
                //文本
                Text(
                    "Kotlin Compose !",
                    style = (+themeTextStyle { body2 }).withOpacity(0.47f)
                )
            }
            HeightSpacer(10.dp)
            Divider(color = Color(0x23330033))
            HeightSpacer(10.dp)
            Container(expanded = true, alignment = Alignment.CenterRight) {
                Text(
                    "Alignment !",
                    style = TextStyle(color = Color(0xFF936112), fontSize = 18.sp)
                )
            }
            HeightSpacer(10.dp)
            Divider(color = Color(0x23330033))
            HeightSpacer(10.dp)
            Text("设置文本行数设置文本行数设置文本行数设置文本行数设置文本行数设置文本行数设置文本行数" +
                    "设置文本行数设置文本行数设置文本行数设置文本行数设置文本行数设置文本行数设置文本行数" +
                    "设置文本行数设置文本行数//",
                maxLines = 2,
                overflow = TextOverflow.Ellipsis,
                style = +themeTextStyle { body2 })
            HeightSpacer(10.dp)
            Divider(color = Color(0x23330033))
            HeightSpacer(10.dp)
            //横向布局
            Row(crossAxisAlignment = CrossAxisAlignment.Center) {
                Surface(color = Color.Blue) {
                    Clip(shape = RoundedCornerShape(8.dp)) {
                        Text(
                            "背景色",
                            modifier = Spacing(20.dp),
                            style = TextStyle(color = Color(0xFFFFFFFF), fontSize = 20.sp)
                        )
                    }
                }
                //宽度填充
                WidthSpacer(10.dp)
                Counter(counterState)
                WidthSpacer(10.dp)
                Form(true)
                Form(false)
            }
            HeightSpacer(10.dp)
            Divider(color = Color(0x23330033))
            HeightSpacer(10.dp)
            Row(modifier = ExpandedWidth, crossAxisAlignment = CrossAxisAlignment.Center) {
                textView(Flexible(1f), Color.Magenta, "权重-1")
                textView(Flexible(2f), Color.DarkGray, "权重-2")
                textView(Flexible(5f), Color.Red, "权重-5")
            }
            HeightSpacer(10.dp)
            Divider(color = Color(0x23330033))
            HeightSpacer(10.dp)
            //横向滑动布局
            HorizontalScroller {
                Row {
                    //循环5次
                    repeat(5) {
                        //卡片布局
                        Card(shape = RoundedCornerShape(10.dp)) {
                            //水波纹
                            Ripple(bounded = true) {
                                Surface(color = Color.LightGray) {
                                    Container(width = 150.dp, height = 150.dp) {
                                        Column {
                                            Container(height = 110.dp, expanded = true) {
                                                DrawImage(image)
                                            }
                                            Text(
                                                text = "TitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitle",
                                                style = (+themeTextStyle { subtitle1 }).withOpacity(
                                                    0.87f
                                                ),
                                                maxLines = 2,
                                                overflow = TextOverflow.Ellipsis
                                            )
                                        }
                                    }
                                }
                            }
                        }
                        WidthSpacer(16.dp)
                    }
                }
            }
            HeightSpacer(10.dp)
            //导航栏
            TabRow(items = listOf("导", "航", "栏"), selectedIndex = 0) { index, text ->
                //标题
                Tab(text = text, selected = 0 == index) {
                    Toast.makeText(this@YTestActivity, "index=$index", Toast.LENGTH_SHORT).show()
                }
            }
        }
    }

    @Composable  //ComposeUI
    fun textView(flex: Modifier, color: Color, text: String) {
        Column(modifier = flex) {
            Surface(color = color) {
                Text(
                    text,
                    style = TextStyle(color = Color(0xFFFFFFFF), fontSize = 20.sp)
                )
            }
        }
    }

    /**
     * 按钮点击
     */
    @Composable   //ComposeUI
    fun Counter(state: NumState) {
        //按钮
        Button(
            text = "已经点了${state.count}次了",
            onClick = {
                state.count++
            },
            style = ContainedButtonStyle(color = if (state.count > 0) Color.Green else +themeColor { primary })
        )
    }

    /**
     * 选择框
     */
    @Composable
    fun Form(state: Boolean) {
        var formState = FormState(state)
        //选择框
        Checkbox(
            checked = formState.optionChecked,
            onCheckedChange = { newState -> formState.optionChecked = newState }
        )
    }


    @Model //@Model修饰的实体修改的同时会通知UI自动更新
    class FormState(var optionChecked: Boolean)

    @Model
    class NumState(var count: Int = 0)


    val green = Color(0xFF1EB90)
    val grey = Color(0xFF26282F)

    private val themeColros = MaterialColors(
        primary = green,
        surface = grey,
        onSurface = Color.White
    )

    /**
     * 自定义主题
     */
    @Composable
    fun CustomTheme(children: @Composable() () -> Unit) {
        MaterialTheme(colors = themeColros) {
            val textStyle = TextStyle(color = Color.Red)
            CurrentTextStyleProvider(value = textStyle) {
                children()
            }
        }
    }
}