Jetpack Compose初体验

1-1、简单体验示例

package com.cnlao5.bcjetpackcomposetest

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.focus.focusModifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.cnlao5.bcjetpackcomposetest.ui.theme.BCJetpackComposeTestTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BCJetpackComposeTestTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Row(modifier = Modifier
        .padding(all = 8.dp)
        .background(MaterialTheme.colors.background) //根据系统切换背景色
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_foreground),
            contentDescription = null,
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape) //圆角
        )
        Column {
            Text(text = "作者 $name!")
            Spacer(modifier = Modifier.height(4.dp)) //设置上下控件间距
            Text(text = "标题 $name!")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    BCJetpackComposeTestTheme {
        Greeting("my Android")
    }
}

1-2、列表

⚠️要实现功能: 最多显示一行, 点击展开全文

/// 在SampleData.kt文件中: (消息对象的集合)
// object 跟一个类名说明它是单例的
object SampleData{
  val conversationSample = listOf(
    Message(
        author: "小红",
      body:"Test...Test...Test..."
    ),
    ...
  )
}

/// 在页面文件中:
package com.cnlao5.bcjetpackcomposetest

import android.os.Bundle
import android.os.Message
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.focus.focusModifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.cnlao5.bcjetpackcomposetest.ui.theme.BCJetpackComposeTestTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BCJetpackComposeTestTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Conversation(
                        listOf<Map<String, String>>(
                            mapOf("author" to "小红", "body" to "test...test...test"),
                            mapOf("author" to "小黄", "body" to "多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行"),
                            mapOf("author" to "小蓝", "body" to "test...test...test"),
                            mapOf("author" to "小紫", "body" to "test...test...test...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行")
                        )
                    )
                }
            }
        }
    }
}

@Composable
fun MessageCard(msg: Map<String, String>) {
    Row(modifier = Modifier
        .padding(all = 8.dp)
        .background(MaterialTheme.colors.background) //根据系统切换背景色
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_foreground),
            contentDescription = null,
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape) //圆角
        )
        Spacer(modifier = Modifier.width(8.dp)) //设置左右控件间距

        // 声明变量,记录状态
        //mutableStateOf 记录状态
        var isExpanded by remember { mutableStateOf(false) }

        Column(
            modifier = Modifier.clickable { isExpanded = !isExpanded }
        ) {
            msg["author"]?.let {
                Text(
                    text = it,
                    color = MaterialTheme.colors.secondaryVariant
                )
            }
            Spacer(modifier = Modifier.height(4.dp)) //设置上下控件间距
            msg["body"]?.let {
                Text(
                    text = it,
                    modifier = Modifier.padding(all = 4.dp),
                    style = MaterialTheme.typography.body2,
//                    maxLines = 1 //最多显示1行
                    maxLines = if(isExpanded) Int.MAX_VALUE else 1
                )
            }
        }
    }
}

@Composable
fun Conversation(messages: List<Map<String, String>>){
    LazyColumn(content = {
        items(messages){ message ->
            MessageCard(message)
        }
    })
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    BCJetpackComposeTestTheme {
        Conversation(
            listOf<Map<String, String>>(
                mapOf("author" to "小红", "body" to "test...test...test"),
                mapOf("author" to "小黄", "body" to "多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行"),
                mapOf("author" to "小蓝", "body" to "test...test...test"),
                mapOf("author" to "小紫", "body" to "test...test...test...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行")
            )
        )
    }
}

1-3、列表添加点击动画

package com.cnlao5.bcjetpackcomposetest

import android.os.Bundle
import android.os.Message
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.focus.focusModifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.cnlao5.bcjetpackcomposetest.ui.theme.BCJetpackComposeTestTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BCJetpackComposeTestTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Conversation(
                        listOf<Map<String, String>>(
                            mapOf("author" to "小红", "body" to "test...test...test"),
                            mapOf("author" to "小黄", "body" to "多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行"),
                            mapOf("author" to "小蓝", "body" to "test...test...test"),
                            mapOf("author" to "小紫", "body" to "test...test...test...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行")
                        )
                    )
                }
            }
        }
    }
}

