PhysicalModel 和ClipRRect 使用和区别

区别"/>

PhysicalModel 和ClipRRect 使用和区别

PhysicalModel ，主要的功能就是设置widget四边圆角，可以设置阴影颜色，和z轴高度

PhysicalModel({//裁剪模式this.clipBehavior = Clip.none,//四角圆度半径this.borderRadius,//z轴高度this.elevation = 0.0,//设置阴影颜色this.shadowColor = const Color(0xFF000000),})

使用：

import 'package:demoflutter/bean/bean.dart';
import 'package:demoflutter/comm/custom_icons.dart';
import 'package:demoflutter/utils/utlis.dart';
import 'package:flutter/material.dart';class ServiceMenu extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn PhysicalModel(color: Colors.white,borderRadius: BorderRadius.all(Radius.circular(6)),clipBehavior: Clip.antiAlias,elevation: 6.0,shadowColor: Colors.grey,child: GridView.count(crossAxisCount: 5,physics: NeverScrollableScrollPhysics(),shrinkWrap: true,children: getWidgetList(),),);}List<Widget> getWidgetList() {List<ServiceItemViewModel> lists = getData();int i = 0;return lists.map((value) {i++;return _item(value, i);}).toList();}Widget _item(ServiceItemViewModel value, int index) {return Container(alignment: Alignment.center,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[value.icon,Padding(padding: EdgeInsets.only(top: 5),child: Text(value.title),)],),);}double sizeicon = 25;List<ServiceItemViewModel> getData() {List<ServiceItemViewModel> datas = [];datas.add(new ServiceItemViewModel(title: '精选早餐',icon: Icon(CustomIcons.breakFirst,size: sizeicon,color: Colors.lightBlue,)));datas.add(new ServiceItemViewModel(title: '包子',icon: Icon(CustomIcons.baozi,size: sizeicon,color: Colors.green,)));datas.add(new ServiceItemViewModel(title: '炸鸡',icon: Icon(CustomIcons.friedFood,size: sizeicon,color: Colors.orange,)));datas.add(new ServiceItemViewModel(title: '网红甜品',icon: Icon(CustomIcons.sweetmeats,size: sizeicon,color: Colors.pink,)));datas.add(new ServiceItemViewModel(title: '湘菜',icon: Icon(CustomIcons.xiangCuisine,size: sizeicon,color: Colors.yellow,)));datas.add(new ServiceItemViewModel(title: '免配送费',icon: Icon(CustomIcons.truck,size: sizeicon,color: Colors.lightGreen,)));datas.add(new ServiceItemViewModel(title: '美团专送',icon: Icon(CustomIcons.motorbike,size: sizeicon,color: Colors.lime,)));datas.add(new ServiceItemViewModel(title: '到店自取',icon: Icon(CustomIcons.shop,size: sizeicon,color: Colors.lightBlueAccent,)));datas.add(new ServiceItemViewModel(title: '跑腿代购',icon: Icon(CustomIcons.errand,size: sizeicon,color: Colors.purple,)));datas.add(new ServiceItemViewModel(title: '全部分类',icon: Icon(CustomIcons.allCategories,size: sizeicon,color: Colors.orangeAccent,)));return datas;}
}

效果图：

ClipRRect 跟PhysicalModel 的区别在于不能设置z轴和，阴影，其他效果跟PhysicalModel 基本一致

