liwei1dao
/
deepvoice_client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化交互效果

newdev_shunjiawei
tanlongsheng 1 year ago
parent
67054d70cc
commit
79f4e2e23b
1 changed files with 242 additions and 234 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 476
      lib/modules/meeting/views/meeting_details_view.dart

476
lib/modules/meeting/views/meeting_details_view.dart
View File

@ -67,98 +67,102 @@ class MeetingDetailsView extends GetView<MeetingDetailsController> {
), ),
onPressed: () => Get.back(), onPressed: () => Get.back(),
), ),
title: Opacity( title: Obx(
opacity: controller.isTop.value ? 1.0 : 0.0, () => Opacity(
child: Container( opacity: (1 - (controller.dragOffset.value / 100.w)).clamp(0.0, 1.0),
width: 170.w, child: Container(
padding: EdgeInsets.symmetric(horizontal: 2.w, vertical: 3.w), width: 170.w,
clipBehavior: Clip.hardEdge, padding: EdgeInsets.symmetric(horizontal: 2.w, vertical: 3.w),
decoration: BoxDecoration( clipBehavior: Clip.hardEdge,
color: Colors.grey[200], decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.r), color: Colors.grey[200],
), borderRadius: BorderRadius.circular(30.r),
child: Row( ),
children: [ child: Row(
GestureDetector( children: [
onTap: () { GestureDetector(
if (controller.meetingData.value.filepath.isEmpty) { onTap: () {
controller.downloadAudio(); if (controller.meetingData.value.filepath.isEmpty) {
} else { controller.downloadAudio();
if (controller.isPlay.value) {
controller.playerController.pausePlayer();
} else { } else {
controller.playerController.startPlayer(); if (controller.isPlay.value) {
controller.playerController.pausePlayer();
} else {
controller.playerController.startPlayer();
}
} }
} },
}, child: Obx(
child: Obx( () => !controller.isLoading.value &&
() => !controller.isLoading.value && controller.meetingData.value.filepath.isEmpty
controller.meetingData.value.filepath.isEmpty ? Obx(
? Obx( () => Stack(
() => Stack( alignment: Alignment.center,
alignment: Alignment.center, children: [
children: [ if (controller.isDownload.value)
if (controller.isDownload.value) SizedBox(
SizedBox( width: 26.w,
width: 26.w, height: 26.w,
height: 26.w, child: CircularProgressIndicator(
child: CircularProgressIndicator( value: controller.downloadProgress.value,
value: controller.downloadProgress.value, valueColor:
valueColor: const AlwaysStoppedAnimation<Color>(
const AlwaysStoppedAnimation<Color>( Colors.red),
Colors.red), strokeWidth: 2.w,
strokeWidth: 2.w, ),
), ),
Icon(
Icons.download_for_offline,
color: Colors.black,
size: 30.w,
), ),
Icon( ],
Icons.download_for_offline, ),
color: Colors.black, )
size: 30.w, : Icon(
), controller.isPlay.value
], ? Icons.pause_circle
: Icons.play_circle,
color: Colors.black,
size: 30.w,
), ),
) ),
: Icon(
controller.isPlay.value
? Icons.pause_circle
: Icons.play_circle,
color: Colors.black,
size: 30.w,
),
), ),
), 4.horizontalSpace,
4.horizontalSpace, GestureDetector(
GestureDetector( onTap: () {
onTap: () { if (controller.isSpeakerText.value) return;
if (controller.isSpeakerText.value) return; controller.dragOffset.value = 210.w;
controller.dragOffset.value = 210.w; controller.isTop.value = false;
controller.isTop.value = false; },
}, behavior: HitTestBehavior.translucent,
child: SizedBox( child: SizedBox(
width: 130.w, width: 130.w,
child: FittedBox( height: 30.w,
fit: BoxFit.scaleDown, child: FittedBox(
child: AudioFileWaveforms( fit: BoxFit.scaleDown,
size: Size(350.w, 30.w), child: AudioFileWaveforms(
playerController: controller.playerController, size: Size(350.w, 30.w),
waveformData: List.generate(88, (int index) { playerController: controller.playerController,
return 0.01 + Random().nextDouble() * 0.09; waveformData: List.generate(88, (int index) {
}), return 0.01 + Random().nextDouble() * 0.09;
waveformType: WaveformType.fitWidth, }),
enableSeekGesture: false, waveformType: WaveformType.fitWidth,
playerWaveStyle: PlayerWaveStyle( enableSeekGesture: false,
spacing: 4.w, playerWaveStyle: PlayerWaveStyle(
waveThickness: 2.w, spacing: 4.w,
fixedWaveColor: Colors.grey[400]!, waveThickness: 2.w,
liveWaveColor: Colors.red, fixedWaveColor: Colors.grey[400]!,
seekLineColor: Colors.red, liveWaveColor: Colors.red,
scaleFactor: 200, seekLineColor: Colors.red,
scaleFactor: 200,
),
), ),
), ),
), ),
), ),
), ],
], ),
), ),
), ),
), ),
@ -373,176 +377,180 @@ class MeetingDetailsView extends GetView<MeetingDetailsController> {
Widget _soundWave(bool isDarkMode) { Widget _soundWave(bool isDarkMode) {
return Obx( return Obx(
() => SizedBox( () => Opacity(
height: controller.dragOffset.value < 0 opacity: (controller.dragOffset.value / 210.w).clamp(0.0, 1.0),
? 0 child: SizedBox(
: controller.dragOffset.value > 210.w height: controller.dragOffset.value < 0
? 210.w ? 0
: controller.dragOffset.value, : controller.dragOffset.value > 210.w
child: Stack( ? 210.w
children: [ : controller.dragOffset.value,
Positioned( child: Stack(
bottom: 0, children: [
child: Container( Positioned(
width: 1.sw, bottom: 0,
height: 200.w, child: Container(
margin: EdgeInsets.only(bottom: 10.w), width: 1.sw,
decoration: BoxDecoration( height: 200.w,
color: Colors.grey[200]!, margin: EdgeInsets.only(bottom: 10.w),
borderRadius: BorderRadius.vertical( decoration: BoxDecoration(
bottom: Radius.circular(20.r), color: Colors.grey[200]!,
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(20.r),
),
), ),
), child: Column(
child: Column( children: [
children: [ Container(
Container( margin: EdgeInsets.only(bottom: 5.w),
margin: EdgeInsets.only(bottom: 5.w), decoration: BoxDecoration(
decoration: BoxDecoration( color: Colors.white,
color: Colors.white, borderRadius: BorderRadius.circular(8.r),
borderRadius: BorderRadius.circular(8.r), ),
), child: AudioFileWaveforms(
child: AudioFileWaveforms( size: Size(350.w, 120.w),
size: Size(350.w, 120.w), playerController: controller.playerController,
playerController: controller.playerController, waveformData: List.generate(88, (int index) {
waveformData: List.generate(88, (int index) { return 0.01 + Random().nextDouble() * 0.09;
return 0.01 + Random().nextDouble() * 0.09; }),
}), waveformType: WaveformType.fitWidth,
waveformType: WaveformType.fitWidth, playerWaveStyle: PlayerWaveStyle(
playerWaveStyle: PlayerWaveStyle( spacing: 4.w,
spacing: 4.w, waveThickness: 2.w,
waveThickness: 2.w, fixedWaveColor: Colors.grey[300]!,
fixedWaveColor: Colors.grey[300]!, liveWaveColor: Colors.red,
liveWaveColor: Colors.red, seekLineColor: Colors.red,
seekLineColor: Colors.red, scaleFactor: 600,
scaleFactor: 600, ),
), ),
), ),
), SizedBox(
SizedBox( width: 350.w,
width: 350.w, child: Row(
child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
children: [ Obx(
Obx( () => Text(
() => Text( DateUtil.formatDateMs(
DateUtil.formatDateMs( controller.currentDuration.value,
controller.currentDuration.value, format: 'HH:mm:ss',
format: 'HH:mm:ss', isUtc: true,
isUtc: true, ),
), style: TextStyle(
style: TextStyle( color: isDarkMode
color: isDarkMode ? Colors.grey[400]
? Colors.grey[400] : Colors.grey[500],
: Colors.grey[500], fontSize: 12.sp,
fontSize: 12.sp, ),
), ),
), ),
), Obx(
Obx( () => Text(
() => Text( DateUtil.formatDateMs(
DateUtil.formatDateMs( controller.durationMax.value,
controller.durationMax.value, format: 'HH:mm:ss',
format: 'HH:mm:ss', isUtc: true,
isUtc: true, ),
), style: TextStyle(
style: TextStyle( color: isDarkMode
color: isDarkMode ? Colors.grey[400]
? Colors.grey[400] : Colors.grey[500],
: Colors.grey[500], fontSize: 12.sp,
fontSize: 12.sp, ),
), ),
), ),
), ],
], ),
), ),
), Row(
Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
children: [ GestureDetector(
GestureDetector( onTap: () {
onTap: () { int progress =
int progress = controller.currentDuration.value - 10000;
controller.currentDuration.value - 10000; if (progress < 0) {
if (progress < 0) { progress = 0;
progress = 0; }
} controller.playerController.seekTo(progress);
controller.playerController.seekTo(progress); },
}, child: Icon(
child: Icon( Icons.replay_10,
Icons.replay_10, color: Colors.black,
color: Colors.black, size: 30.w,
size: 30.w, ),
), ),
), GestureDetector(
GestureDetector( onTap: () {
onTap: () { if (controller
if (controller.meetingData.value.filepath.isEmpty) { .meetingData.value.filepath.isEmpty) {
controller.downloadAudio(); controller.downloadAudio();
} else {
if (controller.isPlay.value) {
controller.playerController.pausePlayer();
} else { } else {
controller.playerController.startPlayer(); if (controller.isPlay.value) {
controller.playerController.pausePlayer();
} else {
controller.playerController.startPlayer();
}
} }
} },
}, child: Obx(
child: Obx( () => !controller.isLoading.value &&
() => !controller.isLoading.value && controller
controller .meetingData.value.filepath.isEmpty
.meetingData.value.filepath.isEmpty ? Obx(
? Obx( () => Stack(
() => Stack( alignment: Alignment.center,
alignment: Alignment.center, children: [
children: [ if (controller.isDownload.value)
if (controller.isDownload.value) SizedBox(
SizedBox( width: 42.w,
width: 42.w, height: 42.w,
height: 42.w, child: CircularProgressIndicator(
child: CircularProgressIndicator( value: controller
value: controller .downloadProgress.value,
.downloadProgress.value, valueColor:
valueColor: const AlwaysStoppedAnimation<
const AlwaysStoppedAnimation< Color>(Colors.red),
Color>(Colors.red), strokeWidth: 3.w,
strokeWidth: 3.w, ),
), ),
Icon(
Icons.download_for_offline,
color: Colors.black,
size: 48.w,
), ),
Icon( ],
Icons.download_for_offline, ),
color: Colors.black, )
size: 48.w, : Icon(
), controller.isPlay.value
], ? Icons.pause_circle
: Icons.play_circle,
color: Colors.black,
size: 48.w,
), ),
) ),
: Icon(
controller.isPlay.value
? Icons.pause_circle
: Icons.play_circle,
color: Colors.black,
size: 48.w,
),
), ),
), GestureDetector(
GestureDetector( onTap: () {
onTap: () { int progress =
int progress = controller.currentDuration.value + 10000;
controller.currentDuration.value + 10000; controller.playerController.seekTo(progress);
controller.playerController.seekTo(progress); },
}, child: Icon(
child: Icon( Icons.forward_10,
Icons.forward_10, color: Colors.black,
color: Colors.black, size: 30.w,
size: 30.w, ),
), ),
), ],
], ),
), ],
], ),
), ),
), ),
), ],
], ),
), ),
), ),
); );

Write Preview
Loading…
Cancel
Save