Compose 可组合项 - 容器类

Jomurphys

已于 2024-06-18 15:41:36 修改

阅读量886

点赞数

分类专栏： Compose 文章标签： android

于 2023-08-27 17:04:03 首次发布

本文链接：https://blog.csdn.net/HugMua/article/details/132525212

版权

Compose 专栏收录该内容

33 篇文章 5 订阅

订阅专栏

二、延迟表格 LazyVerticalGrid、LazyHorizontalGrid

@Preview(showBackground = true, name = "Fixed")
@Composable
fun Show1() {
    Demo(GridCells.Fixed(5))
}

@Preview(showBackground = true, name = "Adaptive")
@Composable
fun Show() {
    Demo(GridCells.Adaptive(60.dp))
}

@Composable
fun Demo(style: GridCells) {
    val dataList = listOf("香菜", "酒鬼花生", "酱油酱油酱油", "海鲜酱海鲜酱", "陈醋陈醋", "小葱花", "大蒜泥", "辣椒", "老干妈", "耗油", "芝麻酱")
    val lazyGridState = rememberLazyGridState()
    LazyVerticalGrid(
        columns = style,    //描述单元格展现形式：fixed设置固定尺寸、Adaptive设置最小尺寸后内容自适应网格大小
        modifier = Modifier.fillMaxWidth(),
        state = lazyGridState,
        contentPadding = PaddingValues(0.dp),   //边距
        reverseLayout = false,  //是否反转显示
        verticalArrangement = Arrangement.Top,
        horizontalArrangement = Arrangement.Start,
        flingBehavior = ScrollableDefaults.flingBehavior(),
        userScrollEnabled = true    //是否允许滑动
    ){
        itemsIndexed(dataList){index: Int, item: String ->
            Text(text = "${index}：$item", maxLines = 1, modifier = Modifier
                .padding(1.dp)
                .background(Color.Red))
        }
    }
}

三、 LazyVerticalStaggeredGrid、LazyHorizontalStaggeredGrid

@Preview(showBackground = true, name = "Fixed")
@Composable
fun Show1() {
    Demo(StaggeredGridCells.Fixed(5))
}

@Preview(showBackground = true, name = "Adaptive")
@Composable
fun Show() {
    Demo(StaggeredGridCells.Adaptive(60.dp))
}

@Composable
fun Demo(style: StaggeredGridCells) {
    val dataList = listOf("香菜", "酒鬼花生", "酱油酱油酱油", "海鲜酱海鲜酱", "陈醋陈醋", "小葱花", "大蒜泥", "辣椒", "老干妈", "耗油", "芝麻酱")
    val state = rememberLazyStaggeredGridState()
    LazyVerticalStaggeredGrid(
        columns = style,//描述单元格展现形式：fixed设置固定尺寸、Adaptive设置最小尺寸后内容自适应网格大小
        modifier = Modifier.fillMaxWidth(),
        state = state,
        contentPadding = PaddingValues(0.dp),   //边距
        reverseLayout = false,  //是否反转显示
        verticalItemSpacing = 0.dp, //行间距
        horizontalArrangement = Arrangement.Start,
        flingBehavior = ScrollableDefaults.flingBehavior(),
        userScrollEnabled = true    //是否允许滑动
    ) {
        itemsIndexed(dataList){index: Int, item: String ->
            Text(text = "${index}：$item", maxLines = 1, modifier = Modifier
                .padding(1.dp)
                .background(Color.Red))
        }
    }
}

六、滑动界面 HorizontalPager、VerticalPager

类似于 ViewPager，1.4 版本之前需要借助 accompanis 库，底层基于 LazyColumn、LazyRow 实现，在使用上也基本相同。

fun HorizontalPager(
    pageCount: Int,    //页面数量
    modifier: Modifier = Modifier,
    state: PagerState = rememberPagerState(),    //控制监听页面状态的对象
    contentPadding: PaddingValues = PaddingValues(0.dp),    //内容内边距
    pageSize: PageSize = PageSize.Fill,    //页面填充模式（填充满Fill，自适应Fixed）
    beyondBoundsPageCount: Int = 0,    //当前页面前后预加载的页面数量
    pageSpacing: Dp = 0.dp,    //两个页面之间的间隙
    verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
    flingBehavior: SnapFlingBehavior = PagerDefaults.flingBehavior(state = state),    //用于滚动后手势的flingBehavior
    userScrollEnabled: Boolean = true,    //是否允许通过用户手势或辅助功能进行滚动（即使禁用PagerState.scroll，您仍然可以使用它以编程方式滚动）
    reverseLayout: Boolean = false,    //反转页面顺序
    key: ((index: Int) -> Any)? = null,    //表示项目的稳定且唯一的密钥。当您指定键时，滚动位置将根据键保持，这意味着如果您在当前可见项目之前添加/删除项目，则具有给定键的项目将保留为第一个可见项目。
    pageNestedScrollConnection: NestedScrollConnection = PagerDefaults.pageNestedScrollConnection(
        Orientation.Horizontal
    ),    //一个嵌套的ScrollConnection，用于指示此Pager如何使用嵌套列表。默认行为将使Pager消耗所有嵌套的delta。
    pageContent: @Composable (page: Int) -> Unit
)

