四、ClipRRect 组件
ClipRRect 组件是矩形切割组件 , 可以将组件切割成圆角矩形 ; borderRadius 属性用于设置圆角 , child 属性用于设置被切割的子组件 ;
代码示例 :
// 设置底部的大图片 ClipRRect( // 设置圆角半径 5 像素 borderRadius: BorderRadius.circular(5), // 设置图片 child: Image.file(file, width: 120, height: 90, fit: BoxFit.fill,), ),
运行效果 : 下图中的圆角矩形就是使用 ClipRRect 切割 Image 组件的效果 ;
参考博客 : 【Flutter】Flutter 布局组件 ( Opacity 组件 | ClipRRect 组件 | Padding 组件 ) 二、ClipRRect 组件
五、Stack 组件与 Positioned 组件
Stack 组件是帧布局组件 , 在其 children 字段设置一个 Widget 集合 ;
在 Stack 组件内部 , 可以使用 Positioned 组件指定某个子组件在 Stack 布局组件中的位置 ;
代码示例 :
// 帧布局 Stack( children: <Widget>[ // 设置底部的大图片 ClipRRect( // 设置圆角半径 5 像素 borderRadius: BorderRadius.circular(5), // 设置图片 child: Image.file(file, width: 120, height: 90, fit: BoxFit.fill,), ), // 使用 Positioned 组件在帧布局中定位子组件 // 设置右上角的关闭按钮 Positioned( // 距离右侧 5 right: 5, // 距离顶部 5 top: 5, child: , ), ] )
效果展示 : 整体是 Stack 帧布局 , 使用 ClipRRect 组件将 Image 组件切割成了圆角矩形 , Stack 组件内使用 Positioned 组件将关闭按钮 , 放置在了右上角 ;
参考博客 : 【Flutter】Flutter 布局组件 ( FractionallySizedBox 组件 | Stack 布局组件 | Positioned 组件 ) 二、Stack 布局组件
六、按钮组件组合
关闭按钮首先由按键功能 , 在最外围使用 GestureDetector 组件 , 监听器 onTap 点击事件 , 点击时删除对应的图片文件 , 并更新整体布局 ;
GestureDetector 组件的 child 子组件就是我们看到的关闭按钮 , 先使用 ClipOval 圆形切割组件切割出一个黑色圆形 , 在中间使用 Center 组件放置一个 Icon 白色图标 , 就组成了圆形的关闭按钮 ;
关闭按钮代码示例 :
// 手势检测器组件 GestureDetector( // 点击事件 onTap: (){ setState(() { // 从图片集合中移除该图片 _images.remove(file); }); }, // 右上角的删除按钮 child: ClipOval( child: Container( padding: EdgeInsets.all(3), // 背景装饰 decoration: BoxDecoration(color: Colors.black), // 图标, 20 像素 , 白色 , 关闭按钮 child: Icon(Icons.close, size: 20, color: Colors.white,), ), ), ),
运行效果 :
