Flutter笔记-实现圆角的几种方式
Posted 小溪彼岸
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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,
),
],
),
以上是关于Flutter笔记-实现圆角的几种方式的主要内容，如果未能解决你的问题，请参考以下文章