当前位置: 首页 > news >正文

flutter:角标

角标应该非常常见了,以小说app为例,通常会在小说封面的右上角上显示当前未读的章数。

badges

简介
Flutter的badges库是一个用于创建徽章组件的开源库。它提供了简单易用的API,使开发者可以轻松地在Flutter应用程序中添加徽章效果。

官方文档
https://pub-web.flutter-io.cn/packages/badges

安装

flutter pub add badges

示例1

Center(child: badges.Badge(badgeContent: const Text('3',style: TextStyle(fontSize: 20),),child: SizedBox(width: 200,height: 260,child: Image.asset('lib/assets/img/error.jpg',fit: BoxFit.fill,),),));

在这里插入图片描述
示例2

Center(child: badges.Badge(position: badges.BadgePosition.topStart(), // 角标的位置badgeContent: const Text('3',style: TextStyle(fontSize: 20,color: Colors.white),), // 内容onTap: () {print("点击事件");},//    样式badgeStyle: badges.BadgeStyle(shape: badges.BadgeShape.square, // 形状badgeColor: Colors.blue,padding: const EdgeInsets.symmetric(horizontal: 15,vertical: 5),borderRadius: BorderRadius.circular(10)),child: SizedBox(width: 200,height: 260,child: Image.asset('lib/assets/img/error.jpg',fit: BoxFit.fill,),),));

示例3

 shape: badges.BadgeShape.twitter ,

在这里插入图片描述
示例4

shape: badges.BadgeShape.instagram , // 形状

在这里插入图片描述

rotated_corner_decoration

简介
Flutter中的rotated_corner_decoration是一个用于创建旋转圆角装饰的类。它是Flutter框架中的一个内置装饰器,可以应用于各种小部件,如容器、按钮、卡片等。

官方文档
https://pub-web.flutter-io.cn/packages/rotated_corner_decoration

安装

flutter pub add rotated_corner_decoration

示例1

Container(width: 200,height: 200,foregroundDecoration: const RotatedCornerDecoration.withColor(color: Colors.red,badgeSize: Size(30,30)),decoration: BoxDecoration(border: Border.all(color: Colors.black,width: 1)),)

在这里插入图片描述
示例2

Container(width: 200,height: 200,foregroundDecoration: const RotatedCornerDecoration.withColor(color: Colors.red,badgeSize: Size(60, 60), // 大小badgePosition: BadgePosition.topStart, //位置spanBaselineShift: 4, // 文字距离斜边的距离textSpan:TextSpan(text: 'flutter', style: TextStyle(color: Colors.white))),decoration:BoxDecoration(border: Border.all(color: Colors.black, width: 1)),)

在这里插入图片描述
示例3

Container(width: 200,height: 200,foregroundDecoration: const RotatedCornerDecoration.withColor(color: Colors.red,badgeSize: Size(80, 80), // 大小badgePosition: BadgePosition.topStart, //位置spanBaselineShift: 4, // 文字距离斜边的距离textSpan:TextSpan(text: 'hello\nflutter', style: TextStyle(color: Colors.white))),decoration:BoxDecoration(border: Border.all(color: Colors.black, width: 1)),)

在这里插入图片描述

http://www.lryc.cn/news/97740.html

相关文章:

  • 基于JAVA SpringBoot和Vue高考志愿填报辅助系统
  • [php-cos]ThinkPHP项目集成腾讯云储存对象COS
  • DuckDB全面挑战SQLite
  • Elasticsearch查询裁剪
  • Hadoop——Hive运行环境搭建
  • (vue)vue项目中引入外部字体
  • ChatGPT在语义理解和信息提取中的应用如何?
  • Mysql-主从复制与读写分离
  • 算法练习(3):牛客在线编程04 堆/栈/队列
  • mac下安装vue cli脚手架并搭建一个简易项目
  • 尝试-InsCode Stable Diffusion 美图活动一期
  • 【OpenGL学习】之着色器GLSL基础
  • Python爬虫基础知识点有哪些
  • 【CSS】 vh、rem 和 px 的区别
  • 如何设置板子从emmc启动-针对imx6ull
  • 使用Newtonsoft直接读取Json格式文本(Linq to Json)
  • 服务器用友数据库中了locked勒索病毒后怎么解锁数据恢复
  • Linux-MariaDB数据库的备份与初始化
  • springboot-redis使用fastjson2
  • SOC FPGA之HPS模型设计(二)
  • Go基础—反射,性能和灵活性的双刃剑
  • MATLAB与ROS联合仿真(慕羽☆)全套开源资料索引
  • 三、深入浅出WPF之控件与布局
  • 社群积分运营策略:增加用户忠诚度
  • 推荐用于学习RN原生模块开发的开源库—react-native-ble-manager
  • MySQL中锁的简介——全局锁
  • RocketMQ集群4.9.2升级4.9.6版本
  • 具身智能controller---RT-1(Robotics Transformer)(上---方法介绍)
  • 视频内存过大如何压缩变小?这个压缩方法了解一下
  • 【Ansible】自动化部署工具-----Ansible