Flutter 仿bilibili视频点赞分享收藏工具栏

video_toolbar.dart

封装好的工具栏代码

class VideoToolBar extends StatelessWidget {
  final VideoDetailMo detailMo;

  // 视频详情数据
  final VideoModel videoModel;

  // 点赞回调
  final VoidCallback onLike;

  // 取消点赞回调
  final VoidCallback onUnLike;

  // 投币回调
  final VoidCallback onCoin;

  // 收藏回调
  final VoidCallback onFavorite;

  // 分享回调
  final VoidCallback onShare;

  const VideoToolBar(
      {Key key,
      @required this.detailMo,
      @required this.videoModel,
      this.onLike,
      this.onUnLike,
      this.onCoin,
      this.onFavorite,
      this.onShare})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 15, bottom: 10),
      margin: EdgeInsets.only(bottom: 15),
      // 底部的分割线
      decoration: BoxDecoration(border: borderLine(context)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _buildIconText(Icons.thumb_up_alt_rounded, videoModel.like,
              onClick: onLike, tint: detailMo?.isLike),
          _buildIconText(Icons.thumb_down_alt_rounded, '不喜欢',
              onClick: onUnLike),
          _buildIconText(Icons.monetization_on, videoModel.coin,
              onClick: onCoin),
          _buildIconText(Icons.grade_rounded, videoModel.favorite,
              onClick: onFavorite, tint: detailMo?.isFavorite),
          _buildIconText(Icons.share_rounded, videoModel.share,
              onClick: onShare)
        ],
      ),
    );
  }

  /// 返回上下结构的图标文字 Widget
  /// iconData: Icon 
  /// text    : 显示的文本
  /// onClick : 点击回调，可选参数
  /// tint    : 是否着色，可选参数(根据上次选中状态)
  _buildIconText(IconData iconData, text, {onClick, bool tint = false}) {
    if (text is int) {
      text = countFormat(text);
    } else if (text == null) {
      text = '';
    }
    tint = tint ?? false;

    return InkWell(
      onTap: onClick,
      child: Column(
        children: [
          Icon(
            iconData,
            color: tint ? primary : Colors.grey,
            size: 20,
          ),
          hiSpace(height: 5),
          Text(
            text,
            style: const TextStyle(color: Colors.grey, fontSize: 12),
          )
        ],
      ),
    );
  }
}

使用工具栏

VideoToolBar(
        detailMo: videoDetailMo,
        videoModel: videoModel,
        onLike: _doLike,
        onUnLike: _onUnLike,
        onFavorite: _onFavorite,
      )