1、查看库的版本

平常我们经常会用到一些库，但是不知道是什么版本，也不知道最新的是什么版本，当然最好的就是到官网去查看，或者三方的maven库。

2、官方地址

AndroidX 版本  |  Jetpack  |  Android Developers

3、比如我们来看一下constraintlayout

4、引入到项目libs

androidx-constraintlayout = { module = "androidx.constraintlayout:constraintlayout-compose", version.ref = "constraintLayout" }constraintLayout = "1.1.1"

5、引入项目

implementation(libs.androidx.constraintlayout)

6、写个demo

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dpimport android.util.Log
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.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.TextFieldValue
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension
import kotlinx.coroutines.launch@Composable
fun SalesScreen() {val scope = rememberCoroutineScope()val context = LocalContext.currentvar selectedCategoryId by remember { mutableStateOf(0L) }var searchText by remember { mutableStateOf(TextFieldValue("")) }// 模拟分类数据val categories = listOf(Category(1, "饮料"),Category(2, "零食"),Category(3, "日用品"))// 模拟商品数据val goodsList = remember(selectedCategoryId, searchText) {getGoodsByCategoryAndSearch(selectedCategoryId, searchText.text)}ConstraintLayout(modifier = Modifier.fillMaxSize()) {val (categoryList, goodsHeader, goodsListSection) = createRefs()// 左侧分类列表LazyColumn(modifier = Modifier.constrainAs(categoryList) {start.linkTo(parent.start)top.linkTo(parent.top)bottom.linkTo(parent.bottom)width = Dimension.percent(0.3f)}.padding(8.dp)) {items(categories) { category ->CategoryItem(category = category,isSelected = category.id == selectedCategoryId,onClick = {selectedCategoryId = category.id})}}// 右侧商品搜索栏TextField(value = searchText,onValueChange = { searchText = it },label = { Text("搜索商品") },modifier = Modifier.constrainAs(goodsHeader) {start.linkTo(categoryList.end)end.linkTo(parent.end)top.linkTo(parent.top)width = Dimension.fillToConstraints}.padding(8.dp))// 右侧商品列表LazyColumn(modifier = Modifier.constrainAs(goodsListSection) {start.linkTo(categoryList.end)top.linkTo(goodsHeader.bottom)end.linkTo(parent.end)bottom.linkTo(parent.bottom)width = Dimension.percent(0.7f)}.padding(8.dp)) {items(goodsList) { good ->GoodItem(good = good)}}}
}// 分类数据类
data class Category(val id: Long, val name: String)// 商品数据类
data class Good(val id: Long, val name: String, val price: Double)// 分类项组件
@Composable
fun CategoryItem(category: Category, isSelected: Boolean, onClick: () -> Unit) {Card(modifier = Modifier.fillMaxWidth().padding(4.dp).clickable { onClick() },colors = if (isSelected) CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.primaryContainer)else CardDefaults.cardColors()) {Text(text = category.name,modifier = Modifier.padding(12.dp))}
}// 商品项组件
@Composable
fun GoodItem(good: Good) {Card(modifier = Modifier.fillMaxWidth().padding(4.dp)) {Row(modifier = Modifier.padding(12.dp)) {Text(text = good.name, style = MaterialTheme.typography.titleMedium)Spacer(modifier = Modifier.weight(1f))Text(text = "￥${good.price}", style = MaterialTheme.typography.titleSmall)}}
}// 模拟根据分类和搜索条件获取商品列表
fun getGoodsByCategoryAndSearch(categoryId: Long, query: String): List<Good> {// 假设原始数据val allGoods = mapOf(1L to listOf(Good(1, "可乐", 3.5),Good(2, "雪碧", 3.5),Good(3, "矿泉水", 2.0)),2L to listOf(Good(4, "薯片", 5.0),Good(5, "巧克力", 8.0),Good(6, "饼干", 4.5)),3L to listOf(Good(7, "牙膏", 9.9),Good(8, "洗发水", 19.9),Good(9, "纸巾", 5.0)))return allGoods[categoryId]?.filter {it.name.contains(query, ignoreCase = true)} ?: emptyList()
}

7、demo运行截图

demo运行的效果，还是不错的，点击左侧，能显示右侧的列表，相当可以。