Flutter圆角设置组件

Posted 2023-04-17

参考技术A

flutter能设置圆角的组件：ClipRRect、ClipOval、CircleAvatar、BoxDecoration BorderRadius.circular、BoxDecoration BoxShape.circle

1.ClipRRect：将 child 剪裁为宽高相等的圆角组件，可设置圆角度数

2.ClipOval： 将child裁剪为宽高相等的圆角组件（只包括圆形和椭圆形），不可设置圆角度数

3.CircleAvatar：只能设置自身圆形，不能裁剪child

4.BoxDecoration BorderRadius.circular 设置自身圆角,不能裁剪child

4.BoxDecoration BoxShape.circle 只能设置自身为圆形，不能裁剪child

参考： flutter 圆角设置

Flutter笔记-实现圆角的几种方式

裁剪

ClipRRect

ClipRRect组件可以对子组件进行圆角裁剪，默认圆角半径为0。
ClipRRect定义如下：

ClipRRect ClipRRect(
	Key key, 
	BorderRadius borderRadius,   // 圆角
	CustomClipper<RRect> clipper, 
	Clip clipBehavior, 
	Widget child  // 子内容
)

设置单边圆角

new ClipRRect(
    child: Image.network(
    	imgUrl, 
    	scale: 8.5, 
    	fit: BoxFit.cover,
    ),
    borderRadius: BorderRadius.only(
    	topLeft: Radius.circular(20),
        topRight: Radius.circular(20)
    ),
),

效果图：

设置圆角

new ClipRRect(
   child: Image.network(
   		imgUrl, 
   		scale: 8.5, 
   		fit: BoxFit.cover,
   ),
   borderRadius: BorderRadius.circular(20)
),

效果：

设置圆形

new Row(
   children: <Widget>[
       new Container(
         height: 100,
         width: 100,
         child: new ClipRRect(
            child: Image.network(
                      imgUrl,
                      height: 100,
                      fit: BoxFit.cover,
           ),
           borderRadius: BorderRadius.circular(50)),
      ),
  ],
),

效果：

ClipOval

ClipOval裁剪为椭圆形，椭圆形的大小为正切父组件，因此如果父组件为正方形，切出来是圆形。

new Row(
  children: <Widget>[
     new ClipOval(
          child: Image.network(
                 imgUrl,
                 width: 100,
                 height: 100,
                 fit: BoxFit.cover,
         ),
    ),
 ],
),

效果：

ClipPath

ClipPath组件根据路径进行裁剪，我们自定义裁剪路径也可以使用系统提供的。

new Row(
  children: <Widget>[
      ClipPath.shape(
          shape: CircleBorder(),
          child: Container(
                  height: 100,
                  width: 100,
                  child: Image.network(
                    imgUrl,
                    fit: BoxFit.cover,
                  ),
         ),
     ),
 ],
),

• shape参数是ShapeBorder类型
  • RoundedRectangleBorder：圆角矩形
  • ContinuousRectangleBorder：直线和圆角平滑连续的过渡，和RoundedRectangleBorder相比，圆角效果会小一些
  • StadiumBorder：类似于足球场的形状，两端半圆
  • BeveledRectangleBorder：斜角矩形
  • CircleBorder：圆形

效果：

new Row(
  children: <Widget>[
      ClipPath.shape(
          shape: StadiumBorder(),
          child: Container(
                  width: 100,
                  child: Image.network(
                    imgUrl,
                    fit: BoxFit.cover,
                  ),
         ),
     ),
 ],
),

效果：

圆圈控件

CircleAvatar

代表用户的圆圈的控件

new Row(
     children: <Widget>[
           new CircleAvatar(
                backgroundImage: NetworkImage(imgUrl),
                radius: 50.0,
           ),
     ],
),