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

前言

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

本系列会持续更新，将各个模块及功能持续完善.

 

修复Dart语言 URL显示错误.

暂时只能这样替换了 

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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';其次按以下方法

1 2 3 4 5

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

显示的位置

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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';  

1 2 3 4 5 6 7 8 9 10 11

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，当元素显示时才播放动画效果

1 2 3 4 5 6 7 8

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;

 

设置初始化状态

1 2 3 4 5 6 7 8 9

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

 

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

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/WangCharlie/douyin

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