Componse中的常用组件一. 常用组件1.1 HorizontalPager 轮播图1.2 Scaffold 脚手架1.2.1 基础Scaffold1.2.2 添加顶部导航栏1.2.3 添加底部导航栏1.2.4 添加悬浮按钮1.2.5 封装BottomNav1.3. SecondaryScrollableTabRow 分类Tab1.3.1. 最简单的分类Tab1.3.2. 自定义选中样式1.4. 底层弹窗ModelBottomSheet1.4.1. 简单集成一. 常用组件1.1 HorizontalPager 轮播图ComposablefunBasicPagerDemo(){// 由于没有图片 使用颜色代替valcolorslistOf(Color(0xFFE91E63),// 粉色Color(0xFF2196F3),// 蓝色Color(0xFF4CAF50)// 绿色)// 定义pageState对象valpageStaterememberPagerState(pageCount{colors.size})HorizontalPager(statepageState,verticalAlignmentAlignment.Top){page-// 当前页数下标Box(modifierModifier.fillMaxWidth().aspectRatio(2.6f).background(colors[page]),contentAlignmentAlignment.Center){Text(第${page1}页,fontWeightFontWeight.Bold,colorColor.White)}}}rememberPagerState(pageCount { colors.size }): 创建分页状态 3页HorizontalPager 水平分页组件类似ViewPageraspectRatio: 宽高比**{page -} ** 每一页的UI, page是当前页面 0,1,2rememberPagerState参数说明pageCount { 数量 } - 总页数Lambda形式initalPage 起始页 - 初始显示第几页默认0pageState提供了几个关键属性让我们可以随时获取分页的状态pageState提供了两个挂起函数1.2 Scaffold 脚手架什么是ScaffoldScaffold是Componse提供的”页面框架模版“就像盖房子先搭脚手架一样它帮你自动处理顶部栏、底部栏、内容区域的位置关系不用手动计算问题。1.2.1 基础ScaffoldComposablefunScaffoldStepOne(){Scaffold{paddingValues-Box(modifierModifier.fillMaxSize().padding(paddingValues).background(Color.Red),contentAlignmentAlignment.Center// 内容居中显示){Text(主题内容-简单的脚手架,fontSize20.sp)}}}结果运行之后你可以看到屏幕居中显示”主内容“不会被状态栏遮挡解释Scaffold { paddingValues - ...}: 大括号中是内容区域paddingValues Scaffold自动计算出安全距离你不用管具体数值用它就行。f1.2.2 添加顶部导航栏// 使用Scaffold(topBar{TopAppBarView()}// 导航栏)// 导航栏OptIn(ExperimentalMaterial3Api::class)ComposablefunTopAppBarView(){TopAppBar(title{Text(导航栏标题,fontWeightFontWeight.Bold,fontSize20.sp)},colorsTopAppBarDefaults.topAppBarColors(containerColorColor.Blue,// 导航栏的背景色titleContentColorColor.Green// 导航栏标题颜色))}结果topBar参数接受一个Componse组件TopAppBar是Material3提供的标准顶部栏自带标题模式colors参数设置顶部栏背景色和标题颜色加上后paddingvalues会自动包含顶部导航栏的高度OptIn(ExperimentalMaterial3Api::class)TopAppBar的部分参数是实验性API需要加这个注解。它只是一个标记告诉编译器”我知道这是实验性的“。1.2.3 添加底部导航栏首先我们可以配置下icons库implementation(androidx.compose.material:material-icons-extended:1.7.8)Scaffold(// ... 其他配置bottomBar{BottomBarView()}// 底部导航栏){// ... 内容}ComposablefunBottomBarView(){NavigationBar{NavigationBarItem(selectedtrue,icon{Icon(Icons.Filled.Home,contentDescription首页)},label{Text(首页)},onClick{})NavigationBarItem(selectedtrue,icon{Icon(Icons.Filled.AlarmOn,contentDescription消息)},label{Text(首页)},onClick{})NavigationBarItem(selectedtrue,icon{Icon(Icons.Filled.Person,contentDescription我的)},label{Text(首页)},onClick{})}}结果1.2.4 添加悬浮按钮Scaffold(// ... 其他配置floatingActionButton{// 悬浮按钮FloatingActionButton(onClick{/* 处理点击事件 */}){Icon(Icons.Filled.Add,contentDescription添加)}}){// 内容 ....}结果1.2.5 封装BottomNav实现底部工具栏的点击ComposablefunScaffoldStepOne(){// 定义底部table数据valtabslistOfTabItem(TabItem(首页,selectedIconIcons.Filled.Home,unSelectedIconIcons.Outlined.Home,TabType.Home),TabItem(消息,selectedIconIcons.Filled.AlarmOn,unSelectedIconIcons.Outlined.AlarmOn,TabType.Message),TabItem(我的,selectedIconIcons.Filled.Person,unSelectedIconIcons.Outlined.Person,TabType.Mine),)// 声明变量记录当前的选中tab类型varcurrentRoutebyremember{mutableStateOf(TabType.Home)}Scaffold(// 其他属性内容 ...bottomBar{BottomBarView(tabs,currentRoute,{currentRouteit})},// 底部导航栏){// 内容....}// 封装的底部工具栏代码ComposablefunBottomBarView(tabs:ListTabItem,currentRoute:TabType,onTableItemClick:(TabType)-Unit){NavigationBar{tabs.forEach{tab-NavigationBarItem(selectedcurrentRoutetab.route,icon{Icon(if(currentRoutetab.route)tab.selectedIconelsetab.unSelectedIcon,contentDescriptiontab.name)},label{Text(tab.name)},onClick{onTableItemClick(tab.route)})}}}注意ImageVector是矢量图标的类型Icons.Filled.Home是实心图标选中时用Icons.Outlined.Home是描边图标未选中时用1.3. SecondaryScrollableTabRow 分类Tab例如顶部的分类标签1.3.1. 最简单的分类TabOptIn(ExperimentalMaterial3Api::class)ComposablefunCategoryTabsDemo(){valcategorieslistOfString(全部,Android,Java,Kotlin,网络,算法,数据库)varselectedIndexbyremember{mutableIntStateOf(0)}SecondaryScrollableTabRow(selectedTabIndexselectedIndex,edgePadding16.dp){categories.forEachIndexed{index,category-Tab(selectedselectedIndexindex,text{Text(category)},onClick{selectedIndexindex})}}}1.3.2. 自定义选中样式OptIn(ExperimentalMaterial3Api::class)ComposablefunCategoryTabsCustomDemo(){valcategorieslistOfString(全部,Android,Java,Kotlin,网络,算法,数据库)varselectedIndexbyremember{mutableIntStateOf(0)}SecondaryScrollableTabRow(selectedTabIndexselectedIndex,edgePadding16.dp,indicator{},// 取出默认的指示器就是选中的item下面的下划线divider{}){categories.forEachIndexed{index,category-Tab(selectedselectedIndexindex,text{Column(horizontalAlignmentAlignment.CenterHorizontally,modifierModifier.background(Color.Red)){// 文字Text(category,fontSize15.sp,colorif(selectedIndexindex)Color.BlackelseColor.Gray,fontWeightif(selectedIndexindex)FontWeight.BoldelseFontWeight.Normal)// 选中时的下划线if(selectedIndexindex){Spacer(modifierModifier.height(5.dp))Box(modifierModifier.width(20.dp).height(2.dp).background(Color.Black))}}},onClick{selectedIndexindex})}}}结果:1.4. 底层弹窗ModelBottomSheetModelBottomSheet是Mateial3的实验性API使用时需要加注解OptIn(ExperimentalMaterial3Api::class)。OptIn不是功能代码只是一个标记实验性API可能在未来的版本变化编译器要求你明确知道风险。1.4.1. 简单集成OptIn(ExperimentalMaterial3Api::class)ComposablefunFilterSheetDemo(onDismiss:()-Unit){ModalBottomSheet(onDismissRequestonDismiss){Text(这个是弹窗内容,modifierModifier.padding(20.dp))}}// 调用// 声明底部视图的类型。varshowModelBottomViewbyremember{mutableStateOf(false)}// 点击事件触发floatingActionButton{// 悬浮按钮FloatingActionButton(onClick{/* 处理点击事件 */showModelBottomViewtrue}){Icon(Icons.Filled.Add,contentDescription添加)}}// 显示弹窗// 底部弹窗if(showModelBottomView){FilterSheetDemo{showModelBottomViewfalse}}效果
Componse中的常用组件一. 常用组件1.1 HorizontalPager 轮播图1.2 Scaffold 脚手架1.2.1 基础Scaffold1.2.2 添加顶部导航栏1.2.3 添加底部导航栏1.2.4 添加悬浮按钮1.2.5 封装BottomNav1.3. SecondaryScrollableTabRow 分类Tab1.3.1. 最简单的分类Tab1.3.2. 自定义选中样式1.4. 底层弹窗ModelBottomSheet1.4.1. 简单集成一. 常用组件1.1 HorizontalPager 轮播图ComposablefunBasicPagerDemo(){// 由于没有图片 使用颜色代替valcolorslistOf(Color(0xFFE91E63),// 粉色Color(0xFF2196F3),// 蓝色Color(0xFF4CAF50)// 绿色)// 定义pageState对象valpageStaterememberPagerState(pageCount{colors.size})HorizontalPager(statepageState,verticalAlignmentAlignment.Top){page-// 当前页数下标Box(modifierModifier.fillMaxWidth().aspectRatio(2.6f).background(colors[page]),contentAlignmentAlignment.Center){Text(第${page1}页,fontWeightFontWeight.Bold,colorColor.White)}}}rememberPagerState(pageCount { colors.size }): 创建分页状态 3页HorizontalPager 水平分页组件类似ViewPageraspectRatio: 宽高比**{page -} ** 每一页的UI, page是当前页面 0,1,2rememberPagerState参数说明pageCount { 数量 } - 总页数Lambda形式initalPage 起始页 - 初始显示第几页默认0pageState提供了几个关键属性让我们可以随时获取分页的状态pageState提供了两个挂起函数1.2 Scaffold 脚手架什么是ScaffoldScaffold是Componse提供的”页面框架模版“就像盖房子先搭脚手架一样它帮你自动处理顶部栏、底部栏、内容区域的位置关系不用手动计算问题。1.2.1 基础ScaffoldComposablefunScaffoldStepOne(){Scaffold{paddingValues-Box(modifierModifier.fillMaxSize().padding(paddingValues).background(Color.Red),contentAlignmentAlignment.Center// 内容居中显示){Text(主题内容-简单的脚手架,fontSize20.sp)}}}结果运行之后你可以看到屏幕居中显示”主内容“不会被状态栏遮挡解释Scaffold { paddingValues - ...}: 大括号中是内容区域paddingValues Scaffold自动计算出安全距离你不用管具体数值用它就行。f1.2.2 添加顶部导航栏// 使用Scaffold(topBar{TopAppBarView()}// 导航栏)// 导航栏OptIn(ExperimentalMaterial3Api::class)ComposablefunTopAppBarView(){TopAppBar(title{Text(导航栏标题,fontWeightFontWeight.Bold,fontSize20.sp)},colorsTopAppBarDefaults.topAppBarColors(containerColorColor.Blue,// 导航栏的背景色titleContentColorColor.Green// 导航栏标题颜色))}结果topBar参数接受一个Componse组件TopAppBar是Material3提供的标准顶部栏自带标题模式colors参数设置顶部栏背景色和标题颜色加上后paddingvalues会自动包含顶部导航栏的高度OptIn(ExperimentalMaterial3Api::class)TopAppBar的部分参数是实验性API需要加这个注解。它只是一个标记告诉编译器”我知道这是实验性的“。1.2.3 添加底部导航栏首先我们可以配置下icons库implementation(androidx.compose.material:material-icons-extended:1.7.8)Scaffold(// ... 其他配置bottomBar{BottomBarView()}// 底部导航栏){// ... 内容}ComposablefunBottomBarView(){NavigationBar{NavigationBarItem(selectedtrue,icon{Icon(Icons.Filled.Home,contentDescription首页)},label{Text(首页)},onClick{})NavigationBarItem(selectedtrue,icon{Icon(Icons.Filled.AlarmOn,contentDescription消息)},label{Text(首页)},onClick{})NavigationBarItem(selectedtrue,icon{Icon(Icons.Filled.Person,contentDescription我的)},label{Text(首页)},onClick{})}}结果1.2.4 添加悬浮按钮Scaffold(// ... 其他配置floatingActionButton{// 悬浮按钮FloatingActionButton(onClick{/* 处理点击事件 */}){Icon(Icons.Filled.Add,contentDescription添加)}}){// 内容 ....}结果1.2.5 封装BottomNav实现底部工具栏的点击ComposablefunScaffoldStepOne(){// 定义底部table数据valtabslistOfTabItem(TabItem(首页,selectedIconIcons.Filled.Home,unSelectedIconIcons.Outlined.Home,TabType.Home),TabItem(消息,selectedIconIcons.Filled.AlarmOn,unSelectedIconIcons.Outlined.AlarmOn,TabType.Message),TabItem(我的,selectedIconIcons.Filled.Person,unSelectedIconIcons.Outlined.Person,TabType.Mine),)// 声明变量记录当前的选中tab类型varcurrentRoutebyremember{mutableStateOf(TabType.Home)}Scaffold(// 其他属性内容 ...bottomBar{BottomBarView(tabs,currentRoute,{currentRouteit})},// 底部导航栏){// 内容....}// 封装的底部工具栏代码ComposablefunBottomBarView(tabs:ListTabItem,currentRoute:TabType,onTableItemClick:(TabType)-Unit){NavigationBar{tabs.forEach{tab-NavigationBarItem(selectedcurrentRoutetab.route,icon{Icon(if(currentRoutetab.route)tab.selectedIconelsetab.unSelectedIcon,contentDescriptiontab.name)},label{Text(tab.name)},onClick{onTableItemClick(tab.route)})}}}注意ImageVector是矢量图标的类型Icons.Filled.Home是实心图标选中时用Icons.Outlined.Home是描边图标未选中时用1.3. SecondaryScrollableTabRow 分类Tab例如顶部的分类标签1.3.1. 最简单的分类TabOptIn(ExperimentalMaterial3Api::class)ComposablefunCategoryTabsDemo(){valcategorieslistOfString(全部,Android,Java,Kotlin,网络,算法,数据库)varselectedIndexbyremember{mutableIntStateOf(0)}SecondaryScrollableTabRow(selectedTabIndexselectedIndex,edgePadding16.dp){categories.forEachIndexed{index,category-Tab(selectedselectedIndexindex,text{Text(category)},onClick{selectedIndexindex})}}}1.3.2. 自定义选中样式OptIn(ExperimentalMaterial3Api::class)ComposablefunCategoryTabsCustomDemo(){valcategorieslistOfString(全部,Android,Java,Kotlin,网络,算法,数据库)varselectedIndexbyremember{mutableIntStateOf(0)}SecondaryScrollableTabRow(selectedTabIndexselectedIndex,edgePadding16.dp,indicator{},// 取出默认的指示器就是选中的item下面的下划线divider{}){categories.forEachIndexed{index,category-Tab(selectedselectedIndexindex,text{Column(horizontalAlignmentAlignment.CenterHorizontally,modifierModifier.background(Color.Red)){// 文字Text(category,fontSize15.sp,colorif(selectedIndexindex)Color.BlackelseColor.Gray,fontWeightif(selectedIndexindex)FontWeight.BoldelseFontWeight.Normal)// 选中时的下划线if(selectedIndexindex){Spacer(modifierModifier.height(5.dp))Box(modifierModifier.width(20.dp).height(2.dp).background(Color.Black))}}},onClick{selectedIndexindex})}}}结果:1.4. 底层弹窗ModelBottomSheetModelBottomSheet是Mateial3的实验性API使用时需要加注解OptIn(ExperimentalMaterial3Api::class)。OptIn不是功能代码只是一个标记实验性API可能在未来的版本变化编译器要求你明确知道风险。1.4.1. 简单集成OptIn(ExperimentalMaterial3Api::class)ComposablefunFilterSheetDemo(onDismiss:()-Unit){ModalBottomSheet(onDismissRequestonDismiss){Text(这个是弹窗内容,modifierModifier.padding(20.dp))}}// 调用// 声明底部视图的类型。varshowModelBottomViewbyremember{mutableStateOf(false)}// 点击事件触发floatingActionButton{// 悬浮按钮FloatingActionButton(onClick{/* 处理点击事件 */showModelBottomViewtrue}){Icon(Icons.Filled.Add,contentDescription添加)}}// 显示弹窗// 底部弹窗if(showModelBottomView){FilterSheetDemo{showModelBottomViewfalse}}效果
