如何实现小红点

于 2024-10-08 22:15:00 发布
阅读量201 收藏 3
点赞数 4
分类专栏： 一起Talk Flutter吧 文章标签： 移动开发Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/talk_8/article/details/142763913
版权

文章目录


我们在上一章回中介绍了WebView组件相关的内容，本章回中将介绍如何在图标旁边添加小红点.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

在实际项目中有时候需要在图标旁边显示小红点，而且小红点内还有数字，比如购物车图标显示小红点表示有商品添加到购物车中，小红点内的数字就是购物车中商品的数
量。本章回中将介绍如何在图标旁边添加小红点。

2. 实现方法

在Android或者IOS原生开发中，如果想实现图标旁边的小红点就需要自定义View。在Flutter中就不需要这么做了，因为官方已经给我们封装了相应的组件:Badge.
我们直接拿来使用就可以在图标旁边添加小红点。和其它的组件一样，Badge组件提供了相关的属性来控制自己，下面是常用的属性：

  • label属性:用来控制红点中显示的内容；
  • backgroundColor属性:用来控制红点的颜色,默认是红色;
  • textColor属性:用来控制红点中文字的颜色,默认是白色;
  • alignment属性:用来控制红点的位置，默认传值是topRight；
  • child属性:用来控制红点的宿主，就是说在哪个组件旁边显示红点；
    只通过文字介绍这些属性比较抽象，在后面的小节中，我们将通过具体的代码来演示Badge组件的使用方法。

3 示例代码


                

                
                
        

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  talk_8
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
Android控件全解手册 - TabLayout实践和ViewPager联动以及实现小红点和自定义样式

				
			

			

				

					空名先生
				

				

					10-09
					
					4498
					
				

			

		

		

			
				
专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）---TabLayout实践和ViewPager联动以及实现小红点和自定义样式

			
		

	



                

              
                



	

		

			

				
					
ConstraintLayout布局实现小红点的做法

				
			

			

				

					小笨
				

				

					09-19
					
					287
					
				

			

		

		

			
				
巧用ConstraintLayout添加小红点

			
		

	



                


  
              

                


	

		

			

				
					
Android开发技巧——使用Drawable实现小红点

				
			

			

				

					一个码农的博客
				

				

					01-05
					
					9354
					
				

			

		

		

			
				
在产品的设计中，总难免需要我们开发去实现各种各样的小红点，小红点，小红点。 
 
 
通常，我们可能会这样做： 
 
用一个View实现小红点，放在相对布局里，设置好内边距或外边距，让它位于图片的右上角。 
或者是给图片套一个相对布局，设置好图片的外边距，然后把表示小红点的View放在这个相对布局里面的右上角。这个应该是最简洁直观的实现方法。然而，它也有它的局限之处。比如在我这次的开发当中，一开始只

			
		

	





	

		

			

				
					
css实现必填小红点

				
			

			

				

					weiqiang915的博客
				

				

					12-16
					
					1643
					
				

			

		

		

			
				
