JetpackCompose Scaffold组件使用教程
更新时间:2023年1月6日 14:47 点击:773 作者:知奕奕
搭设基本Scaffold页面
scaffold 组件遵循 Material Design,可以协助开发者迅速构建对应框架页面
准备工作
首先在 drawable 文件夹内,添加几张 vector images,用作我们的底部导航栏图标
在主页面中声明数据类,表示单个图标以及其解释文本
data class Item( val name: String, val icon: Int )
新增组件 mainBody,逐一添加三个底部按钮的图标
@Composable fun mainBody() { // 存储当前选中的底部按钮的状态 var selectedItem by remember { mutableStateOf(0) } // 三个底部按钮 val items = listOf( Item("主页", R.drawable.home), Item("列表", R.drawable.list), Item("设置", R.drawable.setting) ) ... }
主体编写
首先是设置 topBar,即顶部导航栏对应按钮
代码很简单,但要注意使用的括号类型以及对应嵌套关系!
Scaffold( topBar = { TopAppBar( title = { Text("主页") }, navigationIcon = { IconButton(onClick = { /*TODO*/ }) { Icon(Icons.Filled.Menu, null) } } ) }, ... ){}
紧接着在 topBar
属性后面写底部导航栏属性 bottomBar
items.forEachIndexed
按照索引渲染,vue 的 v-for
懂吧,就这个原理!
依次渲染 BottomNavigationItem
即可;
bottomBar = { BottomNavigation { items.forEachIndexed { index, item -> BottomNavigationItem( // selectedItem 是内置属性,表示当前选中的Item // onClick即切换当前激活的Item selected = selectedItem == index, onClick = { selectedItem = index }, // 这几个属性看看英文就懂了,不解释 icon = { Icon(painterResource(item.icon), null) }, alwaysShowLabel = false, label = { Text(item.name) } ) } } }
这是总体的代码:
@Composable fun mainBody() { var selectedItem by remember { mutableStateOf(0) } val items = listOf( Item("主页", R.drawable.home), Item("列表", R.drawable.list), Item("设置", R.drawable.setting) ) Scaffold( topBar = { TopAppBar( title = { Text("主页") }, navigationIcon = { IconButton(onClick = { /*TODO*/ }) { Icon(Icons.Filled.Menu, null) } } ) }, bottomBar = { BottomNavigation { items.forEachIndexed { index, item -> BottomNavigationItem( selected = selectedItem == index, onClick = { selectedItem = index }, icon = { Icon(painterResource(item.icon), null) }, alwaysShowLabel = false, label = { Text(item.name) } ) } } } ) { // 在scaffold里面塞一个box,糊弄一下 Box( modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center ) { Text(text = "主页界面") } } }
到此这篇关于JetpackCompose Scaffold组件使用教程的文章就介绍到这了,更多相关JetpackCompose Scaffold内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/delete_you/article/details/128046107
上一篇: Android画中画窗口开启方法
相关文章
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了C#窗体布局方式详解的相关资料,需要的朋友可以参考下...2020-06-25
- 今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景,本文主要介绍了Vue动态查询规则生成组件,需要的朋友们下面随着小编来一起学习学习吧...2021-05-27
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了vue中如何使用element的日历组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-30
- 这篇文章主要介绍了Vue 过渡(动画)transition组件案例详解,非常不错,具有参考借鉴价值,需要的朋友参考下...2017-01-26
- 这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下...2021-03-03
- 这篇文章主要为大家详细介绍了vue递归实现自定义tree组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-20
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
- 这篇文章主要介绍了Vue 组件复用多次自定义参数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27
- 这篇文章主要介绍了从零开始在vue-cli4配置自适应vw布局,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-09
- 这篇文章主要介绍了Vue父子组件传值的一些坑,帮助大家更好的理解和使用vue父子组件,感兴趣的朋友可以了解下...2020-09-16
- 这篇文章主要介绍了js中flexible.js实现淘宝弹性布局方案,需要的朋友可以参考下...2015-12-25
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下来通过本文给大家介绍BootStrap 附加导航组件的知识,感兴趣的朋友一起学习吧...2016-07-29
使用Angular CDK实现一个Service弹出Toast组件功能
本文主要写用cdk实现一个简单的Toast组件,使用的是cdk中的overlay模块,需要手动安装环境,具体安装方法及相关实现代码跟随小编一起看看吧...2021-07-28- 这篇文章主要为大家详细介绍了Bootstarp创建可折叠组件的对应方法,以实例为大家分享了Bootstrap折叠组件,感兴趣的小伙伴们可以参考一下...2016-02-26
- 这篇文章主要为大家详细介绍了C#控制台程序使用Log4net日志组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
解析element-ui中upload组件传递文件及其他参数的问题
这篇文章主要介绍了element-ui中upload组件如何传递文件及其他参数,分析一下我使用element-ui遇到的问题以及解决方法,需要的朋友可以参考下...2021-11-10- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
- 这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20