Golang全新GUI框架NuxUI使用体验

Golang全新GUI框架NuxUI使用体验 nuxui 源代码 快速开始

package main

import (
    "nuxui.org/nuxui/nux"
    _ "nuxui.org/nuxui/ui"
)

func main() {
    nux.Run(nux.NewWindow(nux.Attr{
        "width":  "15%", // screen_width x 15%
        "height": "2:1", // width : height = 2 : 1
        "title":  "hello",
        "content": nux.Attr{
            "type": "nuxui.org/nuxui/ui.Text",
            "text": `Hello nuxui`,
        },
    }))

}

更多关于Golang全新GUI框架NuxUI使用体验的实战教程也可以访问 https://www.itying.com/category-94-b0.html

3 回复

图片

更多关于Golang全新GUI框架NuxUI使用体验的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


nuxui 组件

图片

NuxUI确实为Go语言带来了全新的GUI开发体验，其声明式API和响应式设计让人印象深刻。以下是一个更复杂的示例，展示其布局和数据绑定能力：

package main

import (
    "nuxui.org/nuxui/nux"
    _ "nuxui.org/nuxui/ui"
    "nuxui.org/nuxui/ui/theme"
)

func main() {
    count := nux.NewState(0)
    
    nux.Run(nux.NewWindow(nux.Attr{
        "width":  400,
        "height": 300,
        "theme":  theme.Light(),
        "content": nux.Attr{
            "type": "nuxui.org/nuxui/ui/Column",
            "children": []nux.Attr{
                {
                    "type": "nuxui.org/nuxui/ui/Text",
                    "text": nux.Bind(count, func(v interface{}) string {
                        return fmt.Sprintf("Count: %d", v.(int))
                    }),
                    "font": nux.Attr{
                        "size": 24,
                        "weight": "bold",
                    },
                },
                {
                    "type": "nuxui.org/nuxui/ui/Row",
                    "children": []nuxAttr{
                        {
                            "type": "nuxui.org/nuxui/ui/Button",
                            "text": "Increase",
                            "onClick": func() {
                                count.Set(count.Get().(int) + 1)
                            },
                        },
                        {
                            "type": "nuxui.org/nuxui/ui/Button",
                            "text": "Decrease",
                            "onClick": func() {
                                count.Set(count.Get().(int) - 1)
                            },
                        },
                    },
                },
            },
        },
    }))
}

这个示例展示了NuxUI的几个关键特性：

  1. 状态管理：nux.NewState()创建响应式状态变量
  2. 数据绑定：nux.Bind()实现UI与数据的自动同步
  3. 布局系统：Column和Row容器实现灵活布局
  4. 事件处理：直接绑定回调函数到UI事件

NuxUI的Widget系统也很完善：

// 自定义Widget示例
type Counter struct {
    *nux.WidgetBase
    count nux.State
}

func NewCounter(attr nux.Attr) *Counter {
    me := &Counter{
        count: nux.NewState(0),
    }
    me.WidgetBase = nux.NewWidgetBase(me, attr)
    return me
}

func (me *Counter) Mount() {
    me.SetContent(nux.Attr{
        "type": "nuxui.org/nuxui/ui/Column",
        "children": []nux.Attr{
            {
                "type": "nuxui.org/nuxui/ui/Text",
                "text": nux.Bind(me.count, func(v interface{}) string {
                    return fmt.Sprintf("Value: %d", v.(int))
                }),
            },
        },
    })
}

NuxUI的跨平台支持基于GLFW和OpenGL，性能表现良好。其模块化设计允许按需导入组件，减少二进制体积。样式系统支持主题切换和自定义样式：

// 样式定义示例
theme.RegisterStyle("myapp.Button", nux.Attr{
    "background": "#4CAF50",
    "textColor": "#FFFFFF",
    "padding": nux.Attr{
        "left":   16,
        "right":  16,
        "top":    8,
        "bottom": 8,
    },
    "radius": 4,
})

NuxUI的布局系统支持百分比、比例和固定尺寸混合使用，响应式设计适应不同屏幕尺寸。动画系统基于属性插值：

nux.Animate(200*time.Millisecond, nux.EaseInOut, func(progress float32) {
    widget.SetOpacity(progress)
})

总体而言，NuxUI为Go GUI开发提供了现代化、声明式的解决方案，特别适合需要跨平台部署的桌面应用开发。

回到顶部