Fyne框架下超10万行滚动日志的最优显示组件方案咨询

1. 自定义基于Canvas的高性能日志容器 #

放弃List组件，直接基于Canvas实现只渲染可见区域的日志容器，这是解决10万行级日志卡顿的核心：

• 维护一个字符串切片存储所有日志行，新日志追加到末尾
• 自定义Widget，重写CreateRenderer()方法，渲染时仅计算当前视口能容纳的行数，只生成可见范围内的canvas.Text对象
• 监听滚动事件，动态调整渲染的行范围
• 新日志到来时，通过设置容器滚动偏移量自动定位到末尾

核心代码示例：

type LogContainer struct {
    fyne.Widget
    logs         []string
    lineHeight   float32
    scrollOffset float32
}

func NewLogContainer() *LogContainer {
    l := &LogContainer{lineHeight: 14} // 固定行高，减少计算
    fyne.NewWidget(l)
    return l
}

func (l *LogContainer) CreateRenderer() fyne.WidgetRenderer {
    return &logRenderer{container: l}
}

type logRenderer struct {
    container *LogContainer
    objects   []fyne.CanvasObject
}

func (r *logRenderer) Layout(size fyne.Size) {
    // 计算可见行的起止索引
    startIdx := int(r.container.scrollOffset / r.container.lineHeight)
    endIdx := startIdx + int(size.Height/r.container.lineHeight) + 1
    if endIdx > len(r.container.logs) {
        endIdx = len(r.container.logs)
    }

    // 复用或重建可见行的Text对象
    r.objects = r.objects[:0]
    yOffset := -r.container.scrollOffset + float32(startIdx)*r.container.lineHeight
    for i := startIdx; i < endIdx; i++ {
        text := canvas.NewText(r.container.logs[i], color.Gray{Y: 0xff})
        text.TextSize = 12
        text.Position = fyne.NewPos(4, yOffset)
        text.Resize(fyne.NewSize(size.Width-8, r.container.lineHeight))
        r.objects = append(r.objects, text)
        yOffset += r.container.lineHeight
    }
}

// 实现Renderer接口的其他方法（Refresh、Background、Objects、Destroy）

2. 日志数据的内存与更新优化 #

• 限制日志存储上限：比如只保留最近10万行，超过时自动删除最早的条目，避免内存溢出
• 批量更新UI：用goroutine接收Socket日志，写入带缓冲的通道，UI线程每积累N条日志（或固定时间间隔）再批量更新容器，减少重绘频率

示例异步接收代码：

func main() {
    logChan := make(chan string, 200)
    logContainer := NewLogContainer()

    // Socket接收协程
    go func() {
        conn, _ := net.Dial("tcp", "your_socket_addr")
        defer conn.Close()
        scanner := bufio.NewScanner(conn)
        for scanner.Scan() {
            logChan <- scanner.Text()
        }
    }()

    // UI批量更新协程（需在Fyne主线程执行）
    go func() {
        var batch []string
        ticker := time.NewTicker(100 * time.Millisecond)
        defer ticker.Stop()
        for {
            select {
            case line := <-logChan:
                batch = append(batch, line)
                if len(batch) >= 100 {
                    fyne.CurrentApp().SendMessage(batch)
                    batch = nil
                }
            case <-ticker.C:
                if len(batch) > 0 {
                    fyne.CurrentApp().SendMessage(batch)
                    batch = nil
                }
            }
        }
    }()

    // 处理消息更新UI
    fyne.CurrentApp().SetOnMessage(func(msg interface{}) {
        if lines, ok := msg.([]string); ok {
            logContainer.logs = append(logContainer.logs, lines...)
            // 自动滚动到底部
            totalHeight := float32(len(logContainer.logs)) * logContainer.lineHeight
            viewportHeight := logContainer.Size().Height
            if totalHeight > viewportHeight {
                logContainer.scrollOffset = totalHeight - viewportHeight
            }
            logContainer.Refresh()
        }
    })

    // 窗口初始化逻辑
    win := app.NewWindow("Log Viewer")
    scroll := container.NewVScroll(logContainer)
    win.SetContent(scroll)
    win.Resize(fyne.NewSize(800, 600))
    win.ShowAndRun()
}

3. 若坚持使用List组件的优化方向 #

• 固定行高：设置List的MinSize为固定行高，避免每次渲染时计算行尺寸
• 复用列表项：重写CreateItem和UpdateItem方法，复用已创建的Widget，减少对象销毁重建开销
• 手动控制刷新：关闭List的自动刷新，批量更新日志后再调用Refresh()

• 所有UI更新操作必须在Fyne主线程执行，通过SendMessage或App.RunInWindow实现
• 始终只渲染可见区域的内容，这是解决大数量级日志卡顿的核心
• 合理控制日志存储上限，避免内存占用过高

内容的提问来源于stack exchange，提问作者XanderCheung