wangyang
/
yx_net_inspector_flutter
1
0
Fork 0
Code Pull Requests Actions Releases Activity

feat: 修复状态栏高度问题并优化UI布局 

- 修复全屏模式下状态栏高度处理问题，使用SafeArea避免内容被遮挡
- 优化检查器面板UI布局，重新排列状态指示器和方法标签位置
- 清理代码，移除注释掉的无用代码
- 改进代码格式化和可读性
- 修复lint警告，确保代码质量
This commit is contained in:
YuanXuan 2025-10-13 16:40:19 +08:00
parent 6993e805cb
commit a8da68c0e3
7 changed files with 200 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/lib/pages/demo_page.dart
View File

@ -288,7 +288,6 @@ class _DemoPageState extends State<DemoPage> {
style: TextStyle(
fontSize: 12,
color: Colors.grey[600],
fontFamily: 'monospace',
),
overflow: TextOverflow.ellipsis,
),

2
example/lib/pages/dio_demo_page.dart
View File

@ -145,7 +145,6 @@ class _DioDemoPageState extends State<DioDemoPage> {
child: const Text(
'dependencies:\n dio: ^5.3.0',
style: TextStyle(
fontFamily: 'monospace',
fontSize: 13,
),
),
@ -211,7 +210,6 @@ dio.interceptors.add(YxNetInspectorDioInterceptor());
// 现在所有通过这个 Dio 实例的请求都会被自动记录
final response = await dio.get('https://api.example.com/users');''',
style: TextStyle(
fontFamily: 'monospace',
fontSize: 12,
height: 1.4,
),

2
example/pubspec.lock
View File

@ -238,7 +238,7 @@ packages:
path: ".."
relative: true
source: path
version: "1.0.0"
version: "1.0.2"
sdks:
dart: ">=3.7.0-0 <4.0.0"
flutter: ">=3.18.0-18.0.pre.54"

13
lib/src/models/network_log_entry.dart
View File

@ -102,8 +102,8 @@ class NetworkLogEntry {
String get formattedDuration {
if (duration == null) return '未知';
final ms = duration!.inMilliseconds;
if (ms < 1000) return '${ms}毫秒';
return '${(ms / 1000).toStringAsFixed(1)}秒';
if (ms < 1000) return '${ms} ms';
return '${(ms / 1000).toStringAsFixed(1)} s';
}
/// 获取显示URL（隐藏主机名简化显示）
@ -116,6 +116,15 @@ class NetworkLogEntry {
}
}
String get hostUrl {
try {
final uri = Uri.parse(url);
return '${uri.host}';
} catch (e) {
return url;
}
}
/// 创建副本并更新字段
NetworkLogEntry copyWith({
String? id,

200
lib/src/widgets/inspector_panel.dart
View File

@ -103,15 +103,17 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
}
if (_isFullScreen) {
// 全屏模式
// 全屏模式 - 考虑状态栏高度
return Material(
color: Colors.black.withValues(alpha: 0.5),
child: SafeArea(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
height: double.infinity,
color: widget.theme.backgroundColor,
child: content,
),
),
);
} else {
// 对话框模式
@ -133,43 +135,7 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
}
Widget _buildDetailHeader() {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: widget.theme.primaryColor,
borderRadius: _isFullScreen
? BorderRadius.zero
: const BorderRadius.only(
topLeft: Radius.circular(16),
topRight: Radius.circular(16),
),
),
child: Row(
children: [
IconButton(
onPressed: _hideLogDetail,
icon: const Icon(
Icons.arrow_back,
color: Colors.white,
),
tooltip: '返回列表',
),
const SizedBox(width: 8),
const Icon(
Icons.article_outlined,
color: Colors.white,
size: 24,
),
const SizedBox(width: 8),
const Text(
'请求详情',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const Spacer(),
final actions = [
IconButton(
onPressed: () => _copyLogDetails(_selectedLog!),
icon: const Icon(
@ -197,13 +163,25 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
),
tooltip: '关闭',
),
],
),
);
}
];
Widget _buildHeader() {
return Container(
return _isFullScreen
? AppBar(
title: Text('请求详情'),
backgroundColor: widget.theme.primaryColor,
foregroundColor: Colors.white,
// excludeHeaderSemantics: false
leading: IconButton(
onPressed: _hideLogDetail,
icon: const Icon(
Icons.arrow_back,
color: Colors.white,
),
),
centerTitle: false,
actions: actions,
)
: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: widget.theme.primaryColor,
@ -216,10 +194,16 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
),
child: Row(
children: [
const Icon(Icons.network_check, color: Colors.white, size: 24),
const SizedBox(width: 8),
IconButton(
onPressed: _hideLogDetail,
icon: const Icon(
Icons.arrow_back,
color: Colors.white,
),
tooltip: '返回列表',
),
const Text(
'网络检查器',
'请求详情',
style: TextStyle(
color: Colors.white,
fontSize: 18,
@ -227,6 +211,14 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
),
),
const Spacer(),
...actions
],
),
);
}
Widget _buildHeader() {
final actions = [
IconButton(
onPressed: () {
setState(() {
@ -250,6 +242,40 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
onPressed: widget.onClose,
icon: const Icon(Icons.close, color: Colors.white),
),
];
return _isFullScreen
? AppBar(
title: Text('网络检查器'),
backgroundColor: widget.theme.primaryColor,
foregroundColor: Colors.white,
centerTitle: false,
actions: actions,
)
: Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
decoration: BoxDecoration(
color: widget.theme.primaryColor,
borderRadius: _isFullScreen
? BorderRadius.zero
: const BorderRadius.only(
topLeft: Radius.circular(16),
topRight: Radius.circular(16),
),
),
child: Row(
children: [
const Icon(Icons.network_check, color: Colors.white, size: 24),
const SizedBox(width: 8),
const Text(
'网络检查器',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const Spacer(),
...actions
],
),
);
@ -429,35 +455,6 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
child: Row(
children: [
// 状态指示器
Container(
width: 6,
height: 6,
decoration: BoxDecoration(
color: log.statusColor,
shape: BoxShape.circle,
),
),
const SizedBox(width: 8),
// 方法标签
Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: _getMethodColor(log.method).withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(4),
),
child: Text(
log.method,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: _getMethodColor(log.method),
),
),
),
const SizedBox(width: 8),
// URL和状态
Expanded(
child: Column(
@ -476,8 +473,39 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
const SizedBox(height: 2),
Row(
children: [
// 状态指示器
Container(
width: 6,
height: 6,
decoration: BoxDecoration(
color: log.statusColor,
shape: BoxShape.circle,
),
),
const SizedBox(width: 8),
// 方法标签
Container(
padding: const EdgeInsets.symmetric(
horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: _getMethodColor(log.method)
.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(4),
),
child: Text(
log.method,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: _getMethodColor(log.method),
),
),
),
const SizedBox(width: 8),
Text(
'${log.statusCode ?? "?"} • ${log.formattedDuration}',
'${log.statusCode ?? "?"} ${log.formattedDuration}',
style: TextStyle(
fontSize: 11,
color: log.statusColor,
@ -492,12 +520,7 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
color: widget.theme.errorColor,
),
],
],
),
],
),
),
Spacer(),
// 时间
Text(
log.formattedTime.contains(' ')
@ -508,11 +531,10 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
color: widget.theme.secondaryTextColor,
),
),
const SizedBox(width: 4),
Icon(
Icons.chevron_right,
size: 16,
color: widget.theme.secondaryTextColor.withValues(alpha: 0.5),
],
),
],
),
),
],
),

5
lib/src/widgets/log_detail_page.dart
View File

@ -122,6 +122,7 @@ class YxLogDetailPage extends StatelessWidget {
],
),
const SizedBox(height: 16),
_buildInfoRow('HOST', log.hostUrl, isUrl: true),
_buildInfoRow('URL', log.displayUrl, isUrl: true),
if (log.requestData != null) ...[
const SizedBox(height: 8),
@ -144,7 +145,6 @@ class YxLogDetailPage extends StatelessWidget {
_formatRequestBody(log.requestData),
style: TextStyle(
fontSize: 12,
fontFamily: 'monospace',
color: theme.textColor,
),
),
@ -199,7 +199,6 @@ class YxLogDetailPage extends StatelessWidget {
log.responseData.toString(),
style: TextStyle(
fontSize: 12,
fontFamily: 'monospace',
color: theme.textColor,
),
),
@ -257,7 +256,6 @@ class YxLogDetailPage extends StatelessWidget {
style: TextStyle(
color: theme.errorColor,
fontSize: 14,
fontFamily: 'monospace',
),
),
),
@ -353,7 +351,6 @@ class YxLogDetailPage extends StatelessWidget {
value,
style: TextStyle(
fontSize: 12,
fontFamily: 'monospace',
color: theme.primaryColor,
),
)

2
pubspec.yaml
View File

@ -1,6 +1,6 @@
name: yx_net_inspector
description: A powerful network inspector with floating debug ball for Flutter apps. Monitor HTTP requests, responses, and debug network issues in real-time.
version: 1.0.2
version: 1.0.3
homepage: https://github.com/your-username/yx_net_inspector
environment: