Translate-Flutter/lib/page/scene_list/scene_list_view.dart
fengshengxiong 70d663706c 第一版
2024-07-12 11:26:44 +08:00

177 lines
5.7 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:trans_lark/entity/scene_entity.dart';
import 'package:trans_lark/generated/assets.dart';
import 'package:trans_lark/widget/base_appbar.dart';
import 'package:trans_lark/widget/base_scrollbar.dart';
import 'package:trans_lark/widget/language_scene_bar.dart';
import 'scene_list_controller.dart';
class SceneListView extends StatelessWidget {
SceneListView({super.key});
final controller = Get.find<SceneListController>();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xffF5F6F8),
appBar: BaseAppBar(
titleWidget: LanguageSceneBar(
fromLanguage: controller.fromLanguage,
toLanguage: controller.toLanguage,
onTapFrom: controller.onTapFrom,
onTapTo: controller.onTapTo,
),
),
body: SafeArea(
top: false,
child: Column(
children: [
Expanded(
child: BaseScrollbar(
child: ListView.separated(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
itemCount: controller.sceneList.length,
itemBuilder: (context, index) {
var item = controller.sceneList[index];
return _buildItem(item);
},
separatorBuilder: (context, index) {
return const SizedBox(height: 12);
},
),
),
),
],
),
),
);
}
Widget _buildItem(SceneList item) {
return Container(
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
child: Column(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Obx(() {
return Text(
controller.fromLanguage.value.languageName,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: Color(0xffC2C3C5),
fontSize: 12,
fontWeight: FontWeight.w500,
),
);
}),
const SizedBox(height: 8),
Row(
children: [
Expanded(
child: Obx(() {
return Text(
controller.getSentence(true, item),
style: const TextStyle(
color: Color(0xff152A3D),
fontSize: 16,
fontWeight: FontWeight.w500,
),
);
}),
),
GestureDetector(
onTap: () => controller.translatorTtsPlay(true, item),
child: ClipOval(
child: Container(
width: 24,
height: 24,
color: const Color(0xff4ECA8C).withOpacity(0.2),
child: FittedBox(
fit: BoxFit.none,
child: SvgPicture.asset(
Assets.svgSpeaker,
width: 16,
height: 16,
),
),
),
),
),
],
),
const SizedBox(height: 20),
],
),
Container(
width: double.infinity,
height: 1,
color: const Color(0xffF4F4F4),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 20),
Obx(() {
return Text(
controller.toLanguage.value.languageName,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: Color(0xffC2C3C5),
fontSize: 12,
fontWeight: FontWeight.w500,
),
);
}),
const SizedBox(height: 8),
Row(
children: [
Expanded(
child: Obx(() {
return Text(
controller.getSentence(false, item),
style: const TextStyle(
color: Color(0xff152A3D),
fontSize: 16,
fontWeight: FontWeight.w500,
),
);
}),
),
GestureDetector(
onTap: () => controller.translatorTtsPlay(false, item),
child: ClipOval(
child: Container(
width: 24,
height: 24,
color: const Color(0xff4ECA8C).withOpacity(0.2),
child: FittedBox(
fit: BoxFit.none,
child: SvgPicture.asset(
Assets.svgSpeaker,
width: 16,
height: 16,
),
),
),
),
),
],
),
],
),
],
),
);
}
}