Zenn
Closed4

eefm作成日記

eetann / えーたんeetann / えーたん

やりたいこと

TUI自作ファイラーを作りたい

動機

  • Goの復習
  • TUIを何か作ってみたい
  • ファイラーであれば、最低限実装すべき機能が明確
  • 既存のファイラーでは、複数のレイアウトの切り替えが面倒なので自作したい

なぜスクラップを使うか

Notionだと時系列順にアイデアをまとめるのが面倒

eetann / えーたんeetann / えーたん

Frame

Primitiveのラッパー。指定したPrimitiveの上下にHeaderとFooterを追加

Grid

行と列の数を指定してからPrimitiveを配置する

AddItem(p Primitive, row, column, rowSpan, colSpan, minGridHeight, minGridWidth, focus bool)

Flex

AddItem(item Primitive, fixedSize, proportion, focus bool)

fixedSizeは、変更されない固定サイズ(幅または高)。0だったら柔軟。
proportionは、他の同一box内のアイテムとの相対的なサイズ。

eetann / えーたんeetann / えーたん

Flexアイテムの動的追加

以下のget_viewのように、view.Flexに次々とAddItemをすれば良い。

package main

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

func get_view() *tview.Flex {
	var view *tview.Flex = tview.NewFlex()
	for i := 0; i < 3; i++ {
		view.AddItem(tview.NewBox().SetBorder(true).SetTitle("col "+strconv.Itoa(i)), 0, 1, false)
	}
	return view
}

func main() {
	app := tview.NewApplication()
	flex := get_view()
	if err := app.SetRoot(flex, true).SetFocus(flex).Run(); err != nil {
		panic(err)
	}
}

結果
列扱い

デフォルトでは、AddItemを使うと右に追加されて列のような扱いになる。
AddItem使用時に、下に追加されて行のような扱いにするにするには、tview.FlexにSetDirection(tview.FlexRow)を使う。

func get_view() *tview.Flex {
	var view *tview.Flex = tview.NewFlex().SetDirection(tview.FlexRow)
	for i := 0; i < 3; i++ {
		view.AddItem(tview.NewBox().SetBorder(true).SetTitle("row "+strconv.Itoa(i)), 0, 1, false)
	}
	return view
}

行扱い

このスクラップは2021/09/20にクローズされました