Jetpack:014-Jetpack中的小红点

2023-10-21 21:36
文章标签 小红点 jetpack 014

本文主要是介绍Jetpack:014-Jetpack中的小红点,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 1. 概念介绍
  • 2. 使用方法
    • 2.1 Badge
    • 2.2 BadgedBox
  • 3. 示例代码
  • 4. 内容总结

我们在上一章回中介绍了Jetpack库中底部栏相关的内容,本章回中主要介绍 小红点。闲话休提,让我们一起Talk Android Jetpack吧!

1. 概念介绍

我们在本章回中介绍的小红点是指位于导航栏图标右侧的小红点,它通常用来显示提示信息,常见的场景是微信底部导航栏中显示小红点,红点内还有数字,用来显示发来的消息数量。本章回中将介绍如何在底部导航栏中添加小红点。

2. 使用方法

小红点通过Badge可组合函数实现,不过还需要设置它与图标的位置,推荐的做法是使用BadgedBox可组合函数,该函数会自动调整小红点的位置,使用小红点位于图标的右上方。这两个可组合函数都提供了相关的参数来控制自己,接下来我们将分别介绍它们各自的参数。

2.1 Badge

  • containerColor参数:用来控制小红点的背景颜色,通常是红色;
  • contentColor参数:用来控制小红点中内容的颜色,通常是白色;
  • content参数:用来存放小红点中的内容,通常使用Text可组合函数;

除了上面介绍的这些参数外,该可组合函数还有一个modifier通用参数,该参数可以修改小红点的大小。

2.2 BadgedBox

  • badge参数:主要用来存放小红点,把Badge可组合函数赋值给它就可以;
  • content参数:主要用来存放小红点附属的图标,通常使用Icon可组合函数给它赋值;

此外,content参数是可组合函数类型,而且是最后一个参数,因此可以使用尾lambda的语法给它赋值。我们将在后面的小节中通过示例代码来演示具体的用法。该函数会自动调整小红点的位置,使小红点位于content参数对应图标的右上方。

3. 示例代码

//设置bar上的图标
icon = {//在bar的图标上创建小红点,不过不能调整小红点的位置BadgedBox(modifier = Modifier.align(Alignment.CenterVertically),badge = {//依据条件显示小红点:选中时才显示小红点if(selectedItem == index)Badge(//调整小红点的大小modifier = Modifier.size(16.dp),containerColor = Color.Red,contentColor = Color.White,content = {Text(text = "6")},)elsenull},) {Icon(imageVector = item.icon, contentDescription = null )}
},

上面的示例代码中演示了BadgeBadgedBox两个可组合函数的用法,同时把BadgedBox可组合函数赋值给了NavigationBarItem的icon参数,也就是代码中最开始的icon,而与这个icon真正对应的图标位于代码最后的Icon函数中,代码中的小红点就位于这个ionc的右上方。

此外,我们还在代码中做了判断处理,如果当前图标被选中了才显示小红点,否则不显示小红点,这属于业务逻辑,大家可以依据项目需求自行设定。下面是程序的运行效果图:
在这里插入图片描述

4. 内容总结

最后,我们对本章回的内容做一个总结:

  • 小红点通常附属在某个图标的右上方,主要用来显示提示性消息;
  • 小红点通过可组合函数Badge实现,不过需要手动调整它与图标的位置;
  • 可组合函数BadgedBox可以配合Badge实现小红点,而且会自动调整小红点的位置;

看官们,关于Jetpack中小红点相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

这篇关于Jetpack:014-Jetpack中的小红点的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/257118

相关文章

014.Python爬虫系列_解析练习

我 的 个 人 主 页:👉👉 失心疯的个人主页 👈👈 入 门 教 程 推 荐 :👉👉 Python零基础入门教程合集 👈👈 虚 拟 环 境 搭 建 :👉👉 Python项目虚拟环境(超详细讲解) 👈👈 PyQt5 系 列 教 程:👉👉 Python GUI(PyQt5)文章合集 👈👈 Oracle数据库教程:👉👉 Oracle数据库文章合集 👈👈 优

【安当产品应用案例100集】014-使用安当TDE实现达梦数据库实例文件的透明加密存储

随着数据安全重要性的不断提升,数据库文件的落盘加密已成为数据保护的一项基本要求。达梦数据库作为一款高性能的国产数据库管理系统,为用户提供了一种高效、安全的数据存储解决方案。本文将详细介绍如何利用安当KSP密钥管理平台及TDE透明加密组件来实现达梦数据库文件的透明加密,从而进一步提高数据的安全性。 一、安当产品简介 1. KSP密钥管理平台 KSP作为数据保护系统的核心模块,提供密钥全生命

Android JetPack ViewModel 源码解析

是什么? ViewModel 用来存储页面相关的数据,当页面销毁的时候,存储数据也会清楚。但是当页面发生旋转的时候,并不会清楚数据。 怎么用? UserViewModel userViewModel = new ViewModelProvider(this).get(UserViewModel.class); UserViewModel 是自己写的ViewModel,就可以

Android JetPack Lifecycle源码解析

是什么? JetPack Lifecycle是一个页面(Activity/Fragment)生命周期的组件,当你想监听生命周期,那么就可以使用这个组件。 怎么用? 第一种: getLifecycle().addObserver(new LifecycleObserver() {@OnLifecycleEvent(Lifecycle.Event.ON_CREATE)publi

Qt QPushButton 按钮右上角增加小红点

简述 在项目里有时候应用类按钮在模块上新时,需要增加小红点提示。 效果图: 实现 实现的方法有很多 ,下面介绍超简单的一种。 直接在按钮上贴一个 QLabel 即可。 #pragma once#include <QtWidgets/QWidget>#include "ui_pafeyDemo.h"#include <QLabel>class pafeyDemo : public

Jetpack架构组件_ViewModel组件_1.简介和示例

1.简介        ViewModel是我们MVVM中的VM层,ViewModel类似于MVP中的P层,它是我们View层和Model层之间的一个桥梁。 1.1 和MVP的P层的主要区别是: (1)ViewModel是与我们Android系统挂钩的,是官方的一个类,MV之间的一个桥梁。 (2)ViewModel还保持数据。 1.2 Android为什么要引入ViewModel?

安卓开发中的Jetpack Compose

本文内容总结自郭神的jetpack compose专栏 ,整理自学,未完持续... 一、了解Jetpack Compose         Compose是一个由Google Android团队官方推出的声明式UI框架,Compose也是属于AndroidX的一部分,它的本质就是用来编写界面以及处理与用户交互相关的逻辑的,来代替传统的View用xml来定义UI的方法。         传统

算法学习014 0-1背包问题 c++动态规划算法实现 中小学算法思维学习 信奥算法解析

目录 C++0-1背包 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、运行结果 五、考点分析 六、推荐资料 C++0-1背包 一、题目要求 1、编程实现 有 N 件物品和一个容量为 M的背包,每件物品有各自的价值且只能被选择一次,要求在有限的背包容量下,装入的物品总价值最大。 2、输入输出 输入描述:第一行输入两个整数,分别表示

jetpack compose的@Preview和自定义主题

1.@Preview @Preview可以在 Android Studio 的预览窗口中实时查看和调试 UI 组件。 基本使用 import androidx.compose.foundation.layout.fillMaxSizeimport androidx.compose.material.MaterialThemeimport androidx.compose.material

jetpack compose 在两个页面间切换

jetpack compose 在两个页面间切换: 创建两个Compose页面:定义两个简单的Composable函数,分别代表两个页面。 import androidx.compose.foundation.layout.Arrangementimport androidx.compose.foundation.layout.Columnimport androidx.compose.