android开发中的 AndroidX 版本的查看 及 constraintLayout的简单用法

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.dp

import 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.current

    var 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运行的效果，还是不错的，点击左侧，能显示右侧的列表，相当可以。