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.mzph.cn/news/13722.shtml

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

相关文章

IDEA 使用 maven 搭建 spring mvc

1. 创建项目 1.1 创建成功之后配置 Spring MVC 1.2 勾选 Spring MVC 2.更改配置文件 2.1 更改web.xml配置 更改为 <servlet-mapping><servlet-name>dispatcher</servlet-name><url-pattern>/</url-pattern></servlet-mapping>2.2 dispat…

linux查看服务器系统版本命令

有时我们需要在linux服务器上安装DB、Middleware等&#xff0c;为了保证兼容性&#xff0c;我们需要知晓被提供的linux服务器版本是否满足需求&#xff0c;下面就说一说linux查看服务器系统版本命令。 1.cat /etc/redhat-release 适用于&#xff1a;rhel/centos等 2.cat /etc…

3ds max 烘培世界坐标到贴图/顶点色

设置Diffuse 为ObjectNormal Normalize(objectNormal) * 0.5 0.5 把Diffuse烘培到顶点色 烘培Diffuse到贴图 模型按UV展开 右键复制 &#xff0c; 到mesh上粘贴 烘培到贴图 UE使用 贴图导入为BC7 float3 n ObjectNormal*2-1; return float3(n.x,n.z,n.y); // x ,z ,y

工业平板电脑优化汽车工厂的生产流程

汽车行业一直是自动化机器人系统的早期应用领域之一。通过使用具有高负载能力和远程作用的大型机械臂&#xff0c;汽车装配工厂可以实现点焊、安装挡风玻璃、安装车轮等工作&#xff0c;而较小的机械手则用于焊接和安装子组件。使用机器人系统不仅提高了生产效率&#xff0c;还…

原生求生记:揭秘UniApp的原生能力限制

文章目录 1. 样式适配问题2. 性能问题3. 原生能力限制4. 插件兼容性问题5. 第三方组件库兼容性问题6. 全局变量污染7. 调试和定位问题8. 版本兼容性问题9. 前端生态限制10. 文档和支持附录&#xff1a;「简历必备」前后端实战项目&#xff08;推荐&#xff1a;⭐️⭐️⭐️⭐️…

【Vue3】递归组件

1. 递归组件mock数据 App.vue <template><div><Tree :data"data"></Tree></div> </template><script setup lang"ts"> import { reactive } from vue; import Tree from ./components/Tree.vue; interface Tr…

【网络编程】I/O复用

文章目录 一、select系统调用1.1、文件描述符就绪条件&#xff08;socket可读条件&#xff09;1.2、处理带外数据 二、poll系统调用三、epoll系列系统调用3.1、内核事件表3.2、epoll_wait函数3.3、LT和ET模式3.4、EPOLLONESHOT事件 四、select、poll、epoll三组I/O复用函数比较…

路由的配置

1、在router中设置路由导航跳转函数,在index.js文件中写这句话&#xff1a; 1.1 只要发生跳转, 就会调用这个函数&#xff1a; 1.2 导航的声明函数 2、访问系统访问控制系统如何形成 3、来一个导航守卫的案例&#xff1a;看看导航守卫的案例&#xff0c;写一个Main.Vue 和login…

超简单的fastapi链接websocket用例

main.py from typing import Listfrom fastapi import FastAPI, WebSocket, WebSocketDisconnectapp FastAPI()class ConnectionManager:def __init__(self):# 存放激活的ws连接对象self.active_connections: List[WebSocket] []async def connect(self, ws: WebSocket):# 等…

sky-notes-02

11、HttpClient HttpClient作用&#xff1a; 发送HTTP请求接收响应数据 HttpClient的maven坐标&#xff1a; <dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId><version>4.5.13</vers…

springmvc登录拦截器

Ioc和Aop是spring的两大重要思想&#xff0c;前者指的是控制反转&#xff08;Invers of control&#xff09;后者指的是面向切面编程&#xff08;Aspect oriented programing&#xff09;。aop的一大作用就是能将很多重复的功能点抽取出来&#xff0c;而用注解或者配置的方式统…

docker启动容器报错

报错信息 [rootDream soft]# docker run -it -d -p 8080:8080 tomcat eec9fab6b9ca06d2bbf1467aef05d8020ee60448978e10ac20c38888934f0a0b docker: Error response from daemon: driver failed programming external connectivity on endpoint hungry_euclid (163242f0079e72…

关于c++中虚函数和虚函数表的创建时机问题

以这段代码为例。 #include <iostream>using namespace std;class Parent { public:Parent(){}virtual void func1() {};virtual void func2() {}; };class Child :public Parent { public:Child():n(0),Parent(){cout << "Child()" << endl;}vir…

如何建立ftp server?快解析内网穿透实现外网直接访问

serveru是一款由Rob Beckers开发的获奖的ftp服务器软件&#xff0c;全称为&#xff1a;serv-u ftp server&#xff0c;它功能强大又易于使用。ftp服务器用户通过它用ftp协议能在internet上共享文件。serv-u不仅100%遵从通用ftp标准&#xff0c;也包括众多的独特功能可为每个用户…

Android getevent用法详解

TP驱动调试分享——基于Qualcomm SDM710平台Android9.0&#xff0c;TP 采用I2C方式和CPU进行通信_高通tp驱动_永恒小青青的博客-CSDN博客 手机触摸屏扫描信号实测波形_触摸屏报点率_AirCity123的博客-CSDN博客 如何查看TP报点率&#xff1f;触摸TP查看详细信息 adb shell ge…

音视频——视频流H264编码格式

1 H264介绍 我们了解了什么是宏快&#xff0c;宏快作为压缩视频的最小的一部分&#xff0c;需要被组织&#xff0c;然后在网络之间做相互传输。 H264更深层次 —》宏块 太浅了 ​ 如果单纯的用宏快来发送数据是杂乱无章的&#xff0c;就好像在没有集装箱 出现之前&#xff0c;…

【Rust教程 | 基础系列 | Rust初相识】Rust简介与环境配置

教程目录 前言一&#xff0c;Rust简介1&#xff0c;Rust的历史2&#xff0c;Rust的特性3&#xff0c;为什么选择Rust 二&#xff0c; Rust环境配置1&#xff0c;windows11安装2&#xff0c;Linux安装 三&#xff0c;安装IDE 前言 Rust是一种系统编程语言&#xff0c;专注于速度…

U盘安装CentOS7.9出错:进入 dracut问题和解决方法

U盘安装CentOS7.9出错&#xff1a;进入 dracut问题和解决方法 原因&#xff1a;U盘名称未识别&#xff0c; 解决&#xff1a;进入启动界面&#xff0c;按e进入编辑界面 修改&#xff1a; vmlinuz initrdinitrd.img inst.stage2hd:LABELCentOS\x207\x20x86_64.check quiet 为 …

eslint-webpack-plugin

说明&#xff1a;现在eslint已经弃用了eslint-loader,如果要安装来使用的话&#xff0c;会报错&#xff0c;烦死人 大概的报错信息如下&#xff1a; ERROR in ./src/index.js Module build failed (from ./node_modules/eslint-loader/dist/cjs.js): TypeError: Cannot read …

驱动开发 day4 (led灯组分块驱动)

//编译驱动(注意Makefile的编译到移植到开发板的内核) make archarm //清除编译生成文件 make clean //安装驱动 insmod mycdev.ko //卸载驱动 rmmod mycdev //编译fun.c 函数(用到交叉工具编译) arm-linux-gnueabihf-gcc fun.c head.h #ifndef __HEAD_H__ #define __HEAD_H__…