From 9bdb5450397f578701e39b6926dcdbc4b81f2719 Mon Sep 17 00:00:00 2001 From: w-R <953969641@qq.com> Date: Mon, 5 Jul 2021 16:55:09 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AF=A6=E6=83=85=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/article/video_playback_page.dart | 410 ++++++++++++++++++++++++++- lib/main.dart | 2 +- lib/view_widget/hot_item.dart | 2 +- pubspec.lock | 79 +++++- pubspec.yaml | 2 + 5 files changed, 483 insertions(+), 12 deletions(-) diff --git a/lib/article/video_playback_page.dart b/lib/article/video_playback_page.dart index 3986dd75..d128dfc2 100644 --- a/lib/article/video_playback_page.dart +++ b/lib/article/video_playback_page.dart @@ -1,7 +1,9 @@ +import 'package:chewie/chewie.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:huixiang/generated/l10n.dart'; import 'package:huixiang/view_widget/round_button.dart'; +import 'package:video_player/video_player.dart'; class VideoPlaybackPage extends StatefulWidget { @override @@ -12,22 +14,412 @@ class VideoPlaybackPage extends StatefulWidget { class _VideoPlaybackPage extends State { var controller = new ScrollController(); + VideoPlayerController videoPlayerController; + ChewieController chewieController; + + @override + void initState() { + // TODO: implement initState + super.initState(); +// player.setDataSource( +// "https://www.xxx/test.mp4", +// autoPlay: false); + //配置视频地址 + videoPlayerController = VideoPlayerController.network( + 'https://www.runoob.com/try/demo_source/movie.mp4'); + chewieController = ChewieController( + videoPlayerController: videoPlayerController, + aspectRatio: 3/ 2, //宽高比 + autoPlay: !true, //自动播放 + looping: true, //循环播放 + // 拖动条样式颜色 + materialProgressColors: new ChewieProgressColors( + playedColor: Colors.white, + handleColor: Colors.white, + backgroundColor: Colors.grey, + bufferedColor: Colors.transparent, + ), + ); + } + + @override + void dispose() { + /** + * 页面销毁时，视频播放器也销毁 + */ + videoPlayerController.dispose(); + super.dispose(); + } @override Widget build(BuildContext context) { return - Stack( - children: [ - Image.network( - "https://t7.baidu.com/it/u=2675747560,2138287772&fm=193&f=GIF", - fit: BoxFit.cover, - height: 300, - ), + Scaffold( + body: Container( + child: SingleChildScrollView( + physics: BouncingScrollPhysics(), + child: Column( + children: [ + Stack( + children: [ + Container( + height: 274, + child:Chewie( + controller: chewieController, + ), + ), + Container( + margin: EdgeInsets.only(top:40,left: 16,right: 16), + decoration:BoxDecoration( + color: Colors.transparent, + ), + child: + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + GestureDetector( + child: Icon( + Icons.arrow_back_ios, + color: Colors.white, + size: 24, + ), + onTap: (){ + Navigator.of(context).pop(); + }, + ), - ], - ); + Image.asset( + "assets/image/icon_share_w.png", + width: 24, + height: 24, + ), + ],), + ), + ], + ), + Container( + margin: EdgeInsets.only(bottom: 20), + padding: EdgeInsets.all(16), + decoration: BoxDecoration( + color: Colors.white, + boxShadow: [ + BoxShadow( + color: Colors.black.withAlpha(12), + offset: Offset(0, 2), + blurRadius: 14, + spreadRadius: 0) + ], + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + ClipOval( + child: Image.network( + "https://t7.baidu.com/it/u=2841334870,333581502&fm=193&f=GIF", + fit: BoxFit.cover, + width: 44, + height: 44, + ), + clipBehavior: Clip.hardEdge, + ), + SizedBox( + width: 8, + ), + Expanded( + child: Container( + height: 60, + child: Column( + mainAxisAlignment: + MainAxisAlignment.spaceEvenly, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text.rich( + TextSpan(children: [ + TextSpan( + text: "百花谷", + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 14, + color: Colors.black), + ), + ]), + textDirection: TextDirection.ltr, + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Text( + "2021.04.12 12:12", + overflow: TextOverflow.ellipsis, + maxLines: 2, + style: TextStyle( + fontSize: 12, + color: Color(0xff808080), + ), + ), + Text( + "播放次数 56", + overflow: TextOverflow.ellipsis, + maxLines: 2, + style: TextStyle( + fontSize: 12, + color: Color(0xff808080), + ), + ), + ], + ), + ], + ), + ), + flex: 1, + ) + ], + ), + SizedBox( + height: 20, + ), + Text("牡丹花的养护知识", + style: TextStyle( + fontSize: 24, + fontWeight: FontWeight.bold, + color: Color(0xff1A1A1A))), + ], + ), + ), + Container( + // margin: EdgeInsets.only(bottom: 20), + // padding: EdgeInsets.all(16), + decoration: BoxDecoration( + color: Colors.white, + boxShadow: [ + BoxShadow( + color: Colors.black.withAlpha(12), + offset: Offset(0, 2), + blurRadius: 14, + spreadRadius: 0) + ], + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Padding(padding: EdgeInsets.all(16),child:Text("评论 (58) 喜欢 (58)", + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.bold, + color: Color(0xff1A1A1A))),), + SizedBox( + height: 500, + child: ListView.builder( + itemCount: 6, + scrollDirection: Axis.vertical, + physics: BouncingScrollPhysics(), + itemBuilder: (context, position) { + return _commentItem(position); + + }, + ), + ), + // _commentItem() + ], + ), + ), + SizedBox( + height: 12, + ), + Container( + padding: EdgeInsets.all(16), + decoration: BoxDecoration( + color: Colors.white, + boxShadow: [ + BoxShadow( + color: Colors.black.withAlpha(12), + offset: Offset(0, 2), + blurRadius: 14, + spreadRadius: 0) + ], + borderRadius: new BorderRadius.only( + topLeft: Radius.circular(8.0), + topRight: Radius.circular(8.0), + ), + ), + child: Row( + children: [ + Expanded( + flex: 1, + child: Container( + decoration: new BoxDecoration( + color: Color(0xffF2F2F2), + borderRadius: BorderRadius.circular(2.0)), + child: Column( + children: [ + Container( + margin: const EdgeInsets.fromLTRB(4, 0, 4, 0), + alignment: Alignment.topLeft, + child: TextField( + maxLines: 8, + minLines: 1, + decoration: InputDecoration( + border: InputBorder.none, + hintText: "留下您精彩的评论吧~", + hintStyle: TextStyle( + fontSize: 14, + color: Color(0xffCDCCCC), + ), + ), + ), + ), + ], + ), + ), + ), + Padding( + padding: EdgeInsets.only(left: 20, right: 20), + child: Text( + "发送", + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.bold, + color: Color(0XFF1A1A1A)), + ), + ), + Image.asset("assets/image/icon_like_h.png") + ], + ), + ), + ], + ), + ), + ), + ); } + + Widget _commentItem(var position) { + return Container( + child: Column( + children: [ + Padding(padding: EdgeInsets.all(16),child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + ClipOval( + child: Image.network( + "https://t7.baidu.com/it/u=2841334870,333581502&fm=193&f=GIF", + fit: BoxFit.cover, + width: 40, + height: 40, + ), + clipBehavior: Clip.hardEdge, + ), + SizedBox( + width: 12, + ), + Expanded( + child: Container( + height: 60, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text.rich( + TextSpan(children: [ + TextSpan( + text: "张三", + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 14, + color: Colors.black), + ), + ]), + textDirection: TextDirection.ltr, + ), + Text( + "2021.04.12 12:12", + overflow: TextOverflow.ellipsis, + maxLines: 2, + style: TextStyle( + fontSize: 12, + color: Color(0xff808080), + ), + ), + ], + ), + ), + flex: 1, + ), + Container( + alignment: Alignment.topRight, + child: Row( + children: [ + Image.asset( + "assets/image/icon_like.png", + width: 16, + height: 16, + ), + Text( + "58", + style: TextStyle(fontSize: 12, color: Color(0xff1A1A1A)), + ), + ], + ), + ), + ], + ),), + Padding( + padding: EdgeInsets.only(left: 68,right: 16), + child: Text( + "文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义（Mess…", + style: TextStyle(fontSize: 14, color: Color(0xff1A1A1A)), + ), + ), + SizedBox( + height: 12, + ), + Container( + width: double.infinity, + margin: EdgeInsets.only(left: 68,right: 16), + decoration: new BoxDecoration( + color: Color(0xffF2F2F2), + borderRadius: BorderRadius.circular(2.0), + ), + child: Padding( + padding: EdgeInsets.only(left: 4, top: 4, bottom: 4), + child: Text( + "文本，是指书面语言的表现形式文本，是指、", + style: TextStyle(fontSize: 12, color: Color(0xff808080)), + ), + ), + ), + if (position == 5) + Container( + height: 63, + decoration: BoxDecoration( + color: Color(0xffF2F2F2), + boxShadow: [ + BoxShadow( + color: Colors.black.withAlpha(12), + offset: Offset(0, 2), + blurRadius: 14, + spreadRadius: 0) + ], + ), + margin: EdgeInsets.only(top: 30), + alignment: Alignment.center, + child: Text( + "-已显示全部评论-", + style: TextStyle(fontSize: 14, color: Color(0xff353535)), + ), + ), + ], + ), + ); + } } diff --git a/lib/main.dart b/lib/main.dart index 54d10200..860693ed 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -107,7 +107,7 @@ Map routers = { '/router/logistics_information_page': (context, {arguments}) => LogisticsInformationPage(), '/router/hot_article_details_page': (context, {arguments}) => HotArticleDetailsPage(), - // '/router/video_playback_page': (context, {arguments}) => VideoPlaybackPage(), + '/router/video_playback_page': (context, {arguments}) => VideoPlaybackPage(), '/router/roll_center_page': (context, {arguments}) => RollCenterPage(), // '/router/hot_article_details_page': (context, {arguments}) => HotArticleDetailsPage(), // '/router/ui_test': (context, {arguments}) => UITest(), diff --git a/lib/view_widget/hot_item.dart b/lib/view_widget/hot_item.dart index 5dd6ff47..f60d6685 100644 --- a/lib/view_widget/hot_item.dart +++ b/lib/view_widget/hot_item.dart @@ -7,7 +7,7 @@ class HotArticleItem extends StatelessWidget { Widget build(BuildContext context) { return GestureDetector( onTap: (){ - Navigator.of(context).pushNamed('/router/hot_article_details_page'); + Navigator.of(context).pushNamed('/router/video_playback_page'); }, child: hotItem(), ); diff --git a/pubspec.lock b/pubspec.lock index 8a907629..67d02c20 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -148,13 +148,20 @@ packages: url: "https://pub.flutter-io.cn" source: hosted version: "1.0.4" + chewie: + dependency: "direct main" + description: + name: chewie + url: "https://pub.flutter-io.cn" + source: hosted + version: "1.2.2" cli_util: dependency: transitive description: name: cli_util url: "https://pub.flutter-io.cn" source: hosted - version: "0.3.1" + version: "0.3.2" clock: dependency: transitive description: @@ -427,6 +434,13 @@ packages: url: "https://pub.flutter-io.cn" source: hosted version: "1.0.0" + nested: + dependency: transitive + description: + name: nested + url: "https://pub.flutter-io.cn" + source: hosted + version: "1.0.0" package_config: dependency: transitive description: @@ -511,6 +525,13 @@ packages: url: "https://pub.flutter-io.cn" source: hosted version: "4.2.1" + provider: + dependency: transitive + description: + name: provider + url: "https://pub.flutter-io.cn" + source: hosted + version: "5.0.0" pub_semver: dependency: transitive description: @@ -712,6 +733,62 @@ packages: url: "https://pub.flutter-io.cn" source: hosted version: "2.1.0" + video_player: + dependency: "direct main" + description: + name: video_player + url: "https://pub.flutter-io.cn" + source: hosted + version: "2.1.6" + video_player_platform_interface: + dependency: transitive + description: + name: video_player_platform_interface + url: "https://pub.flutter-io.cn" + source: hosted + version: "4.1.0" + video_player_web: + dependency: transitive + description: + name: video_player_web + url: "https://pub.flutter-io.cn" + source: hosted + version: "2.0.1" + wakelock: + dependency: transitive + description: + name: wakelock + url: "https://pub.flutter-io.cn" + source: hosted + version: "0.5.2" + wakelock_macos: + dependency: transitive + description: + name: wakelock_macos + url: "https://pub.flutter-io.cn" + source: hosted + version: "0.1.0+1" + wakelock_platform_interface: + dependency: transitive + description: + name: wakelock_platform_interface + url: "https://pub.flutter-io.cn" + source: hosted + version: "0.2.1+1" + wakelock_web: + dependency: transitive + description: + name: wakelock_web + url: "https://pub.flutter-io.cn" + source: hosted + version: "0.2.0+1" + wakelock_windows: + dependency: transitive + description: + name: wakelock_windows + url: "https://pub.flutter-io.cn" + source: hosted + version: "0.1.0" watcher: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 7bddd4c6..5cc2b7ec 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -47,6 +47,8 @@ dependencies: json_annotation: ^3.1.1 webview_flutter: ^2.0.8 logger: ^1.0.0 + chewie: ^1.2.2 + video_player: ^2.1.6 flutter_screenutil: ^5.0.0+2 bubble_tab_indicator: ^0.1.6