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库)
pose: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.Bundleimport android.widget.Toastimport androidx.appcompat.app.AppCompatActivityimport posableimport pose.Modelimport pose.unaryPlusimport androidx.ui.core.*import androidx.ui.foundation.DrawImageimport androidx.ui.foundation.HorizontalScrollerimport androidx.ui.foundation.VerticalScrollerimport androidx.ui.foundation.shape.corner.RoundedCornerShapeimport androidx.ui.graphics.Colorimport androidx.ui.layout.*import androidx.ui.material.*import androidx.ui.material.ripple.Rippleimport androidx.ui.material.surface.Cardimport androidx.ui.material.surface.Surfaceimport androidx.ui.res.imageResourceimport androidx.ui.text.TextStyleimport androidx.ui.text.style.TextOverflowimport androidx.ui.tooling.preview.Previewimport com.example.jetnews.R/*** @fileName: YTestActivity* @date: /11/21 18:12* @auther: YuanShuai* @tag: class//* @describe:**/class YTestActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {MyApp {layout()}}}@Composable //ComposeUIfun layout(nums: List<String> = listOf("Hello Compose !", "Two Container !"),counterState: NumState = NumState()) {//纵向滑动布局VerticalScroller {//纵向布局Column {//循环添加for (num in nums) {Greeting(num, counterState)}}}}@Composable //ComposeUIfun 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 //ComposeUIprivate 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 //ComposeUIfun textView(flex: Modifier, color: Color, text: String) {Column(modifier = flex) {Surface(color = color) {Text(text,style = TextStyle(color = Color(0xFFFFFFFF), fontSize = 20.sp))}}}/*** 按钮点击*/@Composable //ComposeUIfun Counter(state: NumState) {//按钮Button(text = "已经点了${state.count}次了",onClick = {state.count++},style = ContainedButtonStyle(color = if (state.count > 0) Color.Green else +themeColor {primary }))}/*** 选择框*/@Composablefun Form(state: Boolean) {var formState = FormState(state)//选择框Checkbox(checked = formState.optionChecked,onCheckedChange = {newState -> formState.optionChecked = newState })}@Model //@Model修饰的实体修改的同时会通知UI自动更新class FormState(var optionChecked: Boolean)@Modelclass NumState(var count: Int = 0)val green = Color(0xFF1EB90)val grey = Color(0xFF26282F)private val themeColros = MaterialColors(primary = green,surface = grey,onSurface = Color.White)/*** 自定义主题*/@Composablefun CustomTheme(children: @Composable() () -> Unit) {MaterialTheme(colors = themeColros) {val textStyle = TextStyle(color = Color.Red)CurrentTextStyleProvider(value = textStyle) {children()}}}}
