Flutter 列表卡片设计

最新推荐文章于 2023-09-27 07:00:00 发布

小二李

最新推荐文章于 2023-09-27 07:00:00 发布

阅读量1.1k

点赞数

分类专栏： Flutter Flutter 组件封装文章标签： flutter 列表卡片

本文链接：https://blog.csdn.net/weixin_43800535/article/details/123244616

版权

Flutter 同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

Flutter 组件封装

10 篇文章 0 订阅

订阅专栏

该博客展示了如何在Flutter中创建一个VideoLargeCard组件，该组件用于展示视频的封面、时长、标题、作者信息以及浏览和回复数。点击卡片会跳转到视频详情页。代码详细解释了每个部分的实现，包括图片堆叠、文字样式和布局设计。

摘要由CSDN通过智能技术生成

在这里插入图片描述

video_large_card.dart

封装实现上面效果图

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))
    ]);
  }
}