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 {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return 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 {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return 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>[
              Image.network(
                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:
          'http://imagev2.xmcdn.com/group61/M0A/5D/74/wKgMcF0IoUmCLEZIAAfqML_y44E351.jpg!op_type=5&upload_type=album&device_type=ios&name=large&magick=png',
    ),
    ProgrammeViewModel(
      title: '德云社相声十年经典之一',
      playsCount: 10236432,
      needVip: false,
      coverImgUrl:
          'http://imagev2.xmcdn.com/group43/M01/AC/C8/wKgKklskehLi4XS1AARLpcjABqA907.jpg!op_type=5&upload_type=album&device_type=ios&name=large&magick=png',
    ),
    ProgrammeViewModel(
      title: '郭德纲经典相声',
      playsCount: 8628885,
      needVip: true,
      coverImgUrl:
          'http://imagev2.xmcdn.com/group63/M02/5E/4C/wKgMaF0IomXwR0fMAAbRPUR6d-E118.jpg!op_type=5&upload_type=album&device_type=ios&name=large&magick=png',
    ),
    ProgrammeViewModel(
      title: '丑女也能做皇后 | 郭德纲笑说钟无艳的绝世奇闻',
      playsCount: 35346856,
      needVip: false,
      coverImgUrl:
          'http://imagev2.xmcdn.com/group61/M01/5D/AD/wKgMZl0Io4zSQaoqAApJnId5Fxs220.jpg!op_type=5&upload_type=album&device_type=ios&name=large&magick=png',
    ),
    ProgrammeViewModel(
      title: '女妖精的一推就软？听郭德纲单口《九尾狐》',
      playsCount: 17787252,
      needVip: true,
      coverImgUrl:
          'http://imagev2.xmcdn.com/group63/M04/60/DB/wKgMaF0Ir5bAs3I6AAi5jSpprHU406.jpg!op_type=5&upload_type=album&device_type=ios&name=large&magick=png',
    ),
    ProgrammeViewModel(
      title: '周文强老师财富本质课程独播',
      playsCount: 10361,
      needVip: false,
      coverImgUrl:
          'http://imagev2.xmcdn.com/group63/M04/11/7C/wKgMaF0hpLWDI57SAALanlUKN40914.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,
            )
          ],
        )
      ],
    );
  }
}