JetPack Compose安卓开发之底部导航Tabbar

效果,页面切换
在这里插入图片描述

项目结构
在这里插入图片描述
TabBar.kt

package com.weimin.strollerapp.components.tabbarimport androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp@Composable
fun TabBar(destinations: List<Navigation>,currentDestination: String,onNavigateTo: (Int) -> Unit,modifier: Modifier = Modifier
): Unit {Row(// 底部导航栏宽度充满屏幕,并远适配离安全区底部modifier = Modifier.fillMaxWidth().navigationBarsPadding()) {destinations.forEachIndexed { index, destination ->val selected = destination.route == currentDestinationval color = if (selected)MaterialTheme.colorScheme.primaryelseMaterialTheme.colorScheme.onSurfaceColumn(//  水平居中horizontalAlignment = Alignment.CenterHorizontally,modifier = Modifier.weight(1f).clickable() { onNavigateTo(index) }) {Image(painter = painterResource(id = if (selected)destination.selectedIconelsedestination.unSelectedIcon),contentDescription = stringResource(id = destination.titleTextId),modifier = Modifier.size(25.dp))Spacer(modifier = Modifier.width(5.dp))Text(text = stringResource(id = destination.titleTextId), color = color)}}}
}

Navigation.kt 枚举

package com.weimin.strollerapp.components.tabbar
import com.weimin.strollerapp.Renum class Navigation(val selectedIcon: Int,val unSelectedIcon: Int,val titleTextId: Int,val route: String,
) {HomePage(selectedIcon = R.drawable.home1,unSelectedIcon = R.drawable.home,titleTextId = R.string.tabbar_home,route = "Home_Page"),MinePage(selectedIcon = R.drawable.home1,unSelectedIcon = R.drawable.home,titleTextId = R.string.tabbar_mine,route = "Mine_Page")
}

MainRoute.kt 主路由

package com.weimin.strollerapp.components.routeimport androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.navigation.NavController
import com.weimin.strollerapp.components.tabbar.Navigation
import com.weimin.strollerapp.components.tabbar.TabBar
import com.weimin.strollerapp.view.home.HomePage
import com.weimin.strollerapp.view.mine.MinePage
import kotlinx.coroutines.launch@Composable
fun MainRoute(finishPage: () -> Unit = {}) {MainScreen()
}//配置导航
@Composable
fun MainScreen(finishPage: () -> Unit = {}
) {//x当前选中的界面名称var currentDestination by rememberSaveable {mutableStateOf("Home_Page")}// 显示页面,控制页面val pagerState = rememberPagerState {4}val scope = rememberCoroutineScope()Column(modifier = Modifier.fillMaxSize()) {HorizontalPager(state = pagerState,userScrollEnabled = true,
//            beyondBoundsPageCount = 4, //加载屏幕外的更多页面modifier = Modifier.fillMaxWidth().weight(1f)  // 占满剩余空间(高度)) { page ->when (page) {0 -> HomePage()1 -> MinePage()}}TabBar(destinations = Navigation.entries,currentDestination = currentDestination,onNavigateTo = { index ->currentDestination = Navigation.values()[index].route// 启动协程scope.launch {//   挂起函数pagerState.animateScrollToPage(index)}},modifier = Modifier)}
}

MainActivity.kt 主页面应用

package com.weimin.strollerappimport android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.compose.rememberNavController
import com.weimin.strollerapp.components.route.MainRoute
import com.weimin.strollerapp.ui.theme.StrollerAppThemeclass MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {val navController = rememberNavController()StrollerAppTheme {// A surface container using the 'background' color from the themeSurface(modifier = Modifier.fillMaxSize(),color = MaterialTheme.colorScheme.background) {Greeting(
//                        navController= navController)}}}}
}@OptIn(ExperimentalFoundationApi::class)
@Composable
fun Greeting() {MainRoute()
}@Preview(showBackground = true)
@Composable
fun GreetingPreview() {StrollerAppTheme {Greeting()}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/884627.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot应用:精品在线试题库的设计与实现

2 相关技术 2.1 Spring Boot框架简介 Spring Boot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。通过这种方式&#xff0c;Sprin…

HTTP的初步了解

目录 前言 一、HTTP协议的基本概念 1.1、请求格式 1.2、响应格式 二、HTTP链接问题 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; HTTP协议是超文本传输协议 HTTP的短连接&#xff1a;建立连接——数据传输——关闭连接 HTTP的长连接&#xff1a;…

乐鑫esp32和esp32s3使用flash download tool V3.9.7工具下载固件的使用说明

使用esp32IDF工具编程后使用vscode内置的烧录工具&#xff08;火的图标按钮&#xff09;烧录是正常的&#xff0c;说明程序没有问题。 如果要使用flash download tool V3.9.7工具下载固件还是有些要注意的事项&#xff1a; 1.三个bin文件分别在&#xff1a; 第一个&#xff1a;…

python openai 关于会话管理问题(一)

目录 一、会话长度 二、会话保持 三、上下文窗口管理 1、对话中token使用 2、截断策略 3、消息注释 一、会话长度 线程和消息表示助手和用户之间的会话会话。每个线程的消息限制为100,000条。一旦消息的大小超过了模型的上下文窗口,线程将尝试聪明地截断消息,然后再完…

如何在Linux系统中使用Apache HTTP Server

如何在Linux系统中使用Apache HTTP Server Apache简介 安装Apache 在Debian/Ubuntu系统中安装 在CentOS/RHEL系统中安装 启动Apache服务 验证Apache是否正在运行 访问Apache默认页面 配置Apache虚拟主机 创建虚拟主机配置文件 示例虚拟主机配置 创建网站根目录 准备静态网站内…

HTTP相关返回值异常原因分析,第二部分

今天我们讲讲HTTP相关返回值异常如何解决&#xff08;实例持续更新中&#xff09; 一、4xx状态码 这些状态码表示请求有问题&#xff0c;通常是由于客户端的错误引起的。 1.1 400 Bad Request: 请求格式不正确&#xff0c;服务器无法理解。 状态码400的含义&#xff1a; …

8、Node.js Express框架

五、Express框架 5.1概念 Express框架是一个基于Node.js平台的极简、灵活的WEB开发框架:www.express.com.cn 简单来说,Express是一个封装好的工具包,封装了很多功能,便于我们开发WEB应用 5.2安装 npm i express5.3 Express初体验 //01-express初体验.js //1.导入exrp…

学习笔记——三小时玩转JQuery

也可以使用在线版&#xff0c;不过在线版需要有网络&#xff0c;网不好的情况下加载也不好 取值的时候也是只会取到有样式的纯文本&#xff0c;不会取到标签&#xff0c;会取到标签效果 prepend和append这两个方法用的比较多&#xff0c;before和affter用的比较少 想要把代码写…

C#实现简单的内存缓存

在开发过程中&#xff0c;我们经常需要使用缓存来提高应用程序的性能。本文将介绍如何使用C#实现一个简单的内存缓存系统&#xff0c;它模仿了Redis的部分基本功能 功能&#xff1a; 基本的键值存储支持过期时间支持泛型类型Hash 类型操作线程安全清理过期项 优点&#xff1…

Rust 力扣 - 54. 螺旋矩阵

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们只需要一圈一圈的从外向内遍历矩阵&#xff0c;每一圈遍历顺序为上边、右边、下边、左边 我们需要注意的是如果上边与下边重合或者是右边与左边重合&#xff0c;我们只需要遍历上边、右边即可 题解代码 i…

企业项目开发的流程

一.立项阶段 1.市场调研 了解市场需求和竞争对手情况。全面的市场调研分析报告。 用户调研&#xff1a;产品组针对目标用户进行定量和定性的调查&#xff0c;了解其需求和行为习惯&#xff0c;为产品的功能和设计方向提供依据。 举例&#xff1a;终端管家.用户分为商户和渠…

简化应用程序日志记录

什么是应用程序日志 应用程序日志是存储有关应用程序中发生的事件的信息的文件。应用程序日志包含以下信息&#xff1a; 用户活动&#xff0c;例如登录、注销、页面查看和搜索查询。应用程序错误&#xff0c;例如异常和崩溃。安全事件&#xff0c;例如登录尝试失败和可疑流量…

JVM问题排查分析

\1. 查询业务日志&#xff0c;可以发现这类问题&#xff1a;请求压力大、波峰、遭遇降级、熔断等等&#xff0c;基础服务、外部 API 依赖。 \2. 查看系统资源和监控信息&#xff1a; 硬件信息、操作系统平台、系统架构排查 CPU 负载内存不足磁盘使用量、硬件故障、磁盘分区用…

VR 创业之路:从《I Expect You To Die》到未来展望

今年是 Reality Labs 成立 10 周年&#xff0c;Meta 每周都会与不同的 XR 先驱进行交流&#xff0c;探讨他们在行业中的经历、经验教训以及对未来的展望。本次&#xff0c;他们与游戏设计师、作家兼 Schell Games CEO Jesse Schell 进行了深入交谈&#xff0c;了解了他的个人故…

【098】基于SpringBoot+Vue实现的垃圾分类系统

系统介绍 视频演示 基于SpringBootVue实现的垃圾分类系统 基于SpringBootVue实现的垃圾分类系统设计了三种角色、分别是管理员、垃圾分类管理员、用户&#xff0c;实现了个人中心、用户管理、垃圾分类管理员管理、垃圾分类管理、垃圾类型管理、垃圾图谱管理、系统管理等功能 …

C++和OpenGL实现3D游戏编程【连载17】——着色器进阶

欢迎来到zhooyu的专栏。 主页网址&#xff1a;【zhooyu】 专栏网址&#xff1a;【C和OpenGL实现3D游戏编程】 &#x1f31f;&#x1f31f;&#x1f31f;这里将通过一个OpenGL实现3D游戏编程实例教程&#xff0c;带大家深入学习OpenGL知识。知识无穷而人力有穷&#xff0c;希望…

前端技术月刊-2024.11

本月技术月刊聚焦于前端技术的最新发展和业务实践。业界资讯部分&#xff0c;React Native 0.76 版本发布&#xff0c;带来全新架构&#xff1b;Deno 2.0 和 Node.js 23 版本更新&#xff0c;推动 JavaScript 生态进步&#xff1b;Flutter 团队规模缩减&#xff0c;引发社区关注…

定制化视频生成新模范!零样本主体驱动,精确运动控制!复旦阿里等发布DreamVideo-2

文章链接&#xff1a;https://arxiv.org/pdf/2410.13830 项目链接&#xff1a;https://dreamvideo2.github.io/ 亮点直击 DreamVideo-2&#xff0c;首个无需微调&#xff0c;同时支持主体定制和运动控制的零样本视频定制框架&#xff0c;能够通过设计的参考注意力学习主体外观&…

mysql--多表查询

一、联合查询 作用&#xff1a;合并结果集就是把两个select语句的查询结果合并到一起&#xff01; 合并结果集有两种方式&#xff1a; UNION&#xff1a;合并并去除重复记录&#xff0c;例如&#xff1a;SELECT * FROM t1 UNION SELECT * FROM t2&#xff1b; UNION ALL&a…

VNS算法求解TSP问题

可变邻域搜索&#xff08;Variable Neighborhood Search, VNS&#xff09;是一种常用于求解组合优化问题的元启发式算法。VNS的核心思想是通过系统地改变搜索空间的邻域来跳出局部最优&#xff0c;从而达到全局最优解。对于旅行商问题&#xff08;TSP&#xff09;&#xff0c;V…