Flutter开发 - 设置圆角:ClipRRect，被你忽略的秘密（设置圆角失效）

最新推荐文章于 2024-08-12 15:30:08 发布

CodingFire

最新推荐文章于 2024-08-12 15:30:08 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Flutter实用开发技巧合集文章标签： ClipRRect ClipRRect设置圆角失效圆角失效 flutter圆角失效 flutter设置圆角

本文链接：https://blog.youkuaiyun.com/CodingFire/article/details/108868698

Flutter实用开发技巧合集专栏收录该内容

34 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

博客揭示了Flutter中ClipRRect设置圆角失效的原因，原来是margin设置导致。解决方案包括在外层使用Container添加margin，或者改用不受margin影响的Card组件。此外，还提到了一种无限制的设置圆角方法。

什么？设置圆角失效？你有遇到过么？知道原因么？

今天，这篇博客，博主将带你揭开ClipRRect设置圆角失效的秘密。

按照惯例，我们先看下效果图：
在这里插入图片描述
废话不多说，直接揭开谜底：影响圆角的元凶不是别人，正式margin的设置，来看下代码：

import 'package:flutter/material.dart';

class ClipRectPage extends StatefulWidget {
   
   
  @override
  _ClipRectPageState createState

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CodingFire

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

flutter-实现圆角带边框的view（android无效）

前人挖坑，后人种（pen）

09-29

1065

注意：当前version1.9.1+hotfix2，mac,下面的效果只能在iOS上有效，安卓无效 x下面的两种方式在iOS有效： 1.使用boxDecoration return new Container( decoration: new BoxDecoration( color: Colors.grey, ...

Flutter 图片圆角功能

徐代龙的技术专栏

06-29

1691

代码如下： return Center( child: Container( width: 250, height: 150, child: ClipRRect( borderRadius: BorderRadius.circular(10), child: FadeIn...

参与评论您还未登录，请先登录后发表或查看评论

1 条评论

chjsun_ff 2022.05.05
神经病啊，文章都要订阅

Flutter 在组件的四周加上圆角ClipRRect

Leove的专栏

07-08

234

类似还有 CustomClipper, for information about creating custom clips. ClipRect, for more efficient clips without rounded corners. ClipOval, for an elliptical clip. ClipPath, for an arbitrarily shaped clip. ClipRRect( borderRadius: BorderRadi

Fluttter的ClipRRect控件

江上清风山间明月的博客

06-29

1716

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

Flutter 通过 ClipRRect 为图片添加圆角

GetcharZp的博客

01-17

1112

效果图：代码： import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Materi...

Flutter | 彻底解决软键盘遮挡底部弹窗问题（showModalBottomSheet 圆角自适应完整方案）

08-12

941

本文介绍了Flutter中实现完美适配键盘的圆角底部弹窗的方法。通过showModalBottomSheet组件，结合三个关键技术点：设置isScrollControlled:true使弹窗可滚动、使用MediaQuery.of(context).viewInsets.bottom获取键盘高度动态调整布局、利用ClipRRect实现顶部圆角效果。文章提供了完整代码示例和常见问题解决方案，并建议将通用逻辑封装成AppBottomSheet工具类，实现一行代码快速调用。这种方案能有效解决键盘遮挡输入框的问题，同

Flutter 开发问题记录（经常更新中）

zjuter的专栏

11-08

1607

初次接触Flutter, 在项目中遇到的问题总结。

react native 中设置Image/ImageBackground圆角无效的解决方法

weixin_44682587的博客

03-04

1887

通常我们会设置style： borderRadius：在安卓环境下，发现并没有生效，设置属性即可解决 imageStyle={undefined{ borderRadius:20 }} 完整示例： <Image style={{width:40,height:40,borderRadius:20}} imageStyle={{borderRadius:20}} /> <ImageBackground style={{width:40,height:40,borderRadius:

Flutter 实现圆角图片的多种方式

zsy_2020的博客

04-18

1991

Flutter 实现圆角图片的多种方式：ClipRRect、BoxDecoration 、CachedNetworkImage

flutter 图片组件Image、圆角组件ClipOval、裁剪矩形组件ClipRect、本地静态图片ImageIcon

weixin_43294560的博客

04-11

1252

Image: 加载网络图片: Image.network( "路径', height:n, weight:n, fit:BoxFit.cover, 显示方式 ) 在Container组件中加载图片的第二种方式,在decoration种加载 Container( width: 300.0, height: 300.0, ...

Flutter UI基础 - ClipRRect

迦南的专栏

07-20

1587

通过UI部分了解一下 Flutter中切割圆形，角度边缘等问题。通过下面代码可以实现，下图效果效果如下如果修改 borderRadius:const BorderRadius.all(const Radius.circular(90.0)) 的 90.0 的不同值会得到不同的圆角效果，这里读者自行验证。这里的borderRadius:const BorderRadius.all(const Radius.circular(90.0))，还可以修改成 borderRadi...

flutter-剪裁（Clip）

Restless Breeze

03-17

5766

Flutter中提供了一些剪裁函数，用于对组件进行剪裁。剪裁Widget 默认行为 ClipOval 子组件为正方形时剪裁成内贴圆形；为矩形时，剪裁成内贴椭圆 ClipRRect 将子组件剪裁为圆角矩形 ClipRect 默认剪裁掉子组件布局空间之外的绘制内容（溢出部分剪裁） ClipPath 按照自定义的路

《Flutter 控件大全》第二十三个：ClipRect、ClipRRect、ClipOval、ClipPath、CustomClipper

老孟Flutter

04-04

2593

如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。 Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。 ClipRect ClipRect组件使用矩形裁剪子组件，通常情况下，ClipRect作用于...

Flutter 如何新增圆角与边框

丿灬安之若死

08-05

367

Container( decoration: BoxDecoration( color: MyColors.color_main, border: Border.all(width: 1, color: Colors.white), //圆角 ...

Flutter UI Widget介绍—ClipRRect

weixin_66477591的博客

03-31

327

ClipRRect

Flutter 裁剪布局之 ClipRect、ClipRRect、ClipOval、ClipPath、CustomClipper

龙衣

03-25

9580

文章目录裁剪布局ClipRectClipRRectClipOvalClipPath 及 CustomClipper 裁剪布局 Flutter中提供了一些剪裁widget。 widget 作用 ClipRect 将 child 剪裁为给定的矩形大小 ClipRRect 将 child 剪裁为圆角矩形 ClipOval 如果 child 为正方形时剪裁之后是圆形，如果 ch...

Flutter - 裁剪组件大全（ClipRect、ClipRRect、ClipOval、ClipPath）

chuyouyinghe的专栏

07-02

1924

在Flutter中，提供了不少裁剪组件，可以帮助我们实现不同形状的组件，当然，如果需要特殊的形状，那就需要自定义裁剪组件了。 ClipRect - 矩形裁剪 ClipRect组件使用矩形裁剪子组件。通常情况下，ClipRect用于Center、Align、OverflowBox、CustomPaint、CustomSingleChildLayout、CustomMultiChildLayout组件。 Center( child: ClipRect( child: Image.network( 'ht

#Flutter 裁剪布局之 ClipRect、ClipRRect、ClipOval、ClipPath、CustomClipper

jiahua123_dongzhou的博客

09-01

2953

Flutter 裁剪布局之 ClipRect、ClipRRect、ClipOval、ClipPath、CustomClipper 文章目录裁剪布局 ClipRect ClipRRect ClipOval ClipPath 及 CustomClipper 裁剪布局 Flutter中提供了一些剪裁widget，如下表格。 widget 作用 ClipRect 将 child 剪裁为给定的矩形大小 ClipRRect 将 child 剪裁为圆角矩形 C

flutter组件 RefreshIndicator,Opacity,ClipOval,ClipRRect

litter_lj的博客

08-08

957

1.RefreshIndicator const RefreshIndicator({ Key key, @required this.child, //子集 this.displacement = 40.0, //触发下拉刷新的距离 @required this.onRefresh, //下拉回调方法,方法需要有async和await关键字，没有aw...

Flutter-snippets插件：提高Flutter开发效率的实时模板工具

Flutter是谷歌开发的一个开源UI软件开发...总结来说，flutter-snippets插件通过集成实时模板，极大地便利了Flutter开发者在IntelliJ IDEA和Android Studio中的编码工作，尤其对提高开发效率和代码质量有着显著的作用。