文章目录
一、PhysicalModel 组件
二、 完整代码示例
三、 相关资源
一、PhysicalModel 组件
PhysicalModel 组件 : 可以将布局显示成不同的形状 ,
class PhysicalModel extends SingleChildRenderObjectWidget { const PhysicalModel({ Key key, this.shape = BoxShape.rectangle, // 形状 : 圆形 , 矩形 this.clipBehavior = Clip.none, // 裁剪行为 this.borderRadius, // 圆角半径 this.elevation = 0.0, @required this.color, // 颜色值 this.shadowColor = const Color(0xFF000000), // 背景颜色 Widget child, // 被裁减的组件 }) : assert(shape != null), assert(elevation != null && elevation >= 0.0), assert(color != null), assert(shadowColor != null), assert(clipBehavior != null), super(key: key, child: child); }
PhysicalModel 组件用法 :
设置裁剪形状 : 默认矩形 , 可以在 shape 字段设置圆形 ;
设置背景颜色 : color 字段设置背景颜色 , Color 类型 ;
设置圆角半径 : borderRadius 字段设置 , BorderRadius 类型 ;
设置裁剪行为 : clipBehavior 字段设置裁剪行为 , Clip 枚举类型 , 无/有锯齿/抗锯齿/抗锯齿+保存图层 ;
设置被裁剪的组件 : child 字段设置被裁减的组件 , Widget 类型 ;
PhysicalModel(
color: 背景颜色 ( Color 类型 ),
// 设置圆角半径 15 borderRadius: 圆角半径 ( BorderRadius 类型 ), // 设置裁剪行为 , 抗锯齿 clipBehavior: Clip 枚举类型 ( 无/有锯齿/抗锯齿/抗锯齿+保存图层 ), // 设置被裁剪的组件 child: 被裁剪的组件 ( Widget 类型 ), )
代码示例 : PhysicalModel 组件裁剪 PageView 组件 , 将 PageView 组件裁剪成圆角矩形样式 ;
PhysicalModel( color: Colors.transparent, // 设置圆角半径 15 borderRadius: BorderRadius.circular(50), // 设置裁剪行为 , 抗锯齿 clipBehavior: Clip.antiAlias, // 设置 PageView 组件 child: PageView( // 设置 PageView 中封装的若干组件 children: <Widget>[ // 第一个页面组件 Container( // 设置居中方式 , 居中显示 alignment:Alignment.center, // 设置装饰器 , 绿色背景 decoration: BoxDecoration(color: Colors.green), // 显示的主要文字 child: Text("页面 0", style: TextStyle(fontSize: 20, color: Colors.black),), ), // 第二个页面组件 Container( // 设置居中方式 , 居中显示 alignment:Alignment.center, // 设置装饰器 , 绿色背景 decoration: BoxDecoration(color: Colors.red), // 显示的主要文字 child: Text("页面 1", style: TextStyle(fontSize: 20, color: Colors.white),), ), // 第三个页面组件 Container( // 设置居中方式 , 居中显示 alignment:Alignment.center, // 设置装饰器 , 绿色背景 decoration: BoxDecoration(color: Colors.black), // 显示的主要文字 child: Text("页面 2", style: TextStyle(fontSize: 20, color: Colors.yellow),), ), ], ), ),
