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運行的效果，還是不錯的，點擊左側，能顯示右側的列表，相當可以。