老套路先看图：PicuterShow/GIF 2021-12-31 18-26-59.gif · xiayiye5/ComposeStudy - Gitee.com
这里面涉及的知识点比较多主要有：
1.AS版本建议使用最新的白狐版本,注意compose目前仅支持kotlin语言开发
2.列表控件LazyColumn
3.compose如何加载网络图片
4.布局如何编写
第一步使用最新版本AS创建一个compose项目,创建后等待库下载完成会自定配置compose环境
第二步：得先依赖网络图片库
implementation("io.coil-kt:coil:1.4.0")
implementation("io.coil-kt:coil-compose:1.4.0")第三步：
开始编写首页布局
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeStudyTheme {
// A surface container using the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
Greeting()
}
}
}
}
}
@Composable
fun Greeting() {
//这个就是首页布局
HomeShow()
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
ComposeStudyTheme {
Greeting()
}
}再看下首页布局怎么样的
package com.example.composestudy.ui.widget
import android.widget.Toast
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.absolutePadding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import com.example.composestudy.ui.widget.MessageWidget.Companion.MessageList
/**
* 项目名称 : ComposeStudy
* 项目路径 : com.example.composestudy.ui.widget
* 当前作者 : xiayiye5
* 创建时间 : 2021/12/31 17:56
*/
class HomeWidget {
companion object {
@Composable
fun HomeShow() {
// 获取图片
Column(
verticalArrangement = Arrangement.Top,
modifier = Modifier.absolutePadding(20.dp, 20.dp, 20.dp, 20.dp)
) {
Text(text = "风景列表展示")
// ImageTest()
val current = LocalContext.current
Button(
onClick = { Toast.makeText(current, "哈哈哈哈", Toast.LENGTH_SHORT).show() }) {
Text("点我")
}
//下面就是列表布局的数据
MessageList(
listOf(
"Hello",
"Android",
"我超❤ JetPack Compose的！",
"三天打鱼",
"两天晒网",
"葫芦岛上卖葫芦",
"上海水来自海上",
"江东父老有江东",
"乌江自刎有霸王"
)
)
}
}
}
}再看下MessageList里面的东西
package com.example.composestudy.ui.widget
import android.widget.Toast
import androidx.compose.foundation.clickable
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import com.example.composestudy.ImageTest
import com.example.composestudy.ui.widget.NetworkImgWidget.Companion.NetworkImg
/**
* 项目名称 : ComposeStudy
* 项目路径 : com.example.composestudy.ui.widget
* 当前作者 : xiayiye5
* 创建时间 : 2021/12/31 18:00
*/
class MessageWidget {
companion object {
@Composable
fun MessageList(messages: List<String>) {
// 值可
val current = LocalContext.current// 以是 List或者Array两种方式
//LazyColum这个控件类似android中的listview
LazyColumn {
// Modifier.clickable(onClick = {
// Toast.makeText(current, "点击了", Toast.LENGTH_LONG).show()
// })
// items(messages.size) { message ->//遍历索引的方式
// Text(text = messages[message])
// }
// items(items = messages) { message -> //遍历内容
// Text(text = message)
// }
//itemsIndexed代表每个item布局,跟listview里面的item布局一个意思
itemsIndexed(items = messages) { index, item -> //遍历内容和索引
if (index == 0) {
//交表0位置设置不一样的布局
ImageTest()
}
//这里是每个item对应的标题(角标0除外)
Text(
text = "索引:$index -- 内容:$item",
Modifier.clickable(enabled = true, onClick = {
Toast.makeText(current, "点击了$item", Toast.LENGTH_SHORT).show()
})
)
//这里是列表需要展示的图片
NetworkImg(index)
}
}
}
}
}再看下NetworkImg布局怎么写的
package com.example.composestudy.ui.widget
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import coil.compose.rememberImagePainter
/**
* 项目名称 : ComposeStudy
* 项目路径 : com.example.composestudy.ui.widget
* 当前作者 : xiayiye5
* 创建时间 : 2021/12/31 18:03
*/
class NetworkImgWidget {
companion object {
@Composable
fun NetworkImg(index: Int) {
val imgList = listOf(
"https://img1.baidu.com/it/u=2943699027,12737242&fm=253&fmt=auto&app=120&f=JPEG?w=781&h=500",
"https://img-blog.csdnimg.cn/20210823085620179.jpeg",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.tuchong.com%2F7778538%2Ff%2F449478719.jpg&refer=http%3A%2F%2Fphoto.tuchong.com&app=2002&size=f9999,10000&q=a80&n=0",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.tuchong.com%2F1454835%2Ff%2F8764156.jpg&refer=http%3A%2F%2Fphoto.tuchong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg8.zol.com.cn%2Fbbs%2Fupload%2F19768%2F19767286.jpg&refer=http%3A%2F%2Fimg8.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.tuchong.com%2F5063625%2Ff%2F756815784.jpg&refer=http%3A%2F%2Fphoto.tuchong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F20%2Fc0%2F29812058_1387481203947.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1404%2F29%2Fc3%2F33695617_33695617_1398756004682.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpp.qn.img-space.com%2Fg1%2FM00%2F08%2F5B%2FCg-4q1dzGseIXQSRAA4uyv-86_sAATFWQDWz-kADi7i541.jpg%3FimageView2%2F2%2Fw%2F1200%2Fq%2F100%2Fignore-error%2F1%2F&refer=http%3A%2F%2Fpp.qn.img-space.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg"
)
Image(
modifier = Modifier.size(1000.dp, 300.dp),
// painter = rememberImagePainter("https://img-blog.csdnimg.cn/20210823085620179.jpeg"),
painter = rememberImagePainter(imgList[index]),
contentDescription = null
)
}
}
}0基础初学者看着可能比较复杂，我提供了一份源码
ComposeStudy项目源码下载：源码下载
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
