+529
@@ -0,0 +1,529 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_map/flutter_map.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:latlong2/latlong.dart';
|
||||
import '../../../utils/kr_fm_tc.dart';
|
||||
import '../controllers/kr_home_controller.dart';
|
||||
import '../../../utils/kr_log_util.dart';
|
||||
|
||||
/// 首页地图视图组件
|
||||
class KRHomeMapView extends GetView<KRHomeController> {
|
||||
const KRHomeMapView({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// 初始化地图缓存
|
||||
//KRFMTC.kr_initMapCache();
|
||||
return GetBuilder<KRHomeController>(
|
||||
id: 'map_markers', // ① 指定唯一ID
|
||||
builder: (controller) {
|
||||
return FlutterMap(
|
||||
mapController: controller.kr_mapController,
|
||||
options: MapOptions(
|
||||
initialCenter: _kr_getInitialMapCenter(),
|
||||
initialZoom: 2.0,
|
||||
minZoom: 2,
|
||||
maxZoom: 5,
|
||||
initialRotation: 0,
|
||||
backgroundColor: Theme.of(context).primaryColor,
|
||||
onMapEvent: (event) {
|
||||
try {
|
||||
if (event is MapEventMoveEnd) {
|
||||
if (event.source == MapEventSource.dragEnd ||
|
||||
event.source == MapEventSource.multiFingerEnd) {
|
||||
|
||||
controller.kr_isUserMoving.value = true;
|
||||
// 地图移动结束后刷新标记
|
||||
controller.showMarkersMap();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
KRLogUtil.kr_e('地图事件处理失败: $e', tag: 'HomeMapView');
|
||||
}
|
||||
},
|
||||
keepAlive: true,
|
||||
interactionOptions: InteractionOptions(
|
||||
enableMultiFingerGestureRace: true,
|
||||
flags: InteractiveFlag.all & ~InteractiveFlag.rotate,
|
||||
),
|
||||
),
|
||||
children: [
|
||||
_kr_buildTileLayer(context),
|
||||
_kr_buildMarkers(context),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
}
|
||||
/// 构建地图瓦片层
|
||||
Widget _kr_buildTileLayer(BuildContext context) {
|
||||
return TileLayer(
|
||||
tileProvider: AssetTileProvider(),
|
||||
urlTemplate: KRFMTC.kr_getTileUrl(),
|
||||
subdomains: KRFMTC.kr_getTileSubdomains(),
|
||||
userAgentPackageName: 'app.baertw123.com',//app.brAccelerator.com
|
||||
/* tileProvider: KRFMTC.kr_getTileProvider(),*/
|
||||
tileBuilder: (context, child, tileImage) {
|
||||
return child;
|
||||
},
|
||||
);
|
||||
}
|
||||
MarkerLayer _kr_buildMarkers(BuildContext content){
|
||||
int zoom = 2;
|
||||
try {
|
||||
zoom = controller.kr_mapController.camera.zoom.toInt();
|
||||
} catch (e) {
|
||||
KRLogUtil.kr_e('获取地图缩放级别失败: $e', tag: 'HomeMapView');
|
||||
}
|
||||
|
||||
// 详细调试信息
|
||||
KRLogUtil.kr_i('========== 地图标记调试信息 ==========', tag: 'HomeMapView');
|
||||
KRLogUtil.kr_i('当前地图缩放级别: $zoom', tag: 'HomeMapView');
|
||||
KRLogUtil.kr_i('节点总数: ${controller.kr_subscribeService.allList.length}', tag: 'HomeMapView');
|
||||
KRLogUtil.kr_i('国家分组数: ${controller.kr_subscribeService.countryOutboundList.length}', tag: 'HomeMapView');
|
||||
|
||||
// 根据缩放级别显示不同的标记
|
||||
if (zoom < 5) {
|
||||
// 低缩放级别:显示国家级聚合标记
|
||||
KRLogUtil.kr_i('使用国家聚合模式,显示 ${controller.kr_subscribeService.countryOutboundList.length} 个国家标记', tag: 'HomeMapView');
|
||||
|
||||
// 打印前3个国家的信息
|
||||
for (int i = 0; i < 3 && i < controller.kr_subscribeService.countryOutboundList.length; i++) {
|
||||
final country = controller.kr_subscribeService.countryOutboundList[i];
|
||||
KRLogUtil.kr_i('国家[$i]: ${country.country}, 节点数: ${country.outboundList.length}', tag: 'HomeMapView');
|
||||
}
|
||||
|
||||
return MarkerLayer(
|
||||
markers: controller.kr_subscribeService.countryOutboundList
|
||||
.map((item) => _buildStyledProvMarker(item))
|
||||
.toList(),
|
||||
);
|
||||
} else {
|
||||
// 高缩放级别:显示单个节点标记
|
||||
KRLogUtil.kr_i('使用单节点模式,显示 ${controller.kr_subscribeService.allList.length} 个节点标记', tag: 'HomeMapView');
|
||||
|
||||
// 打印前3个节点的信息
|
||||
for (int i = 0; i < 3 && i < controller.kr_subscribeService.allList.length; i++) {
|
||||
final node = controller.kr_subscribeService.allList[i];
|
||||
KRLogUtil.kr_i('节点[$i]: ${node.tag}, 位置: (${node.latitude}, ${node.longitude})', tag: 'HomeMapView');
|
||||
}
|
||||
|
||||
return MarkerLayer(
|
||||
markers: controller.kr_subscribeService.allList
|
||||
.map((item) => _buildStyledMarker(item))
|
||||
.toList(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 构建国家级聚合标记
|
||||
Marker _buildStyledProvMarker(dynamic node) {
|
||||
double z = controller.kr_mapController.camera.zoom;
|
||||
double lat = 0.0;
|
||||
double lng = 0.0;
|
||||
String id = "";
|
||||
int len = -1;
|
||||
|
||||
if (node.outboundList.isNotEmpty) {
|
||||
var f = node.outboundList.first;
|
||||
len = node.outboundList.length;
|
||||
id = f.id;
|
||||
lat = f.latitudeCountry;
|
||||
lng = f.longitudeCountry;
|
||||
|
||||
KRLogUtil.kr_i('构建国家标记: ${f.country}', tag: 'HomeMapView');
|
||||
KRLogUtil.kr_i(' - latitudeCountry: $lat', tag: 'HomeMapView');
|
||||
KRLogUtil.kr_i(' - longitudeCountry: $lng', tag: 'HomeMapView');
|
||||
KRLogUtil.kr_i(' - 节点latitude: ${f.latitude}', tag: 'HomeMapView');
|
||||
KRLogUtil.kr_i(' - 节点longitude: ${f.longitude}', tag: 'HomeMapView');
|
||||
KRLogUtil.kr_i(' - 节点数量: $len', tag: 'HomeMapView');
|
||||
|
||||
// 如果国家坐标为0,使用节点坐标
|
||||
if (lat == 0.0 && lng == 0.0) {
|
||||
lat = f.latitude;
|
||||
lng = f.longitude;
|
||||
KRLogUtil.kr_w('国家坐标为0,使用节点坐标: ($lat, $lng)', tag: 'HomeMapView');
|
||||
}
|
||||
}
|
||||
|
||||
double fontSize = 8;
|
||||
double radius = 0 + len * 10 + z * 10;
|
||||
double radius2 = 20;
|
||||
|
||||
if (z < 3) {
|
||||
fontSize = 8;
|
||||
radius = 0 + len * 10 + z * 10;
|
||||
radius2 = 15;
|
||||
} else if (z < 4) {
|
||||
fontSize = 8;
|
||||
radius = 30 + len * 10 + z * 10;
|
||||
radius2 = 20;
|
||||
} else if (z < 5) {
|
||||
fontSize = 10;
|
||||
radius = 70 + len * 10 + z * 10;
|
||||
radius2 = 20;
|
||||
} else if (z < 6) {
|
||||
fontSize = 12;
|
||||
radius = 100 + len * 10 + z * 10;
|
||||
radius2 = 30;
|
||||
}
|
||||
|
||||
return Marker(
|
||||
key: ValueKey('country_$id'),
|
||||
point: LatLng(lat, lng),
|
||||
width: radius,
|
||||
height: radius,
|
||||
child: GestureDetector(
|
||||
onTap: () {
|
||||
// 点击国家标记时,放大地图到该位置
|
||||
KRLogUtil.kr_i('点击国家标记,放大到: lat=$lat lng=$lng', tag: 'HomeMapView');
|
||||
controller.kr_moveToLocation(LatLng(lat, lng), 5.0);
|
||||
},
|
||||
child: _buildDoubleCircle(radius, radius2, Colors.blue, len, fontSize),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// 构建样式化的标记
|
||||
Marker _buildStyledMarker(dynamic node) {
|
||||
print("原始Marker:${node}");
|
||||
int type = 0;
|
||||
MaterialColor markerColor = Colors.grey;
|
||||
//如果没订阅过,就是灰色
|
||||
bool status = controller.kr_isConnected.value;
|
||||
print("连接状态:$status");
|
||||
if(status){
|
||||
if (node.urlTestDelay.value == 0) {
|
||||
// 延迟为0时使用默认颜色
|
||||
type=0;
|
||||
markerColor = Colors.blue;
|
||||
} else if (node.urlTestDelay.value < 500) {
|
||||
// 延迟小于500ms显示绿色
|
||||
type=1;
|
||||
markerColor = Colors.green;
|
||||
} else if (node.urlTestDelay.value < 3000) {
|
||||
// 延迟小于3000ms显示黄色
|
||||
type=2;
|
||||
markerColor = Colors.yellow;
|
||||
} else if (node.urlTestDelay.value > 3000 ){
|
||||
// 超时显示红色
|
||||
type=3;
|
||||
markerColor = Colors.red;
|
||||
}
|
||||
}else{
|
||||
type=4;
|
||||
markerColor = Colors.blue;
|
||||
}
|
||||
|
||||
if(node.selected==1){
|
||||
if(type==1||type==0){//只有绿色才有雷达效果
|
||||
return RadarMarker(
|
||||
key: ValueKey('key_${node.id}'),
|
||||
point: LatLng(node.latitude, node.longitude),
|
||||
radarSize1:75,
|
||||
radarSize2:37,
|
||||
radarSize3: 25.0,
|
||||
innerColor: Colors.green,
|
||||
outerColor: Colors.green,
|
||||
animationDuration: const Duration(seconds: 4),
|
||||
onTap: () => _onMarkerTap(node),
|
||||
).toMarker();
|
||||
}else{ //蓝色. 灰色 黄色
|
||||
return Marker(
|
||||
key: ValueKey('key_${node.id}'),
|
||||
point: LatLng(node.latitude, node.longitude),
|
||||
width: 150,
|
||||
height: 150.0,
|
||||
child: GestureDetector(
|
||||
onTap: () => _onMarkerTap(node),
|
||||
child: _buildDoubleCircle(150,20, markerColor, -1,14),
|
||||
),
|
||||
);
|
||||
}
|
||||
}else{
|
||||
return Marker(
|
||||
key: ValueKey('key_${node.id}'),
|
||||
point: LatLng(node.latitude, node.longitude),
|
||||
width: 30.0,
|
||||
height: 30.0,
|
||||
child: GestureDetector(
|
||||
onTap: () => _onMarkerTap(node),
|
||||
child: _buildDoubleCircle(30,10, markerColor, -1,14),
|
||||
),
|
||||
);
|
||||
}
|
||||
/*
|
||||
return Marker(
|
||||
point: LatLng(node.latitude, node.longitude),
|
||||
width: 42.w,
|
||||
height: 34.w,
|
||||
child: GetBuilder<KRHomeController>(
|
||||
id: node.tag,
|
||||
builder: (controller) {
|
||||
// 确定颜色
|
||||
Color? markerColor;
|
||||
if (node.urlTestDelay.value == 0) {
|
||||
// 延迟为0时使用默认颜色
|
||||
markerColor = null;
|
||||
} else if (node.urlTestDelay.value < 500) {
|
||||
// 延迟小于500ms显示绿色
|
||||
markerColor = const Color(0xFF00E52B).withOpacity(0.7);
|
||||
} else if (node.urlTestDelay.value < 3000) {
|
||||
// 延迟小于3000ms显示黄色
|
||||
markerColor = Colors.yellow;
|
||||
} else {
|
||||
// 超时显示红色
|
||||
markerColor = Colors.red;
|
||||
}
|
||||
|
||||
return KrLocalImage(
|
||||
imageName: "location",
|
||||
width: 42.w,
|
||||
height: 34.w,
|
||||
color: markerColor,
|
||||
);
|
||||
},
|
||||
),
|
||||
);*/
|
||||
}
|
||||
|
||||
/// 处理标记点击事件
|
||||
void _onMarkerTap(dynamic node) {
|
||||
try {
|
||||
KRLogUtil.kr_i('点击节点: ${node.tag}', tag: 'HomeMapView');
|
||||
|
||||
// 选择该节点
|
||||
controller.kr_selectNode(node.tag);
|
||||
|
||||
// 如果有底部面板控制器,将面板收起到 30% 高度
|
||||
if (controller.kr_sheetController.isAttached) {
|
||||
controller.kr_sheetController.animateTo(
|
||||
0.3,
|
||||
duration: const Duration(milliseconds: 300),
|
||||
curve: Curves.easeOut,
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
KRLogUtil.kr_e('处理标记点击失败: $e', tag: 'HomeMapView');
|
||||
}
|
||||
}
|
||||
|
||||
/// 获取初始地图中心点
|
||||
LatLng _kr_getInitialMapCenter() {
|
||||
if (controller.kr_isUserMoving.value) {
|
||||
return controller.kr_lastMapCenter.value;
|
||||
}
|
||||
|
||||
if (controller.kr_cutSeletedTag.isEmpty) {
|
||||
return const LatLng(5.0, 105.0); // 修改默认位置为中国中部
|
||||
}
|
||||
|
||||
final selectedNode = controller.kr_subscribeService.allList
|
||||
.firstWhereOrNull((item) => item.tag == controller.kr_cutSeletedTag.value);
|
||||
if (selectedNode == null) {
|
||||
return const LatLng(5.0, 105.0); // 修改默认位置为中国中部35
|
||||
}
|
||||
|
||||
//更新当前数据为选中
|
||||
// controller.kr_subscribeService.allList[index].selected = 1;
|
||||
// controller.selectMarkersMap(index);
|
||||
|
||||
// 更新最后的地图中心点
|
||||
controller.kr_lastMapCenter.value =
|
||||
LatLng(selectedNode.latitude, selectedNode.longitude);
|
||||
return controller.kr_lastMapCenter.value;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 构建双层圆形标记
|
||||
Widget _buildDoubleCircle(double circleW1,double circleW2,MaterialColor markerColor, int num,double fontSize) {
|
||||
|
||||
return Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
// 外圈(淡蓝色,50%透明度)
|
||||
Container(
|
||||
width: circleW1,
|
||||
height: circleW1,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color:markerColor.withOpacity(0.2), // 淡蓝色,50%透明度
|
||||
),
|
||||
),
|
||||
// 内圈(蓝色,0%透明度)
|
||||
Container(
|
||||
width: circleW2,
|
||||
height: circleW2,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: markerColor, // 蓝色,0%透明度(完全不透明)
|
||||
),
|
||||
),
|
||||
// 中心数字文本
|
||||
Text(
|
||||
(num==-1)?' ':'$num',
|
||||
style: TextStyle(
|
||||
fontSize: fontSize,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.white, // 白色文字
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
class RadarMarker extends StatefulWidget {
|
||||
final LatLng point;
|
||||
final double radarSize1;
|
||||
final double radarSize2;
|
||||
final double radarSize3;
|
||||
final Color innerColor;
|
||||
final Color outerColor;
|
||||
final Duration animationDuration;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const RadarMarker({
|
||||
super.key,
|
||||
required this.point,
|
||||
this.radarSize1 = 120,
|
||||
this.radarSize2 = 60,
|
||||
this.radarSize3 = 40,
|
||||
this.innerColor = Colors.blue,
|
||||
this.outerColor = Colors.blue,
|
||||
//this.animationDuration = const Duration(seconds: 1),
|
||||
this.animationDuration = const Duration(milliseconds: 500),
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
State<RadarMarker> createState() => _RadarMarkerState();
|
||||
}
|
||||
|
||||
class _RadarMarkerState extends State<RadarMarker>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late AnimationController _controller;
|
||||
late Animation<double> _scaleAnimation;
|
||||
late Animation<double> _opacityAnimation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
_controller = AnimationController(
|
||||
duration: widget.animationDuration,
|
||||
vsync: this,
|
||||
)..repeat();
|
||||
|
||||
_scaleAnimation = Tween<double>(begin: 1.0, end: 2.5).animate(
|
||||
CurvedAnimation(parent: _controller, curve: Curves.easeOut),
|
||||
);
|
||||
|
||||
_opacityAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(
|
||||
CurvedAnimation(parent: _controller, curve: Curves.easeOut),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: widget.onTap,
|
||||
child: AnimatedBuilder(
|
||||
animation: _controller,
|
||||
builder: (context, child) {
|
||||
return Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
// 第一层外圈雷达波纹
|
||||
Transform.scale(
|
||||
scale: _scaleAnimation.value,
|
||||
child: Opacity(
|
||||
opacity: _opacityAnimation.value,
|
||||
child: Container(
|
||||
width: widget.radarSize1,
|
||||
height: widget.radarSize1,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: widget.outerColor.withOpacity(0.2),
|
||||
border: Border.all(
|
||||
color: widget.outerColor.withOpacity(0.2),
|
||||
width: 2.0,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// 第二层波纹
|
||||
Transform.scale(
|
||||
scale: _scaleAnimation.value * 0.7,
|
||||
child: Opacity(
|
||||
opacity: _opacityAnimation.value * 0.7,
|
||||
child: Container(
|
||||
width: widget.radarSize2,
|
||||
height: widget.radarSize2,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: widget.outerColor.withOpacity(0.3),
|
||||
border: Border.all(
|
||||
color: widget.outerColor.withOpacity(0.3),
|
||||
width: 1.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// 中心圆形
|
||||
Container(
|
||||
width: widget.radarSize3,
|
||||
height: widget.radarSize3,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: widget.innerColor,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: widget.innerColor.withOpacity(0.5),
|
||||
blurRadius: 10.0,
|
||||
spreadRadius: 2.0,
|
||||
),
|
||||
],
|
||||
border: Border.all(
|
||||
color: Colors.white,
|
||||
width: 2.0,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
extension RadarMarkerExtension on RadarMarker {
|
||||
Marker toMarker() {
|
||||
return Marker(
|
||||
point: point,
|
||||
width: radarSize1,
|
||||
height: radarSize1,
|
||||
child: this,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class AssetTileProvider extends TileProvider {
|
||||
@override
|
||||
ImageProvider getImage(TileCoordinates coords, TileLayer options) {
|
||||
// 构建assets路径:z/x/y.png
|
||||
final path = 'assets/map_tiles/${coords.z}/${coords.x}/${coords.y}.png';
|
||||
return AssetImage(path);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,275 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||
import 'package:kaer_with_panels/app/modules/kr_home/controllers/kr_home_controller.dart';
|
||||
import 'package:kaer_with_panels/app/model/response/kr_user_available_subscribe.dart';
|
||||
import 'package:kaer_with_panels/app/localization/app_translations.dart';
|
||||
import 'package:kaer_with_panels/app/widgets/kr_app_text_style.dart';
|
||||
|
||||
class KRSubscribeSelectorView extends StatelessWidget {
|
||||
final KRHomeController? controller;
|
||||
|
||||
const KRSubscribeSelectorView({
|
||||
super.key,
|
||||
this.controller,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final homeController = controller ?? Get.find<KRHomeController>();
|
||||
final isDarkMode = Theme.of(context).brightness == Brightness.dark;
|
||||
|
||||
return Container(
|
||||
width: MediaQuery.of(context).size.width * 0.85,
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).primaryColor,
|
||||
borderRadius: BorderRadius.circular(20.r),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.1),
|
||||
blurRadius: 10.r,
|
||||
offset: Offset(0, 2.w),
|
||||
spreadRadius: 0,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.w),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.blue.withOpacity(0.05),
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(20.r),
|
||||
topRight: Radius.circular(20.r),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
AppTranslations.kr_purchaseMembership.selectPackage,
|
||||
style: KrAppTextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Theme.of(context).textTheme.titleLarge?.color,
|
||||
),
|
||||
),
|
||||
Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: () => Navigator.pop(context),
|
||||
borderRadius: BorderRadius.circular(20.r),
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(4.w),
|
||||
child: Icon(
|
||||
Icons.close_rounded,
|
||||
color: Theme.of(context).textTheme.bodyLarge?.color?.withOpacity(0.6),
|
||||
size: 18.w,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Obx(() {
|
||||
final subscribes = homeController.kr_subscribeService.kr_availableSubscribes;
|
||||
if (subscribes.isEmpty) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 16.w, horizontal: 12.w),
|
||||
child: Column(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.subscriptions_outlined,
|
||||
size: 48.w,
|
||||
color: Theme.of(context).textTheme.bodyLarge?.color?.withOpacity(0.3),
|
||||
),
|
||||
SizedBox(height: 12.w),
|
||||
Text(
|
||||
AppTranslations.kr_purchaseMembership.noData,
|
||||
style: KrAppTextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Theme.of(context).textTheme.bodyLarge?.color?.withOpacity(0.5),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
return ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
maxHeight: MediaQuery.of(context).size.height * 0.5,
|
||||
),
|
||||
child: ListView.builder(
|
||||
shrinkWrap: true,
|
||||
padding: EdgeInsets.symmetric(vertical: 4.w, horizontal: 4.w),
|
||||
itemCount: subscribes.length,
|
||||
itemBuilder: (context, index) {
|
||||
final subscribe = subscribes[index];
|
||||
final isCurrent = subscribe.id == homeController.kr_subscribeService.kr_currentSubscribe.value?.id;
|
||||
|
||||
return _SubscribeItem(
|
||||
subscribe: subscribe,
|
||||
isCurrent: isCurrent,
|
||||
onTap: () {
|
||||
homeController.kr_switchSubscribe(subscribe);
|
||||
Get.back();
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}),
|
||||
SizedBox(height: 8.w),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SubscribeItem extends StatelessWidget {
|
||||
final KRUserAvailableSubscribeItem subscribe;
|
||||
final bool isCurrent;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _SubscribeItem({
|
||||
required this.subscribe,
|
||||
required this.isCurrent,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final usedTraffic = (subscribe.download + subscribe.upload) / 1024 / 1024 / 1024;
|
||||
final totalTraffic = subscribe.traffic / 1024 / 1024 / 1024;
|
||||
var percentage = totalTraffic > 0 ? usedTraffic / totalTraffic : 0.0;
|
||||
|
||||
final isDarkMode = Theme.of(context).brightness == Brightness.dark;
|
||||
final isUnlimited = subscribe.traffic == 0;
|
||||
|
||||
String getUsedTrafficDisplay() {
|
||||
if (usedTraffic < 1) {
|
||||
return '${(usedTraffic * 1024).toStringAsFixed(2)}MB';
|
||||
} else {
|
||||
return '${usedTraffic.toStringAsFixed(2)}GB';
|
||||
}
|
||||
}
|
||||
|
||||
return Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 2.w),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(12.r),
|
||||
child: Ink(
|
||||
padding: EdgeInsets.all(12.w),
|
||||
decoration: BoxDecoration(
|
||||
color: isCurrent
|
||||
? Colors.blue.withOpacity(isDarkMode ? 0.15 : 0.08)
|
||||
: Theme.of(context).cardColor,
|
||||
borderRadius: BorderRadius.circular(12.r),
|
||||
border: Border.all(
|
||||
color: isCurrent
|
||||
? Colors.blue.withOpacity(isDarkMode ? 0.5 : 0.3)
|
||||
: Theme.of(context).dividerColor.withOpacity(0.3),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
subscribe.name,
|
||||
style: KrAppTextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Theme.of(context).textTheme.titleLarge?.color,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
if (isCurrent)
|
||||
Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 2.w),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.blue,
|
||||
borderRadius: BorderRadius.circular(16.r),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.blue.withOpacity(0.2),
|
||||
blurRadius: 6.w,
|
||||
offset: Offset(0, 1.w),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Text(
|
||||
AppTranslations.kr_home.currentConnectionTitle,
|
||||
style: KrAppTextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(height: 8.w),
|
||||
Text(
|
||||
isUnlimited
|
||||
? AppTranslations.kr_purchaseMembership.unlimitedTraffic
|
||||
: '${getUsedTrafficDisplay()} / ${totalTraffic.toStringAsFixed(2)}GB',
|
||||
style: KrAppTextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Theme.of(context).textTheme.bodyMedium?.color?.withOpacity(0.8),
|
||||
),
|
||||
),
|
||||
if (!isUnlimited) ...[
|
||||
SizedBox(height: 8.w),
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(4.r),
|
||||
child: LinearProgressIndicator(
|
||||
value: percentage.clamp(0.0, 1.0),
|
||||
backgroundColor: isDarkMode
|
||||
? Colors.grey[700]?.withOpacity(0.7)
|
||||
: Colors.grey[300]?.withOpacity(0.9),
|
||||
valueColor: AlwaysStoppedAnimation<Color>(
|
||||
_getTrafficColor(percentage, isDarkMode),
|
||||
),
|
||||
minHeight: 4.w,
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Color _getTrafficColor(double percentage, bool isDarkMode) {
|
||||
if (percentage >= 0.9) {
|
||||
return isDarkMode
|
||||
? Colors.red.withOpacity(0.8)
|
||||
: Colors.red.withOpacity(0.7);
|
||||
} else if (percentage >= 0.7) {
|
||||
return isDarkMode
|
||||
? Colors.orange.withOpacity(0.8)
|
||||
: Colors.orange.withOpacity(0.7);
|
||||
} else {
|
||||
return isDarkMode
|
||||
? Colors.blue.withOpacity(0.8)
|
||||
: Colors.blue.withOpacity(0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||
import 'package:kaer_with_panels/app/localization/app_translations.dart';
|
||||
|
||||
import 'package:kaer_with_panels/app/routes/app_pages.dart';
|
||||
import 'package:kaer_with_panels/app/utils/kr_subscribe_navigation_util.dart';
|
||||
|
||||
import '../../../widgets/kr_app_text_style.dart';
|
||||
|
||||
/// 订阅卡片组件
|
||||
class KRSubscriptionCard extends StatelessWidget {
|
||||
const KRSubscriptionCard({
|
||||
super.key,
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return _kr_buildSubscriptionCard(context);
|
||||
}
|
||||
|
||||
// 构建订阅卡片
|
||||
Widget _kr_buildSubscriptionCard(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).cardColor,
|
||||
borderRadius: BorderRadius.circular(12.w),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
width: 44.w,
|
||||
height: 44.w,
|
||||
margin: EdgeInsets.only(top: 16.h),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.blue.withOpacity(0.1),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Icon(
|
||||
Icons.language,
|
||||
color: Colors.blue,
|
||||
size: 26.w,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 12.h),
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.w),
|
||||
child: Text(
|
||||
AppTranslations.kr_home.subscriptionDescription,
|
||||
textAlign: TextAlign.center,
|
||||
style: KrAppTextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: Theme.of(context).textTheme.bodyMedium?.color,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 16.h),
|
||||
Padding(
|
||||
padding: EdgeInsets.fromLTRB(16.w, 0, 16.w, 16.h),
|
||||
child: SizedBox(
|
||||
width: double.infinity,
|
||||
height: 42.h,
|
||||
child: ElevatedButton(
|
||||
onPressed: () => KRSubscribeNavigationUtil.navigateToPurchase(tag: 'SubscriptionCard'),
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: Colors.blue,
|
||||
elevation: 0,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8.r),
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
AppTranslations.kr_home.subscribe,
|
||||
style: KrAppTextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _kr_buildListContainer(
|
||||
BuildContext context, {
|
||||
required Widget child,
|
||||
EdgeInsetsGeometry? margin,
|
||||
bool addBottomPadding = true,
|
||||
}) {
|
||||
return Container(
|
||||
margin: margin ?? EdgeInsets.symmetric(horizontal: 16.w),
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).cardColor,
|
||||
borderRadius: BorderRadius.circular(12.w),
|
||||
),
|
||||
child: IntrinsicWidth(
|
||||
child: child,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user