Flutter 列表卡片设计

封装实现上面效果图

class VideoLargeCard extends StatelessWidget {
  final VideoModel videoModel;

  const VideoLargeCard({Key key, this.videoModel}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      // 视频详情页
      onTap: () {
        HiNavigator.getInstance()
            .onJumpTo(RouteStatus.detail, args: {'videoMo': videoModel});
      },
      child: Container(
        margin: EdgeInsets.only(left: 15, right: 15, bottom: 5),
        padding: EdgeInsets.only(bottom: 6),
        height: 106,
        decoration: BoxDecoration(border: borderLine(context)),
        child: Row(
          children: [_itemImage(context), _buildContent()],
        ),
      ),
    );
  }

  /// 视频图片
  _itemImage(BuildContext context) {
    double height = 90;
    return ClipRRect(
      borderRadius: BorderRadius.circular(3),
      child: Stack(
        children: [
          // 封面
          cacheImage(videoModel.cover,
              width: height * (16 / 9), height: height),
          // 时长
          Positioned(
              bottom: 5,
              right: 5,
              child: Container(
                  padding: EdgeInsets.all(2),
                  // 装饰器：背景色
                  decoration: BoxDecoration(
                      color: Colors.black38,
                      borderRadius: BorderRadius.circular(2)),
                  child: Text(durationTransform(videoModel.duration),
                      style: TextStyle(color: Colors.white, fontSize: 10))))
        ],
      ),
    );
  }

  _buildContent() {
    return Expanded(
      child: Container(
        padding: EdgeInsets.only(top: 5, bottom: 5, left: 8),
        child: Column(
          // 主轴两端对齐
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          // 交叉轴左对齐
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 视频标题
            Text(videoModel.title,
                style: TextStyle(fontSize: 12, color: Colors.black87)),
            _buildBottomContent()
          ],
        ),
      ),
    );
  }

  _buildBottomContent() {
    return Column(
      children: [
        // 作者信息
        _owner(),
        hiSpace(height: 5),
        // 浏览，回复数
        Row(
          // 主轴两端对齐
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                ...smallIconText(Icons.ondemand_video, videoModel.view),
                hiSpace(width: 5),
                ...smallIconText(Icons.ondemand_video, videoModel.reply),
              ],
            ),
            Icon(Icons.more_vert_sharp, size: 15, color: Colors.grey)
          ],
        )
      ],
    );
  }

  /// 作者信息
  _owner() {
    var owner = videoModel.owner;
    return Row(children: [
      Container(
        padding: EdgeInsets.all(1),
        // 装饰器 : 四周的边框
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(2),
            border: Border.all(color: Colors.grey)),
        child: Text(
          'UP',
          style: TextStyle(
              color: Colors.grey, fontSize: 8, fontWeight: FontWeight.bold),
        ),
      ),
      hiSpace(width: 8),
      Text(owner.name, style: TextStyle(fontSize: 11, color: Colors.grey))
    ]);
  }
}