Fluttter的ClipRRect控件

news/2024/11/30 20:31:45/

ClipRRect简介

ClipRRect(Rounded Rectangle Clip)是Flutter中的一个控件,用于将其子控件剪裁为圆角矩形形状。

使用场景

ClipRRect通常在需要给子控件添加圆角效果时使用。它可以用于创建圆角图片、圆角容器等各种UI元素。

主要属性

borderRadius(BorderRadius):用于定义圆角的弧度。可以通过BorderRadius.all设置统一的圆角半径,或使用BorderRadius.only设置不同角的半径。

如何使用

以下是一个使用ClipRRect的示例代码:

ClipRRect(borderRadius: BorderRadius.circular(10.0), // 设置圆角半径为10child: Container(width: 200,height: 200,color: Colors.blue,child: Center(child: Text('ClipRRect Example',style: TextStyle(color: Colors.white,fontSize: 18.0,),),),),
)

在这个示例中,我们创建了一个具有圆角的矩形容器。通过设置borderRadius属性为BorderRadius.circular(10.0),我们将四个角的半径设置为10。容器内部包含一个文本居中显示。
效果如图:
在这里插入图片描述

通过使用ClipRRect,容器的边角将被剪裁为圆角,创建了一个具有圆角效果的UI元素。

请注意,ClipRRect也可以用于剪裁子控件为其他形状,如椭圆形。你可以通过不同的borderRadius值来实现所需的效果。

制作圆形头像的例子

源码如下:

child: ClipRRect(child:  Image(image: AssetImage('images/edge.png'),fit: BoxFit.cover,width: 100,height: 100,),borderRadius: BorderRadius.circular(50),
),

例子的效果如下:
在这里插入图片描述


http://www.ppmy.cn/news/706226.html

相关文章

gcc/g++/clang/cl编译器

编译器一般构成 传统的编译器通常分为三个部分,前端(frontEnd),优化器(Optimizer)和后端(backEnd)。在编译过程中,前端主要负责词法和语法分析,将源代码转化为抽象语法树;优化器则是在前端的基础上,对得到…

FM25CL64程序(C51版)

FM25CL64芯片手册:https://wenku.baidu.com/view/dabf5e71168884868762d6aa.html #ifndef FW25CL64_H #define FW25CL64_H#include "reg51.h" #include "intrins.h"#define WREN 0X06 //写使能操作码 #define WRDI 0X04 //写禁止…

移动机器人的运动学模型:差速传动移动机器人

差速传动移动机器人运动学模型 问题 如何根据差速传动机器人左右两边轮子的速度,计算出机器人当前的状态。或者想要以一定速度到达某处,需要给出差速两边轮子的速度指令。 当然大多数时候,购买的机器人底盘能够直接帮助我们执行发送给机器人…

c语言中执行cl exe时出错,执行cl.exe时出错怎么办

执行cl.exe时出错的解决办法:首先打开vc界面;然后依次点击【“TOOLS”-“Option”-“Directories”】;最后重新设置“Excutable Fils、Include Files...”的路径或者修改环境变量即可。 具体问题: 为什么老是“执行 cl.exe 时出错”#include main() {float a = 12.3,b; dou…

课程学习(Curriculum Learning, CL)

原文链接: https://zhuanlan.zhihu.com/p/362351969 A Survey on Curriculum Learning TPAMI 2021 文章目录 问题定义有效性分析1. 模型优化角度数据分布角度 方法总结Predefined CLAutomatic CL 未来研究方向 全文内容导图汇总: 导图: http…

VS报错-- “CL.exe以退出,代码为5“ 解决办法

报错:CL.exe以退出,代码为5 解决办法: 项目属性–VC目录–可执行文件目录 把从父级或项目默认设置继承勾选上 然后在运行就没有问题了

CL-200A串口通信

一.进入串口模式 1.cl-200a关机,开关拨向“O”端 2.hold on键弹出 3.同时按下SET/CALL/CF,并且开关拨向“I”端,这时候会进入USB模式 二.CL-200A通信命令 模式 命令 PC connect02 30 30 35 34 31 20 20 20 03 31 33 0D 0ASet Hold02 39 39 35 35 31 20 20 30 03 30 32 0D…

STM32驱动FM24CL16

根据小苗开发板例程,修改得好用的读写FM24CL16的2K bytes代码,分享给大家。 小苗开发板的程序有点问题,I2C_Read()里最后产生stop条件时间不对;另外FM24CL16是11位地址的,在I2C_Write()里也应体现出来。 先贴代码&am…