update tui

24.03/bubble-demo/main.go

@@ -7,7 +7,6 @@ import (
 	"github.com/charmbracelet/bubbles/textarea"
 	"github.com/charmbracelet/bubbles/viewport"
 	tea "github.com/charmbracelet/bubbletea"
-	"github.com/charmbracelet/lipgloss"
 )
 
 func main() {
@@ -18,6 +17,9 @@ type model struct {
 	viewport viewport.Model
 	messages []string
 	textarea textarea.Model
+	state    int
+	width    int
+	height   int
 }
 
 func initialModel() model {
@@ -28,12 +30,9 @@ func initialModel() model {
 	ta.Prompt = "┃ "
 	ta.CharLimit = 280
 
-	ta.SetWidth(30)
-	ta.SetHeight(10)
-
 	ta.ShowLineNumbers = false
 
-	vp := viewport.New(30, 10)
+	vp := viewport.New(10, 10)
 	vp.SetContent(`Welcome!`)
 
 	ta.KeyMap.InsertNewline.SetEnabled(false)
@@ -57,6 +56,9 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	m.textarea, tiCmd = m.textarea.Update(msg)
 	m.viewport, vpCmd = m.viewport.Update(msg)
 	switch msg := msg.(type) {
+	case tea.WindowSizeMsg:
+		m.state = 1
+		m.width, m.height = msg.Width, msg.Height
 	case tea.KeyMsg:
 		switch msg.Type {
 		case tea.KeyCtrlC, tea.KeyEsc:
@@ -72,14 +74,17 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	return m, tea.Batch(tiCmd, vpCmd)
 }
 
-var style = lipgloss.NewStyle().
-	Bold(true).
-	Width(22)
+// var style = lipgloss.NewStyle().
+// 	Bold(true).
+// 	Width(22)
 
 func (m model) View() string {
 	// return lipgloss.JoinVertical(lipgloss.Top, style.Render(m.viewport.View()), m.textarea.View())
-
-	return fmt.Sprintf("%s\n%s",
+	if m.state == 0 {
+		return "Initializing..."
+	}
+	return fmt.Sprintf("%dx%d\n%s\n%s",
+		m.width, m.height,
 		m.viewport.View(),
 		m.textarea.View(),
 	)

24.03/enjoy_tui.md

@@ -399,14 +399,21 @@ demo程序没有使用任何封装的控件，纯用文本和状态给我们提
 
 ![image](https://i.imgur.com/o8zfBtO.gif)
 
-上图这样一个tui，我们需要记录的状态和数据有：3个选项，现在指向那个选项，选中的选项，这样三个状态对吧，所以下面代码中`model`结构体存储了这三部分。然后`Init`不需要做任何事情，返回`nil`即可；
+上图这样一个tui，我们需要记录的状态和数据有：3个选项，现在指向那个选项，选中的选项，这样三个状态对吧，所以下面代码中`model`结构体存储了这三部分。
+
+`Init`不需要做任何事情，返回`nil`即可；
 
 `Update`需要捕捉键盘上下移动，空格选中，还有q退出等信息，上下移动就是修改`cursor`，鼠标指向，而选中就是修改`selected`集合，退出就是返回`Cmd`为`tea.Quit`.
 
 `View`则是在`Update`之后都会触发的，根据model中的state渲染tui的函数，返回是个string，这个string就是print到console，展示出来的tui，这个示例中人为拼写`[ ]`和`[x]`来表示选没选中，`>`表示指针的位置了。
 
 
 上面准备好之后在主函数中通过`tea.NewProgram(initialModel()).Run()`创建model并运行程序即可，initialModel()就是返回一个初始的model给程序。注意和`Init`方法不同，后者是初始状态下需要执行的`tea.Cmd`。
+
+整体上就是，`Init`可以做一些初始化tui时的操作，比如请求一些一开始要展示的数据，很像react的useEffect。而`Update`则是处理一些消息Msg或者叫事件，例如键盘、鼠标和其他`自定义的消息`均可（因为tea.Msg是个interface{}所以可以自定义任何类型作为msg），处理事件本质上是要修改`model`中的属性值，因为model中存储了要展示的数据，Update中可以修改这些数据。除了修改这些属性之外，Update还有第二返回值`tea.Cmd`，这是一个`fun() tea.Msg`函数，用来返回一个新的消息给程序，这样就会在下一次循环中再次调用Update，触发对应的操作。而`View`最直观，就是直接返回要展示的`text`，他可能依赖model中属性的值来最终完成渲染。
+
+此外如果是纯第三方想要触发消息，进而触发Update和View的话，需要借助`p := tea.NewProgram(initialModel())`这个初始化之后的`p.Send(tea.Msg)`方法。
+
 ```go
 package main