百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

Avalonia日志组件实现与优化指南(ar日志表扣)

ztj100 2025-07-10 22:14 5 浏览 0 评论

背景

Avalonia 目前没有富文本框可实现日志输出显示,但提供了SelectableTextBlock控件可以替换,这是站长实现的一个日志组件效果:

可展示日志时间、日志级别、日志详细内容等,后台除输出到界面外,也可持久化输出到文本文件,对于更多的日志信息展示可自行扩展,下面先讲解实现过程,再指出存在的问题,欢迎 PR。

使用

安装:

NuGet\Install-Package CodeWF.LogViewer.Avalonia -Version 1.0.10.2

视图使用:

xmlns:log="https://codewf.com"

<log:LogView />

日志输出:

Logger.Debug("调试日志");
Logger.Info("信息日志");
Logger.Warn("警告日志");
Logger.Error("错误日志");
Logger.Fatal("致命日志");

实现

只说关键部分代码,具体代码可浏览CodeWF.LogViewer仓库。

程序通过Logger类输出日志,该类将日志信息缓存到ConcurrentQueue<LogInfo> Logs集合,Logger类定义如下:

public staticclassLogger
{
publicstatic LogType Level = LogType.Info;
publicstaticstring LogDir = AppDomain.CurrentDomain.BaseDirectory;
internalstaticreadonly ConcurrentQueue<LogInfo> Logs = new();

public static void RecordToFile()
{
Task.Run(async () =>
{
while (true)
{
while (TryDequeue(outvar log))
{
var content =
$"{log.RecordTime}: {log.Level.Description()} {log.Description}{Environment.NewLine}";
AddLogToFile(content);
}

await Task.Delay(TimeSpan.FromMilliseconds(100));
}
});
}

public static bool TryDequeue(out LogInfo info)
{
return Logs.TryDequeue(out info);
}

public static void Log(int type, string content)
{
var logType = (LogType)type;
if (Level > logType) return;
Logs.Enqueue(new LogInfo(logType, content));
}

public static void Debug(string content)
{
if (Level <= LogType.Debug)
{
Logs.Enqueue(new LogInfo(LogType.Debug, content));
}
}

public static void Info(string content)
{
if (Level <= LogType.Info)
{
Logs.Enqueue(new LogInfo(LogType.Info, content));
}
}

public static void Warn(string content)
{
if (Level <= LogType.Warn)
{
Logs.Enqueue(new LogInfo(LogType.Warn, content));
}
}

public static void Error(string content, Exception? ex = )
{
if (Level > LogType.Error) return;

var msg = ex == ? content : $"{content}\r\n{ex.ToString()}";

Logs.Enqueue(new LogInfo(LogType.Error, msg));
}

public static void Fatal(string content, Exception? ex = )
{
if (Level > LogType.Fatal) return;

var msg = ex == ? content : $"{content}\r\n{ex.ToString()}";

Logs.Enqueue(new LogInfo(LogType.Fatal, msg));
}

public static void AddLogToFile(string msg)
{
try
{
var logFolder = System.IO.Path.Combine(LogDir, "Log");
if (!Directory.Exists(logFolder))
{
Directory.CreateDirectory(logFolder);
}

var logFileName = System.IO.Path.Combine(logFolder, $"Log_{DateTime.Now:yyyy_MM_dd}.log");
File.AppendAllText(logFileName, msg);
}
catch
{
// ignored
}
}
}

只输出日志到文本文件

如果只是输出日志到文本文件,而不需要输出到界面,需要主动调用Logger.RecordToFile()方法定时检查日志输出。

同时输出日志到文本文件和视图

前提:这里不需要调用Logger.RecordToFile()方法

我们先看视图LogView.axaml,该部分使用ScrollViewer包裹SelectableTextBlock,以实现日志滚动查看及日志文本的可选择复制:

<ScrollViewer
x:Name="LogScrollViewer"
HorizontalScrollBarVisibility="Auto"
PointerPressed="LogScrollViewer_OnPointerPressed"
VerticalScrollBarVisibility="Auto">

<SelectableTextBlock
x:Name="LogTextView"
TextAlignment="Start"
TextWrapping="Wrap">