ClipRRect({
// 圆角半径this.borderRadius,//裁剪模式this.clipBehavior = Clip.antiAlias,Widget child,})

效果：

import 'package:demoflutter/bean/bean.dart';
import 'package:demoflutter/utils/utlis.dart';
import 'package:flutter/material.dart';//热门活动
class HotList extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Container(color: Colors.white,padding: EdgeInsets.only(bottom: 5),child: Column(children: <Widget>[gethead(),getbody(),],),);}Widget getbody() {return Container(padding: EdgeInsets.symmetric(horizontal: 10),child: GridView.builder(shrinkWrap: true,itemCount: programmes.length,primary: false,physics: NeverScrollableScrollPhysics(),gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,crossAxisSpacing: 10,mainAxisSpacing: 10,childAspectRatio: 0.7),itemBuilder: (BuildContext context, int index) {return _itemWidget(programmes[index]);}));}Widget _itemWidget(ProgrammeViewModel model) {return Column(children: <Widget>[ClipRRect(borderRadius: BorderRadius.circular(6),child: Stack(fit: StackFit.passthrough,children: <Widget>[Imagework(model.coverImgUrl,fit: BoxFit.cover,),Positioned(left: 0,bottom: 0,right: 0,height: 40,child: Container(decoration: BoxDecoration(gradient: LinearGradient(colors: [Colors.transparent,Color.fromARGB(255, 0, 0, 0)], begin: Alignment.topCenter, end: Alignment.bottomCenter)),),),Positioned(left: 6,right: 0,bottom: 4,child: Row(children: <Widget>[Icon(Icons.play_arrow,color: Colors.white,size: 13,),Padding(padding: EdgeInsets.only(right: 5)),Text(playNum(model.playsCount),style: TextStyle(fontSize: 12, color: Colors.white),)],)),Positioned(left: 0,top: 0,child: Container(padding: EdgeInsets.fromLTRB(7, 2, 7, 2),decoration: BoxDecoration(borderRadius: BorderRadius.only(bottomRight: Radius.circular(18)),gradient: LinearGradient(begin: Alignment.centerLeft,end: Alignment.bottomRight,colors: [Colors.orange, Colors.orangeAccent])),child: Text('VIP',style: TextStyle(fontSize: 12, color: Colors.white),),))],),),Padding(padding: EdgeInsets.only(top: 8),child: Text(model.title,overflow: TextOverflow.ellipsis,maxLines: 2,style: TextStyle(fontSize: 14,color: Color(0xFF333333),fontWeight: FontWeight.w500),),)],);}String playNum(int num) {if (num / 10000 < 1) {return 'num';} else if (num / 100000000 < 1) {return '${num ~/ 10000}万';} else {return '${num ~/ 100000000}亿';}}static const List<ProgrammeViewModel> programmes = [ProgrammeViewModel(title: '笑坛三巨匠之一：郭德纲最新高清相声集',playsCount: 363182465,needVip: false,coverImgUrl:'.jpg!op_type=5&upload_type=album&device_type=ios&name=large&magick=png',),ProgrammeViewModel(title: '德云社相声十年经典之一',playsCount: 10236432,needVip: false,coverImgUrl:'.jpg!op_type=5&upload_type=album&device_type=ios&name=large&magick=png',),ProgrammeViewModel(title: '郭德纲经典相声',playsCount: 8628885,needVip: true,coverImgUrl:'.jpg!op_type=5&upload_type=album&device_type=ios&name=large&magick=png',),ProgrammeViewModel(title: '丑女也能做皇后 | 郭德纲笑说钟无艳的绝世奇闻',playsCount: 35346856,needVip: false,coverImgUrl:'.jpg!op_type=5&upload_type=album&device_type=ios&name=large&magick=png',),ProgrammeViewModel(title: '女妖精的一推就软？听郭德纲单口《九尾狐》',playsCount: 17787252,needVip: true,coverImgUrl:'.jpg!op_type=5&upload_type=album&device_type=ios&name=large&magick=png',),ProgrammeViewModel(title: '周文强老师财富本质课程独播',playsCount: 10361,needVip: false,coverImgUrl:'.jpg!op_type=5&upload_type=album&device_type=ios&name=large&magick=png',),];Widget gethead() {return Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[Padding(padding: EdgeInsets.only(left: 10, top: 10, bottom: 10),child: Text('猜你喜欢',style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),),),Row(children: <Widget>[Text('更多'),Icon(Icons.keyboard_arrow_right,size: 20,color: Colors.orangeAccent,)],)],);}
}