【goed/ui】自定义组件设计思想篇

web守墓人2026-09-19 21:55

组件包（editor/editor.go）

go 复制代码

package editor

// Props 即契约 ------ 对应 TS 的 interface EditorProps

type Props struct {
    // ui.Props 可根据组件特性决定是否嵌入全局通用属性
    Path    string
    Focus   bool
    OnSave  func(content string)  // 事件就是普通字段，React 风格
}

// View 即组件 ------ 对应 const Editor: FC<Props>
var View = ui.ViewFn[Props](func(p *Props, children ...*ui.VNode) *ui.VNode {
    // p.Path、p.Focus 全部强类型，无需 GetProp/断言
    return ui.H("div", &ui.Props{Style: p.Style},
        ui.H("textarea", &ui.Props{Focus: p.Focus}),
    )
})

调用组件

go 复制代码

func NewApp(path string) *ui.ComponentDef {
    return ui.Component(func(_ *ui.SetupContext) func() *ui.VNode {
        return func() *ui.VNode {
            return ui.H(editor.View, &editor.Props{
                Style: ui.Style{Flex: 1},
                OnClick: func() {},
                Path:   path,
                Focus:  true,
                OnSave: func(c string) { save(c) },
            })
        }
    })
}

总结

不像vue3反倒像是react + ts的感觉了

底层从windows gdi提升到direct2d后，界面清晰度和抗锯齿效果都提升，但是启动内存也加了个几十MB，不过相对于webview还是低得多。

最新的electron系列应用占用内存也太多了