@Composable
fun MessageCard(msg: Map<String, String>) {
    Row(modifier = Modifier
        .padding(all = 8.dp)
        .background(MaterialTheme.colors.background) //根据系统切换背景色
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_foreground),
            contentDescription = null,
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape) //圆角
        )
        Spacer(modifier = Modifier.width(8.dp)) //设置左右控件间距

        // 声明变量,记录状态
        //mutableStateOf 记录状态
        var isExpanded by remember { mutableStateOf(false) }
        val surfaceColor: Color by animateColorAsState(//sp1.颜色切换渐变动画
            if (isExpanded) MaterialTheme.colors.primary else MaterialTheme.colors.surface
        )

        Column(
            modifier = Modifier.clickable { isExpanded = !isExpanded }
        ) {
            msg["author"]?.let {
                Text(
                    text = it,
                    color = MaterialTheme.colors.secondaryVariant
                )
            }
            Spacer(modifier = Modifier.height(4.dp)) //设置上下控件间距
            Surface(//sp2.使用这个动画颜色
                shape = MaterialTheme.shapes.medium,//圆角的形状
                elevation = 1.dp,
                color = surfaceColor,
                modifier = Modifier
                    .animateContentSize() //动画的形式, 慢慢变大,慢慢变小
                    .padding(1.dp)
            ) {
                msg["body"]?.let {
                    Text(
                        text = it,
                        modifier = Modifier.padding(all = 4.dp),
                        style = MaterialTheme.typography.body2,
//                    maxLines = 1 //最多显示1行
                        maxLines = if (isExpanded) Int.MAX_VALUE else 1
                    )
                }
            }
        }
    }
}

@Composable
fun Conversation(messages: List<Map<String, String>>){
    LazyColumn(content = {
        items(messages){ message ->
            MessageCard(message)
        }
    })
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    BCJetpackComposeTestTheme {
        Conversation(
            listOf<Map<String, String>>(
                mapOf("author" to "小红", "body" to "test...test...test"),
                mapOf("author" to "小黄", "body" to "多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行"),
                mapOf("author" to "小蓝", "body" to "test...test...test"),
                mapOf("author" to "小紫", "body" to "test...test...test...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行...多行多行")
            )
        )
    }
}

1-4、Compose所解决的问题

在编写可维护的软件时, 我们的目标是最大程度的减少耦合并增加内聚

尽可能的将相关的代码组织在一起, 以便我们可以轻松的维护它们, 并方便我们随着应用规模的增长而扩展我们的代码, 这个称之为关注点分离.

/*在示例中, 函数从APPData类接收数据作为参数. 我们便可以使用任何Kotlin代码来获取这一数据, 并利用它来描述的我们的层级结构, 例如Header()与Body()调用*/
@Composable
fun App(appData: AppData){
  val derivedData = compute(appData)
  Header()
  if(appData,isOwner){
    EditButton()
  }
  Body{
    for(item in derivedData.items){
      Item(item)
    }
  }
}

二、布局

1 标准布局组件

使用Column可将多个项垂直地放置在屏幕上

使用Row可将多个项水平的放置在屏幕上

使用Box可将一个元素放在另一个元素上

2 修饰符

修饰符的作用类似于基于视图的布局中的布局参数, 借助修饰符, 可以修饰或扩充可组合项. 我们可以使用修饰符来执行以下操作:

更改可组合项的大小、布局、行为和外观
添加信息, 如无障碍标签
处理用户输入
添加高级互动, 如使元素可点击、可滚动、可推动或可缩放

@Composable
fun PhotographerCard(modifier: Modifier = Modifier){
    Row(
        modifier = modifier
            .clip(RoundedCornerShape(4.dp))
            .background(color = MaterialTheme.colors.surface)
//            .clickable(onClick = {}) .padding(16.dp)//自带点击水波纹效果
            .padding(16.dp).clickable(onClick = {}) //效果范围与👆🏻上面不一样
    ) {
        Surface(
            modifier = Modifier.size(50.dp),
            shape = CircleShape, //圆形
            color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_launcher_foreground),
                contentDescription = null
            )
        }
        Column {
            Text(text = "Alfred Sisley", fontWeight = FontWeight.Bold)
            //给Text设置中等透明度
//            LocalContentAlpha.provides(ContentAlpha.medium) 中等透明度
            CompositionLocalProvider(LocalContentAlpha provides  ContentAlpha.medium) {
                Text(text = "3 minutes ago", style = MaterialTheme.typography.body2)
            }
        }
    }
}

⚠️记录AS快捷键:

提取方法: option + command + M

提取局部变量：option + command + V

提取全局变量：option + command + F

最后编辑于：2021.12.01 09:35:01

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,117评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,328评论 1赞 293
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,839评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,007评论 0赞 206
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,384评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,629评论 1赞 219
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,880评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,593评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,313评论 1赞 243
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,575评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,066评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,392评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,052评论 3赞 236
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,082评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,844评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,662评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,575评论 2赞 270

Jetpack Compose初体验

1-1、简单体验示例

1-2、列表

1-3、列表添加点击动画

1-4、Compose所解决的问题

二、布局

1 标准布局组件

2 修饰符

推荐阅读更多精彩内容