如何实现小红点

news2024/10/8 23:46:50

文章目录

  • 1. 概念介绍
  • 2. 实现方法
  • 3 示例代码

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

在这里插入图片描述

1. 概念介绍

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

2. 实现方法

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

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

3 示例代码


                

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

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

相关文章

Android阶段学习思维导图

前言 记录下自己做的一个对Android原生应用层的思维导图,方便个人记忆扩展;这里只露出二级标题。 后语 虽然有些内容只是初步了解,但还是记录了下来;算是对过去一段学习的告别。

全体起立!CEEMDAN-Kmeans-VMD-CNN-Attention双重分解+卷积神经网络注意力机制多元时间序列预测

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现CEEMDAN-Kmeans-VMD-CNN-Attentionr融合K均值聚类的数据双重分解卷积神经网络注意力机制多元时间序列预测(完整源码和数据) 2.CEEMDAN分解,计算样本熵,根据…

Arduino UNO R3自学笔记23 之 Arduino如何使用4511控制数码管?

注意:学习和写作过程中,部分资料搜集于互联网,如有侵权请联系删除。 前言:因为7段数码管控制需要用到7个IO,这会严重占用Arduino的IO口,因此我们采用现有IC来节省Arduino的IO口。 1.CD4511介绍 CD4511是一款用于驱动共阴极LED(数码管)显示器的BCD码-七段码译码器。它…

机器学习-支撑向量机SVM

Support Vector Machine 离分类样本尽可能远 Soft Margin SVM scikit-learn中的SVM 和kNN一样,要做数据标准化处理! 涉及距离! 加载数据集 import numpy as np import matplotlib.pyplot as plt from sklearn import datasetsiris datas…

CentOS7 虚拟机操作系统安装及相关配置教程

1、安装虚拟机 在VMware《主页》界面中点击《创建新的虚拟机》按钮: 选择你准备好的ISO文件,点击下一步: 然后填写虚拟机的名称以及虚拟机将来保存的位置: 再次下一步,填写虚拟机磁盘大小: 继续下一步&…

ES postman操作全量修改,局部修改,删除

全量修改 修改需要调用的url 地址是http://192.168.1.108:9200/shopping/_doc/1001,调用方法使用put 只修改指定的需求的内容的请求方式 post方式就是局部修改 http://192.168.1.108:9200/shopping/_update/1001,请求方式post 上图是只修改id 为1001数…

sqli-labs less-18 http头user-agent注入

HTTP头注入 常见的HTTP注入点产生位置为【Referer】、【X-Forwarded-For】、【Cookie】、【X-Real-IP】、【Accept-Language】、【Authorization】 HTTP Referer是header头的一部分,从哪个网页了链接过来的 X-Forwarded-For 简称XXF头,代表客户端&#…

【计算机网络】Tcp/IP五层协议,Udp报文组成,Udp与Tcp的区别

Tcp/IP五层协议 TCP/IP模型是计算机网络的核心协议之一,通常被分为五层,每一层都有其独特的功能和作用。以下是TCP/IP模型的五层协议的简要描述: 物理层:这一层涉及实际的物理连接,定义了硬件传输介质的特性&#xff…

网络安全现在的前景是如何的?_网络安全技术研究生可否从事大数据工作

从当前的人才培养体系来看,网络安全人才的培养既有本科教育和专科教育,同时也有研究生教育,所以要想成为网络安全人才,途径还是比较多的,可以根据自身的实际情况来选择不同的教育方式。对于当前的职场人来说&#xff0…

C++ STL容器(五) —— priority_queue 底层剖析

这篇来讲下 priority_queue,其属于 STL 的容器适配器,容器适配器是在已有容器的基础上修改活泼限制某些数据接口以适应更特定的需求,比如 stack 栈使数据满足后进先出,queue 队列使数据满足先进先出,其都是在已有容器上…

【重学 MySQL】六十一、数据完整性与约束的分类

【重学 MySQL】六十一、数据完整性与约束的分类 数据完整性什么是约束约束的分类如何查看、添加和删除约束查看约束添加约束删除约束 在MySQL中,数据完整性是确保数据库中数据的准确性和一致性的关键。为了实现数据完整性,MySQL提供了多种约束类型&#…

【Qt】窗口预览(1)—— 菜单栏

窗口预览(1) 1. QMainWindow2. QMenuBar——菜单栏2.1 创建菜单栏/将菜单栏添加到widget中2.2 addMenu——在菜单栏中添加菜单2.3 在菜单中添加选项2.4 添加快捷键2.5 支持嵌套添加菜单2.6 添加信号2.7 添加分割线 1. QMainWindow Qt窗口是通过QMainWin…

插件-发送邮件通知

有时候通过python运行程序,在出现异常时,需要进行邮件通知,可能还需要截图。比如对浏览器进行控制时出现了异常,则需要进行截图分析。 email-validator 2.0.0.post2 import asyncio import logging import smtpli…

C++基础面试题 | C++中野指针和悬挂指针的区别?

文章目录 回答重点:1. 野指针(Wild Pointer):2. 悬挂指针(Dangling Pointer): 拓展知识:如何避免这些问题野指针和悬挂指针 回答重点: 在C中,野指针是指未初…

职场上的人情世故,你知多少?这五点一定要了解

职场是一个由人组成的复杂社交网络,人情世故在其中起着至关重要的作用。良好的人际关系可以帮助我们更好地融入团队,提升工作效率,甚至影响职业发展。在职场中,我们需要了解一些关键要素,以更好地处理人际关系&#xf…

计算机网络:物理层 —— 信道复用技术

文章目录 信道信道复用技术信道复用技术的作用基本原理常用的信道复用技术频分复用 FDM时分复用 TDM波分复用 WDM码分复用 CDM码片向量基本原理 信道 信道是指信息传输的通道或介质。在通信中,信道扮演着传输信息的媒介的角色,将发送方发送的信号传递给…

输入三位数的整数,求最大的一位数字 python

题目: 输入三位数整数,求最大的一位数字 代码: aint(input("请输入三位正整数:")) xa%10 #个 ya//10%10 #十 za//100%10 #百 print("最大的一位数为", max(x,y,z))运行结果:

20.Nginx动静分离原理与案例实现

一.Nginx动静分离原理与案例实现 1.动静分离原理图 2.动静分离的问题 3. Nginx动静分离案例实践 3.1 nginx部署架构图 3.2 nginx部署案例实现 (1)配置tomcats.conf文件 api.z.mukewang.com反向代理tomcat api upstream tomcats {server

AI编程工具的机遇与风险

作者 吴国平 北京市隆安律师事务所 超过1万个程序员,77,000个项目使用了Copilot,55%的程序员选择Copilot。 程序员使用人工智能来协助编写代码时,最终作品的所有权就变成了一个灰色地带。传统的软件著作权法是在程序员是代码创作…