css实现必填小红点


        /**必填红点 */
        .required:after {
            content: '*';
            color: red;
            position: absolute;
            margin-left: 4px;
            font-weight: bold;
            line-height: 1.8em;
            top: 6px;
 

			
		

	



		

			
		



	

		

			

				
					
消息提醒小红点的实现

				
			

			

				

					Honiler的博客
				

				

					10-31
					
					4276
					
				

			

		

		

			
				
本人分享一下，自己写的一个消息提醒小红点控件，支持圆、矩形、椭圆、圆角矩形、正方形五种图形样式，可带文字，支持链式操作。
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import andro

			
		

	





	

		

			

				
					
服务器小红点原理,游戏内小红点的实现方案

				
			

			

				

					weixin_34231032的博客
				

				

					08-01
					
					698
					
				

			

		

		

			
				
游戏内小红点算是一个极其常用的功能了，之前在德州里面也有过实现。然而之前的实现实在是乱七八糟，所以这次也是将其做了彻底的重写，并把方案跟大家分享一下。我们将游戏内小红点可以分为三类：服务器小红点-服务器自动清除比如，我们常见的每日任务，成长任务，活动等。以每日任务举例：当有任务奖励可以领取时，在每日任务按钮上就显示小红点。当任务奖励全部领取完毕后，小红点消失。服务器小红点-客户端告知服务器清除比如...

			
		

	





	

		

			

				
					
Android应用图标上的小红点Badge实现

					
热门推荐

				
			

			

				

					Widsom的博客
				

				

					12-28
					
					2万+
					
				

			

		

		

			
				
Android应用图标上的小红点Badge实现为了增加APP的日活，在Android中有许多的应用仿苹果的在应用图标上显示小红点。当然有着一些手机ROM对小红点的支持，比如小米，三星等。我们下面看下如何实现：MainActivity:public class MainActivity extends AppCompatActivity {
    private Handler handler =

			
		

	





	

		

			

				
					
android 自定义小红点,Android自定义控件 | 小红点的三种实现（下）

				
			

			

				

					weixin_42512798的博客
				

				

					05-25
					
					650
					
				

			

		

		

			
				
此文标题想了好久久久，本起名为《读原码长知识 | 小红点的一种实现》，但纠结了下，觉得还是应该隶属于自定义控件系列~~上篇介绍了两种实现小红点的方案，分别是多控件叠加和单控件绘制，其中第二个方案有一个缺点：类型绑定。导致它无法被不同类型控件所复用。这篇从父控件的角度出发，提出一个新的方案：容器控件绘制，以突破类型绑定。本文使用 Kotlin 编写，相关系列教程可以点击这里引子假设这样一个场景：一个...

			
		

	





	

		

			

				
					
Android imageView 实现小红点（动画呼吸效果）

				
			

			

				

					zkk1973的博客
				

				

					11-27
					
					1655
					
				

			

		

		

			
				
展示页面：
<ImageView
    android:id="@+id/img_redpoint"
    android:layout_width="17dp"
    android:layout_height="17dp"
    android:layout_gravity="right"
    android:layout_marginTop="-1dp"
    andr...

			
		

	





	

		

			

				
					
Android应用图标上的小红点Badge实践代码

				
			

			

				

					08-29
				

			

		

		

			
				
 BadgeUtil 类是实现小红点 Badge 的关键，该类提供了多种设置小红点的方法，包括设置小红点的数字、颜色和样式等。下面是 BadgeUtil 类的代码实现：  ```java public class BadgeUtil {  private BadgeUtil() ...

			
		

	





	

		

			

				
					
html怎么利用定位实现小红点数字提示

				
			

			

				

					06-02
				

			

		

		

			
				
可以利用CSS中的position属性和伪元素来实现小红点数字提示。具体实现方法如下：  1. 首先需要在HTML中添加一个需要添加提示的元素，例如一个按钮或者链接。  2. 在CSS中给该元素添加position:relative属性，使其...

			
		

	





	

		

			

				
					
jdk-1.8(8u211-windows-x64)

				
			

			

				

					10-07
				

			

		

		

			
				
jdk-8u211-windows-x64

			
		

	





	

		

			

				
					
光储并网直流微电网simulink仿真模型，光伏采用mppt实现最大功率输出 
储能由蓄电池和超级电容构成的混合储能系统 
为了

				
			

			

				

					10-07
				

			

		

		

			
				
光储并网直流微电网simulink仿真模型，光伏采用mppt实现最大功率输出。
储能由蓄电池和超级电容构成的混合储能系统。
为了确保微网并网时电能质量，采用二阶低通滤波法对光伏输出功率进行抑制，


			
		

	





	

		

			

				
					
失物招领信息交互平台 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS）.zip

					
最新发布

				
			

			

				

					10-07
				

			

		

		

			
				
失物招领信息交互平台 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS）
启动教程：https://www.bilibili.com/video/BV1GK1iYyE2B

			
		

	





	

		

			

				
					
GTT2602-VB一种N-Channel沟道SOT23-6封装MOS管

				
			

			

				

					10-07
				

			

		

		

			
				
30V;6A;RDS(ON)=30mΩ@VGS=10V;VGS=20V;Vth=1.2V

			
		

	





	

		

			

				
					
基于51单片机的水箱液位远程监测系统源代码+原理图+流程图+程序说明

				
			

			

				

					10-07
				

			

		

		

			
				
1、使用单片机串口与模块通信；接法如下
	STC单片机   GPRS模块
	P3.0(RXD)->TXD
	P3.1(TXD)->RXD
	GND	  ->GND	
	晶振选用11.05926MHz 
2、更改服务器地址，包括IP和端口号，要与实际服务器地址对应上。
3、测试此功能时，确保您的服务器是可用的。


			
		

	





	

		

			

				
					
GJ9563-VB一种P-Channel沟道TO252封装MOS管

				
			

			

				

					10-07
				

			

		

		

			
				
-40V;-65A;RDS(ON)=10mΩ@VGS=10V;VGS=20V;Vth=-1.6V

			
		

	





	

		

			

				
					
DBO-BILSTM回归预测

				
			

			

				

					10-07
				

			

		

		

			
				
用于深度学习项目，里面包含程序运行的所有代码，数据集可以关注我私我获取，这个很容易写毕业设计，只需把数据集换成自己想要预测的就可以了。

			
		

	





	

		

			

				
					
html怎么实现小红点数字提示

				
			

			

				

					06-02
				

			

		

		

			
				
小红点数字提示通常可以使用CSS中的伪元素 ::before 或 ::after 来实现。具体实现方法如下：

1. 在HTML中添加需要添加小红点数字提示的元素，例如一个按钮或链接。

2. 在CSS中设置该元素的 position 属性为 relative，同时设置其子元素（即小红点）的 position 属性为 absolute。

3. 在CSS中使用伪元素 ::before 或 ::after 来创建小红点。

4. 设置小红点的样式，包括颜色、大小、字体等。

5. 使用 JavaScript 计算需要显示的数字，并将其赋值给小红点元素的内容（即使用 content 属性）。

以下是一个示例代码：

HTML:

```
<button class="notification">Notifications</button>
```

CSS:

```
.notification {
  position: relative;
}

.notification::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
  color: white;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}

.notification::before {
  content: attr(data-count);
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: white;
  color: red;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  line-height: 16px;
}
```

JavaScript:

```
var count = 5;
document.querySelector(".notification").setAttribute("data-count", count);
```

以上代码会在按钮的右上角添加一个小红点，显示数字 5。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
talk_8

			
真诚赞赏，手有余香

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值