Android JetpackCompose尝鲜第2篇

前言：

很早之前写过一篇JetpackCompose尝鲜的一篇，今天是趁着年前项目上线之后学习一下，今年Compose发展还是很好的，发布了很多版本，2021会有一个release版本，未来可期啊~~这里就不说太多废话，直接上代码：

1.设置布局：

setContent {
    MaterialTheme {
        setView("JetPack Compose")
    }
}

2.设置几个TextView和添加点击事件:

@Composable
private fun setView(s: String) {
    val intent = Intent(this, ComPoseListActivity::class.java)
    //列显示
    Column {
        //1.简单的Text使用
        Text(
            text = "1.简单的Text控件使用"
        )
        //2.控件颜色、字体大小、显示行数、超出处理
        Text(
            text = "2.使用自定义Style使用自定义Style使用自定义Style使用自定义Style使用自定义Style使用自定义Style使用自定义Style使用自定义Style使用自定义Style",
            overflow = TextOverflow.Ellipsis,
            maxLines = 1,
            style = TextStyle(
                Color.Red,
                fontSize = TextUnit.Companion.Sp(12f),
                fontStyle = FontStyle.Italic
            )
        )
        //3.使用系统自带样式
        Text(
            text = "3.使用系统自带样式",
            overflow = TextOverflow.Ellipsis,
            maxLines = 1,
            style = ((+MaterialTheme.typography()).subtitle1.copy()).copy(Color.Green),
            modifier = Spacing(6.dp)
        )
        //4.使用系统自带样式，通过copy讲颜色改成蓝色
        Text(
            text = "4.使用系统自带样式，通过copy讲颜色改成蓝色",
            overflow = TextOverflow.Ellipsis,
            maxLines = 1,
            style = ((+MaterialTheme.typography()).subtitle1.copy()).copy(Color.Blue)
        )
        //5.使用段落属性
        Text(
            text = "5.用段落属性，设置行高用段落属性，设置行高用段落属性",
            overflow = TextOverflow.Ellipsis,
            maxLines = 2,
            style = ((+MaterialTheme.typography()).body2.copy()).withOpacity(0.87f)
                .copy(Color.Red),
            paragraphStyle = ParagraphStyle(
                textAlign = TextAlign.Center,
                lineHeight = TextUnit.Sp(32)
            )
        )
​
        Button(
            onClick = {
                startActivity(intent)
            }
        ) {
            Text(
                text = "进入列表"
            )
        }
    }
}

3.实现的效果图如下：

4.实现一个列表：

val articles = mutableListOf
()
​
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    repeat(11) {
        articles.add(
            Article(
                id = "$it",
                title = "Jetpack Compose入门",
                url = "http://www.wanandroid.com/articles/$it",
                user = User(id = "188", name = "第${it}讲...", profileImageUrl = "")
            )
        )
    }
​
    setContent {
        MaterialTheme {
            Column {
                TopAppBar(title = {
                    Text("Jetpack Compose入门")
                })
                ArticleList(articles = articles)
            }
        }
    }
​
}

5.实体类：

/**
 *@author: njb
 *@date:  2021/2/6 16:24
 *@desc:
 */
data class User(val id: String,
                val name: String,
                val profileImageUrl: String
)

/**
 *@author: njb
 *@date:  2021/2/6 16:25
 *@desc:
 */
data class Article( val id: String,
                    val title: String,
                    val url: String,
                    val user: User
)

/**
 *@author: njb
 *@date:  2021/2/6 10:55
 *@desc:  列表item适配器
 */
@Composable
fun ArticleItem(article: Article) {
    val image = +imageResource(R.mipmap.ic_pic)
    val typography = +MaterialTheme.typography()
​
    Row(modifier = Spacing(16.dp)) {
        Container(modifier = Size(60.dp, 60.dp)) {
            DrawImage(image = image)
        }
        Column(modifier = ExpandedWidth wraps Spacing(right = 16.dp, left = 16.dp)) {
            Text(article.title, style = typography.h6)
            Text(article.user.name, modifier = Spacing(top = 4.dp), style = typography.subtitle2)
        }
    }
}

/**
 *@author: njb
 *@date:  2021/2/6 10:55
 *@desc:  列表属性设置
 */
@Composable
fun ArticleList(articles: List
) {
    VerticalScroller {
        Column {
            articles.forEach { article ->
                Card(
                    modifier = Spacing(4.dp) wraps Expanded,
                    shape = RoundedCornerShape(8.dp)
                ) {
                    ArticleItem(article = article)
                }
            }
        }
    }
}

6.实现的列表截图如下：

7.例子的源码地址如下：

ComposeDemo2: JetPack ComposeDemo2， 如有不对的地方欢迎小伙伴们提出宝贵意见，我会及时改正，后面会根据官方文档和demo写几个完整的项目例子，待relsease版本发布后会引入到项目中来。