6.1 简单使用

HorizontalPager(
    pageCount = 10,
    modifier = Modifier.size(100.dp)
) { page ->
    // 每一页的内容，比如显示个文本
    Text(
        text = "Page: $page",
        modifier = Modifier.fillMaxSize()
    )
}

6.2 添加指示器 Indicator

七、选项卡 TabRow

var selectedIndex by remember { mutableStateOf(0) }
TabRow(
    modifier = Modifier,
    selectedTabIndex = selectedIndex,    //选中的索引
    containerColor = Color.Green, //背景色
    contentColor = Color.Yellow, //内容色(子Tab设置未选中颜色会覆盖这个)
    indicator = {},  //设置指示器
    divider = {}    //设置分割线
) {
    //图片和文字是横向的
    LeadingIconTab(
        modifier = Modifier,
        selected = selectedIndex == 0,  //是否选中
        onClick = { selectedIndex = 0 },    //点击监听
        text = { Text(text = "选项0") },  //选项文字
        icon = { Icon( imageVector = Icons.Default.AccountBox, contentDescription = null ) },   //选项图片
        enabled = true, //是否启用
        selectedContentColor = Color.Red,    //选中颜色
        unselectedContentColor = Color.Blue, //未选中颜色
    )
    //图片和文字是纵向的
    Tab(
        modifier = Modifier,
        selected = selectedIndex == 1,  //是否选中
        onClick = { selectedIndex = 1 },    //点击监听
        text = { Text(text = "选项1") },    //选项文字
        icon = { Icon( imageVector = Icons.Default.AccountBox, contentDescription = null ) },   //选项图片
        enabled = true, //是否启用
        selectedContentColor = Color.Red,    //选中颜色
        unselectedContentColor = Color.Blue, //未选中颜色
    )
}

八、可滑动选项卡 ScrollableTabRow

val dataList = listOf("热点", "世界杯", "数码科技", "英雄联盟", "视频", "在线直播", "娱乐圈")
var selectedIndex by remember { mutableStateOf(0) }
ScrollableTabRow(
    modifier = Modifier,
    selectedTabIndex = selectedIndex,    //选中的索引
    containerColor = Color.Green, //背景色
    contentColor = Color.Yellow, //内容色(子Tab设置未选中颜色会覆盖这个)
    indicator = {},  //设置指示器
    divider = {}    //设置分割线
) {
    dataList.onEachIndexed { index, str ->
        Tab(
            selected = selectedIndex == index,  //是否选中
            text = { Text(text = dataList[index]) },    //选项文字
            onClick = { selectedIndex = index },    //点击监听
            selectedContentColor = Color.Red,    //选中颜色
            unselectedContentColor = Color.Blue, //未选中颜色
        )
    }
}

九、卡片 Card

Card(
    modifier = Modifier,
    shape = CircleShape,
    colors = CardDefaults.cardColors(),
    elevation = CardDefaults.cardElevation(),
    border = BorderStroke(width = 1.dp, color = Color.Red),
) {
    //子元素
}

十一、平面 Surface

Surface(
    modifier = Modifier.size(50.dp).padding(5.dp),
    shape = RectangleShape, //形状（RectangleShape矩形、CircleShape圆形、RoundedCornerShape圆角、CutCornerShape切角）
    color = Color.Red,  //背景色（默认是主题中的surface颜色）
    contentColor = Color.Blue,  //内容主色
    tonalElevation = 0.dp,  //当color=ColorScheme.surface时，值越大，浅色主题越深，深色主题越浅
    shadowElevation = 0.dp, //阴影大小
    border = BorderStroke(width = 1.dp, color = Color.Black),   //边框粗细和颜色
) {
    //子元素
}

十一、流式布局 FlowRow、FlowColumn

当一行（或一列）放不下里面的内容时，会自动换行。这些流式布局还允许使用权重进行动态调整大小，以将项目分配到容器中。

@Composable
fun Filters() {
    val filters = listOf("Washer/Dryer", "Ramp access", "Garden", "Cats OK", "Dogs OK", "Smoke-free")
    FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
        filters.forEach { title ->
            var selected by remember { mutableStateOf(false) }
            val leadingIcon: @Composable () -> Unit = { Icon(Icons.Default.Check, null) }
            FilterChip(
                selected = selected,
                onClick = { selected = !selected },
                label = { Text(title) },
                leadingIcon = if (selected) leadingIcon else null
            )
        }
    }
}