<SelectableTextBlock.ContextMenu>
<ContextMenu x:Name="LogContextMenu">
<MenuItem Click="Copy_OnClick" Header="复制" />
<MenuItem Click="Clear_OnClick" Header="清空" />
<MenuItem Click="Location_OnClick" Header="查看日志" />
</ContextMenu>
</SelectableTextBlock.ContextMenu>
</SelectableTextBlock>
</ScrollViewer>

LogView.axaml.cs内调用RecordLog()方法定时读取缓存日志,并再调用LogNotifyHandler方法写入界面,及调用Logger.AddLogToFile方法写入文本文件,代码不多,下面是核心部分:

partial classLogView : UserControl
{
// ...
private void RecordLog()
{
if (_isRecording) return;

_isRecording = true;

Task.Run(async () =>
{
while (true)
{
while (Logger.TryDequeue(outvar log)) LogNotifyHandler(log);

await Task.Delay(TimeSpan.FromMilliseconds(100));
}
});
}

private void LogNotifyHandler(LogInfo logInfo)
{
if (Logger.Level > logInfo.Level) return;

_synchronizationContext.Post(o =>
{
var inlines = _textView.Inlines;
try
{
if (inlines?.Count > MaxCount)
{
for (var i = 0; i < 3; i++)
{
var needRemoveElement = inlines.First();
if (needRemoveElement != )
{
inlines.Remove(needRemoveElement);
}
}
}

var start = _textView.Text.Length;

inlines?.Add(
new Run($"{logInfo.RecordTime}")
{
Foreground = new SolidColorBrush(Color.Parse("#8C8C8C")),
BaselineAlignment = BaselineAlignment.Center
});
inlines?.Add(GetLevelInline(logInfo.Level));
inlines?.Add(new Run(logInfo.Description)
{
Foreground = new SolidColorBrush(Color.Parse("#262626")),
BaselineAlignment = BaselineAlignment.Center
});
inlines?.Add(new Run(Environment.NewLine));

Logger.AddLogToFile(
$"{logInfo.RecordTime}: {logInfo.Level.Description()} {logInfo.Description}{Environment.NewLine}");

_textView.SelectionStart = start;
_textView.SelectionEnd = _textView.Text.Length;
_scrollViewer.ScrollToEnd();
}
catch
{
// ignored
}
}, );
}

private Span GetLevelInline(LogType level)
{
var content = level.Description();

// 创建宽度为零的透明文本,用于复制使用
// TODO:复制还是有问题,会错位
var zeroWidthText = new Run($"【{content}】")
{
Foreground = Brushes.Transparent, FontSize = 0.001
};

// 视觉显示的文本,不会被复制使用
var border = new Border
{
BorderBrush = GetLevelForeground(level),
Background = GetLevelBackground(level),
BorderThickness = new Thickness(1),
CornerRadius = new CornerRadius(2),
Padding = new Thickness(8, 0),
Margin = new Thickness(8, 2),
VerticalAlignment = VerticalAlignment.Center,
IsHitTestVisible = false,
Child = new TextBlock
{
Text = content,
Foreground = GetLevelForeground(level),
IsHitTestVisible = false
}
};
var levelSpan = new Span();
levelSpan.Inlines.Add(zeroWidthText);
levelSpan.Inlines.Add(border);
return levelSpan;
}
// ...
}

上面省略了根据日志类型获取展示前景色、背景色等等代码,这不重要。

存在的问题

看上面的GetLevelInline方法,该方法生成日志级别块,使用的Border套日志级别描述(调试、错误等),实现日志类型带边框效果,但复制存在问题:

选择的7:56 调试 模块块并按Ctrl + C复制,再粘贴到记事本,复制出来是调试】模块名称A-,很明显的错位问题。

复制的应该是文本内容,但Border是不允许复制的,所以代码中留了注释创建宽度为零的透明文本,用于复制使用

// 创建宽度为零的透明文本,用于复制使用
// TODO:复制还是有问题,会错位
var zeroWidthText = new Run($"【{content}】")
{
Foreground = Brushes.Transparent, FontSize = 0.001
};

