第三篇-用Flutter手撸一个抖音国内版，看看有多炫

时间:2020-05-29 风清扬 No.1 人气:0

前言

前一篇已经开发了大部分框架，包含视频上下滑动播放，这次将上次未完成的数据显示友好显示，以及底部音乐走马灯特效，另外优化了加载数据的bug，再dart语言里 & 会自动变成& 也不知道这个bug啥时候修复哈.

修复Dart语言 URL显示错误.

暂时只能这样替换了

url = url.replaceAll('&', '&'),

  getVideos(BillboardData v) async {
    try {
      var url = v.link.split("/")[5];
      var response = await http.get(
        api.video + url + "&dytk",
        headers: api.headers,
      );
      VideoData videoData = VideoData.fromJson(jsonDecode(response.body));
      //获取无水印的视频地址
      api.getRedirects(videoData.itemList[0].video.playaddr.uri).then((url) => {
            url = url.replaceAll('&', '&'),
            if (url != '')
              {
                videos.add(VideoItem(
                  data: videoData,
                  videourl: url,
                )),
                //print(url),
              }
          });
    } catch (ex) {
      print(ex);
    }
  }

对数据格式化

先引用 import 'package:flutter_money_formatter/flutter_money_formatter.dart';其次按以下方法

    FlutterMoneyFormatter fmf =
        FlutterMoneyFormatter(amount: double.parse(widget.favorite.toString()));

    FlutterMoneyFormatter fmf2 =
        FlutterMoneyFormatter(amount: double.parse(widget.comments));

显示的位置

 return Align(
        alignment: Alignment.bottomRight,
        widthFactor: 100.0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            _getFollowAction(),
            _getSocialAction(
                icon: DouyinIcons.heart,
                title: '${fmf.output.compactNonSymbol}'),
            _getSocialAction(
                icon: DouyinIcons.chat_bubble,
                title: '${fmf2.output.compactNonSymbol}'),
            _getSocialAction(
                icon: DouyinIcons.reply, title: '分享', isShare: true),
            _getMusicPlayerAction()
          ],
        ));
  }

底部音乐名字走马灯特效

先引入 import 'package:marquee_widget/marquee_widget.dart';

              Container(
                width: 150,
                child: Marquee(
                  child: Text('${widget.musicName} - ${widget.authorName}'),
                  direction: Axis.horizontal,
                  textDirection: TextDirection.ltr,
                  animationDuration: Duration(seconds: 1),
                  directionMarguee: DirectionMarguee.oneDirection,
                ),
              ),
            ])

这里需要设置width，否则没有效果，切记.

音乐旋转效果

先使用 SingleTickerProviderStateMixin，当元素显示时才播放动画效果

class _ActionsToolbarState extends State<ActionsToolbar>
    with SingleTickerProviderStateMixin {
  static const double ActionWidgetSize = 60.0;
  static const double ActionIconSize = 35.0;
  static const double ShareActionIconSize = 25.0;
  static const double ProfileImageSize = 50.0;
  static const double PlusIconSize = 20.0;
  AnimationController animationController;

设置初始化状态

  @override
  void initState() {
    super.initState();
    animationController = new AnimationController(
      vsync: this,
      duration: new Duration(seconds: 5),
    );
    animationController.repeat();
  }

这里是完整的播放图标改造后的代码

Widget _getMusicPlayerAction() {
    return Container(
        margin: EdgeInsets.only(top: 10.0),
        width: ActionWidgetSize,
        height: ActionWidgetSize,
        child: Column(children: [
          Container(
            decoration: new BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(25.0)),
              color: Colors.black54,
            ),
            padding: EdgeInsets.all(11.0),
            height: ProfileImageSize,
            width: ProfileImageSize,
            child: AnimatedBuilder(
              animation: animationController,
              child: Container(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  gradient: musicGradient,
                  //border: Border.all(color: Colors.black87, width: 11.0),
                  image: DecorationImage(
                    image: NetworkImage(widget.coverImg),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              builder: (BuildContext context, Widget _widget) {
                return Transform.rotate(
                  angle: animationController.value * 6.3,
                  child: _widget,
                );
              },
            ),

            // decoration: BoxDecoration(
            //   shape: BoxShape.circle,
            //   gradient: musicGradient,
            //   border: Border.all(color: Colors.black87, width: 11.0),
            //   image: DecorationImage(
            //     image: NetworkImage(widget.coverImg),
            //     fit: BoxFit.cover,
            //   ),
            // ),
          ),
        ]));
  }

结语

本博客会持续更新，将在业余时间将其他的功能完善。请持续关注本博客，代码地址：https://github.com/WangCharliehttps://img.qb5200.com/download-x/douyin

欢迎各位点击star 和fork 代码.

加载全部内容