跳转至

01 · 快速开始

本页带你在 5 分钟内跑起第一个 FlowUI 窗口。

环境要求

  • Go 1.26.2 或更高
  • 桌面系统（Windows / macOS / Linux，Gio 支持的平台）

安装

在你的模块里：

go get github.com/qianniancn/flowui/ui

应用按职责 import 公开包，例如：

import "github.com/qianniancn/flowui/ui"

不要 import github.com/qianniancn/flowui/internal/...。

第一个应用

创建 main.go：

package main

import (
    "fmt"

    "github.com/qianniancn/flowui/layout"
    "github.com/qianniancn/flowui/theme"
    "github.com/qianniancn/flowui/ui"
    "github.com/qianniancn/flowui/widget/button"
    "github.com/qianniancn/flowui/widget/text"
    "github.com/qianniancn/flowui/window"
)

type Model struct {
    Count int
}

type Msg interface{ msg() }

type Inc struct{}
type Dec struct{}

func (Inc) msg() {}
func (Dec) msg() {}

func Update(model *Model, msg Msg) ui.Cmd[Msg] {
    switch msg.(type) {
    case Inc:
        model.Count++
    case Dec:
        model.Count--
    }
    return nil
}

func View(_ *ui.Context, model Model, send ui.Send[Msg]) ui.Widget {
    return layout.Center(
        layout.Column(
            text.New("FlowUI Counter").Size(24),
            text.New(fmt.Sprintf("Count: %d", model.Count)),
            layout.Row(
                button.New("-1").OnClick(func() {
                    send(Dec{})
                }),
                button.New("+1").OnClick(func() {
                    send(Inc{})
                }),
            ).Gap(8),
        ).Gap(12),
    )
}

func main() {
    ui.Run(ui.NewProgram(Model{}, Update, View),
        window.Theme(theme.Light()),
        window.Title("FlowUI Counter"),
        window.Size(640, 480),
    )
}

运行：

go run .

发生了什么

  1. Model：业务数据（这里是 Count）。
  2. Msg：用户意图（Inc / Dec）。
  3. Update：唯一修改 Model 的地方。
  4. View：只读 Model，返回控件树；按钮通过 send 投递消息。
  5. ui.Run：打开窗口并跑 MVU 循环。

两种应用层级

API 何时用
ui.Run(ui.Program) 所有单窗口应用（本页）
ui.Application 多窗口、托盘和应用生命周期

详见 03-MVU与消息、08-命令与订阅、11-多窗口。

示例

本页代码对应仓库中的 examples/counter/main.go。在仓库根目录运行 go run ./examples/counter；按钮、输入框和默认主题明暗展示也在 examples/ 中。

下一步