import 'package:chewie/chewie.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:video_player/video_player.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; class VideoPlaybackPage extends StatefulWidget { @override State createState() { return _VideoPlaybackPage(); } } class _VideoPlaybackPage extends State { var controller = new ScrollController(); VideoPlayerController videoPlayerController; ChewieController chewieController; @override void 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: 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 Scaffold( body: Container( child: SingleChildScrollView( physics: BouncingScrollPhysics(), child: Column( children: [ Stack( children: [ Container( height: 274.h, child: Chewie( controller: chewieController, ), ), Container( margin: EdgeInsets.only(top: 40.h, left: 16.w, right: 16.w), 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.webp", width: 24.w, height: 24.h, ), ], ), ), ], ), Container( margin: EdgeInsets.only(bottom: 20.h), 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.w, height: 44.h, ), clipBehavior: Clip.hardEdge, ), SizedBox( width: 8.w, ), Expanded( child: Container( height: 60.h, child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text.rich( TextSpan(children: [ TextSpan( text: "百花谷", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 14.sp, 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.sp, color: Color(0xff808080), ), ), Text( "播放次数 56", overflow: TextOverflow.ellipsis, maxLines: 2, style: TextStyle( fontSize: 12.sp, color: Color(0xff808080), ), ), ], ), ], ), ), flex: 1, ) ], ), SizedBox( height: 20.h, ), Text("牡丹花的养护知识", style: TextStyle( fontSize: 24.sp, 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.sp, fontWeight: FontWeight.bold, color: Color(0xff1A1A1A))), ), SizedBox( height: 500.h, child: ListView.builder( itemCount: 6, scrollDirection: Axis.vertical, physics: BouncingScrollPhysics(), itemBuilder: (context, position) { return _commentItem(position); }, ), ), // _commentItem() ], ), ), SizedBox( height: 12.h, ), 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.sp, color: Color(0xffCDCCCC), ), ), ), ), ], ), ), ), Padding( padding: EdgeInsets.only(left: 20.w, right: 20.w), child: Text( "发送", style: TextStyle( fontSize: 16.sp, fontWeight: FontWeight.bold, color: Color(0XFF1A1A1A)), ), ), Image.asset("assets/image/icon_like_h.webp") ], ), ), ], ), ), ), ); } 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.w, height: 40.h, ), clipBehavior: Clip.hardEdge, ), SizedBox( width: 12.w, ), 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.sp, color: Colors.black), ), ]), textDirection: TextDirection.ltr, ), Text( "2021.04.12 12:12", overflow: TextOverflow.ellipsis, maxLines: 2, style: TextStyle( fontSize: 12.sp, color: Color(0xff808080), ), ), ], ), ), flex: 1, ), Container( alignment: Alignment.topRight, child: Row( children: [ Image.asset( "assets/image/icon_like.webp", width: 16.w, height: 16.h, ), Text( "58", style: TextStyle(fontSize: 12.sp, color: Color(0xff1A1A1A)), ), ], ), ), ], ), ), Padding( padding: EdgeInsets.only(left: 68.w, right: 16.w), child: Text( "文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义（Mess…", style: TextStyle(fontSize: 14.sp, color: Color(0xff1A1A1A)), ), ), SizedBox( height: 12.h, ), Container( width: double.infinity, margin: EdgeInsets.only(left: 68.w, right: 16.w), decoration: new BoxDecoration( color: Color(0xffF2F2F2), borderRadius: BorderRadius.circular(2.0), ), child: Padding( padding: EdgeInsets.only(left: 4.w, top: 4.h, bottom: 4.h), child: Text( "文本，是指书面语言的表现形式文本，是指、", style: TextStyle(fontSize: 12.sp, color: Color(0xff808080)), ), ), ), if (position == 5) Container( height: 63.h, 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.h), alignment: Alignment.center, child: Text( "-已显示全部评论-", style: TextStyle(fontSize: 14.sp, color: Color(0xff353535)), ), ), ], ), ); } }