具体的不细说了,大家有什么解决方案吗?等待有缘人 PR 了,感谢。

总结

本文主要是寻求 PR,该组件如果对您有用,欢迎使用,仓库地址:

  • CodeWF.LogViewer:https://github.com/dotnet9/CodeWF.LogViewer

下篇分享自定义 TabItem 边框实现:


相关推荐

Sublime Text 4 稳定版 Build 4113 发布

IT之家7月18日消息知名编辑器SublimeText4近日发布了Build4113版本,是SublimeText4的第二个稳定版。IT之家了解到,SublimeTe...

【小白课程】openKylin便签贴的设计与实现

openKylin便签贴作为侧边栏的一个小插件,提供便捷的文本记录和灵活的页面展示。openKylin便签贴分为两个部分:便签列表...

“告别 Neovim!为什么我投奔了刚开源的 Zed 编辑器?”

...

壹啦罐罐 Android 手机里的 Xposed 都装了啥

这是少数派推出的系列专题,叫做「我的手机里都装了啥」。这个系列将邀请到不同的玩家,从他们各自的角度介绍手机中最爱的或是日常使用最频繁的App。文章将以「每周一篇」的频率更新,内容范围会包括iOS、...

电气自动化专业词汇中英文对照表(电气自动化专业英语单词)

专业词汇中英文对照表...

Python界面设计Tkinter模块的核心组件

我们使用一个模块,我们要熟悉这个模块的主要元件。如我们设计一个窗口,我们可以用Tk()来完成创建;一些交互元素,按钮、标签、编辑框用到控件;怎么去布局你的界面,我们可以用到pack()、grid()...

以色列发现“死海古卷”新残片(死海古卷是真的吗)

编译|陈家琦据艺术新闻网(artnews.com)报道,3月16日,以色列考古学家发现了死海古卷(DeadSeaScrolls)新残片。新出土的羊皮纸残片中包括以希腊文书写的《十二先知书》段落,这...

鸿蒙Next仓颉语言开发实战教程:订单列表

大家上午好,最近不断有友友反馈仓颉语言和ArkTs很像,所以要注意不要混淆。今天要分享的是仓颉语言开发商城应用的订单列表页。首先来分析一下这个页面,它分为三大部分,分别是导航栏、订单类型和订单列表部分...

哪些模块可以用在 Xposed for Lollipop 上?Xposed 模块兼容性解答

虽然已经有了XposedforLollipop的安装教程,但由于其还处在alpha阶段,一些Xposed模块能不能依赖其正常工作还未可知。为了解决大家对于模块兼容性的疑惑,笔者尽可能多...

利用 Fluid 自制 Mac 版 Overcast 应用

我喜爱收听播客,健身、上/下班途中,工作中,甚至是忙着做家务时。大多数情况下我会用MarcoArment开发的Overcast(Freemium)在iPhone上收听,这是我目前最喜爱的Po...

Avalonia日志组件实现与优化指南(ar日志表扣)

...

浅色Al云食堂APP代码(三)(手机云食堂)

以下是进一步优化完善后的浅色AI云食堂APP完整代码,新增了数据可视化、用户反馈、智能推荐等功能,并优化了代码结构和性能。项目结构...

实战PyQt5: 121-使用QImage实现一个看图应用

QImage简介QImage类提供了独立于硬件的图像表示形式,该图像表示形式可以直接访问像素数据,并且可以用作绘制设备。QImage是QPaintDevice子类,因此可以使用QPainter直接在图...

滚动条隐藏及美化(滚动条隐藏但是可以滚动)

1、滚动条隐藏背景/场景:在移动端,滑动的时候,会显示默认滚动条,如图1://隐藏代码:/*隐藏滚轮*/.ul-scrool-box::-webkit-scrollbar,.ul-scrool...

浅色AI云食堂APP完整代码(二)(ai 食堂)

以下是整合后的浅色AI云食堂APP完整代码,包含后端核心功能、前端界面以及优化增强功能。项目采用Django框架开发,支持库存管理、订单处理、财务管理等核心功能,并包含库存预警、数据导出、权限管理等增...

取消回复欢迎 发表评论: