使用Tview创建带导航的待办清单 能否在Box内嵌套Button组件

问题解答 #

你的整体实现思路没有问题，只是对tview组件的能力边界有一点小误区：

• tview.NewBox()是所有tview组件的底层基类，仅支持绘制边框、标题、背景等基础样式，没有管理子组件的能力，因此无法直接将tview.NewButton()嵌套在Box内使用。
• 你只需要把导航位置的Box替换为支持容纳子元素的布局组件（如Flex、Grid），保留原有的边框和标题属性，再将按钮添加到布局组件内即可实现需求。

以下是修改后的可运行代码示例：

package main

import (
    "github.com/rivo/tview"
)

func main() {
    app := tview.NewApplication()

    // 构造带按钮的导航面板：使用Flex作为容器，保留边框标题样式
    navPanel := tview.NewFlex().SetDirection(tview.FlexRow).
        SetBorder(true).
        SetTitle("Navigation")
    // 添加创建待办事项按钮
    createTodoBtn := tview.NewButton("Create New Todo").
        SetSelectedFunc(func() {
            // 此处编写按钮点击触发的逻辑，比如切换到创建面板、弹出输入框等
        })
    navPanel.AddItem(createTodoBtn, 3, 1, true)

    flex := tview.NewFlex().
        AddItem(tview.NewBox().SetBorder(true).SetTitle("List notes"), 0, 1, false).
        AddItem(tview.NewFlex().SetDirection(tview.FlexRow).
            AddItem(navPanel, 5, 2, false). // 替换原Box为自定义导航面板
            AddItem(tview.NewBox().SetBorder(true).SetTitle("Pane for creating note"), 0, 1, false), 0, 3, false)
    if err := app.SetRoot(flex, true).Run(); err != nil {
        panic(err)
    }
}

如果后续需要添加多个导航按钮，也可以直接用tview.List组件作为导航面板容器，天然支持多选项的焦点切换逻辑，开发效率更高。

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