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

前言

前一篇已经开发了大部分框架，包含视频上下滑动播放，这次将上次未完成的数据显示友好显示，以及底部音乐走马灯特效，另外优化了加载数据的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,
            //   ),
            // ),
          ),
        ]));
  }
 

结语

本博客会持续更新，将在业余时间将其他的功能完善。请持续关注本博客，代码地址：github.com/WangCharlie…

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