Designing task list

我們在這一節中將會設計一個，左邊是列表，右邊列表中代辦事項的具體內容

實現效果如圖：

實現該需要使用總共用了兩個文件，一個task_list.go

package mainimport ("fyne.io/fyne/v2""fyne.io/fyne/v2/app""fyne.io/fyne/v2/container""fyne.io/fyne/v2/theme""fyne.io/fyne/v2/widget""time" )type taskApp struct {data *taskList// 記錄當前代辦事項visible []*task// 當前選中的taskcurrent *tasktasks *widget.List// Entry widget allows simple text to be input when focused.title, description, due *widget.Entrycategory *widget.Selectpriority *widget.RadioGroupcompletion *widget.Slider }func (a *taskApp) refreshData() {// hide donea.visible = a.data.remaining()a.tasks.Refresh() }func (a *taskApp) setTask(t *task) {// 最新設置的那個task就是當前的代辦列表a.current = t// 將data的title設置到APP的title中a.title.SetText(t.title)a.description.SetText(t.description)a.category.SetSelected(t.category)if t.priority == midPriority {a.priority.SetSelected("Mid")} else if t.priority == highPriority {a.priority.SetSelected("High")} else {a.priority.SetSelected("Low")}a.due.SetText(formatData(t.due))a.completion.Value = t.completiona.completion.Refresh() }func formatData(date *time.Time) string {if date == nil {return ""}return date.Format(dateFormat) }func (a *taskApp) makeUI() fyne.CanvasObject {a.tasks = widget.NewList(func() int {return len(a.visible)},func() fyne.CanvasObject {return container.NewHBox(widget.NewCheck("", func(bool) {}),widget.NewLabel("TODO ITtem x"))},func(i widget.ListItemID, c fyne.CanvasObject) {task := a.visible[i]box := c.(*fyne.Container)check := box.Objects[0].(*widget.Check)check.Checked = task.donecheck.OnChanged = func(done bool) {task.done = donea.refreshData()}labelData := box.Objects[1].(*widget.Label)labelData.SetText(task.title)})// 當選中一個list的時候，調用該回調函數// 選中哪個list之后，將界面上需要顯示的都更換成當前ID 的list對象a.tasks.OnSelected = func(id widget.ListItemID) {a.setTask(a.visible[id])}// 標題支持輸入a.title = widget.NewEntry()a.title.OnChanged = func(text string) {if a.current == nil {return}// 更新當前選中的標題a.current.title = texta.tasks.Refresh()}a.description = widget.NewMultiLineEntry()a.description.OnChanged = func(text string) {if a.current == nil {return}a.current.description = text}a.category = widget.NewSelect([]string{"Home"}, func(cat string) {if a.current == nil {return}a.current.category = cat})a.priority = widget.NewRadioGroup([]string{"Low", "Mid", "High"}, func(pri string) {if a.current == nil {return}if pri == "Mid" {a.current.priority = midPriority} else if pri == "High" {a.current.priority = highPriority} else {a.current.priority = lowPriority}})a.due = widget.NewEntry()a.due.Validator = dateValidatora.due.OnChanged = func(str string) {if a.current == nil {return}if str == "" {a.current.due = nil} else {date, err := time.Parse(dateFormat, str)if err != nil {a.current.due = &date}}}a.completion = widget.NewSlider(0, 100)a.completion.OnChanged = func(done float64) {if a.current == nil {return}a.current.completion = done}details := widget.NewForm(widget.NewFormItem("Title", a.title),widget.NewFormItem("Description", a.description),widget.NewFormItem("Category", a.category),widget.NewFormItem("Priority", a.priority),widget.NewFormItem("Due", a.due),widget.NewFormItem("Completion", a.completion),)toolBar := widget.NewToolbar(widget.NewToolbarAction(theme.ContentAddIcon(), func() {task := &task{title: "New task"}a.data.add(task)a.setTask(task)a.refreshData()}),)return container.NewBorder(toolBar, nil, a.tasks, nil, details) }/*** 創建一個代辦事項的APP*/func main() {a := app.New()w := a.NewWindow("Task List")data := dummyData()tasks := &taskApp{data: data, visible: data.remaining()}w.SetContent(tasks.makeUI())// 若是首次啟動的時候，項目大于0就顯示首個listif len(data.remaining()) > 0 {tasks.setTask(data.remaining()[0])}w.ShowAndRun() }

還有一個是data.go

package mainimport "time"const (dateFormat = "02 Jan 06 15:04"lowPriority = 0midPriority = 1highPriority = 2 )func dateValidator(text string) error {_,err := time.Parse(dateFormat, text)return err }type task struct {// 定義標題和描述語句title, description string// 該任務是否已經完成done boolcategory stringpriority intdue *time.Timecompletion float64 }// 定義任務鏈表的切片 type taskList struct {tasks []*task }// 添加任務，新添加的任務放到列表頭 func (l *taskList) add(t *task) {// 使用t初始化一個一樣的切片，并將原有的切片添加到后面l.tasks = append([]*task{t}, l.tasks...) }/* 獲取剩余沒有完成的任務列表 */ func (l *taskList) remaining() []*task {var items []*taskfor _, task := range l.tasks {if !task.done {items = append(items, task)}}return items }/* 獲取已經完成的任務列表 */ func (l *taskList) done() []*task {var items []*taskfor _, task := range l.tasks {if task.done {items = append(items, task)}}return items }func dummyData() *taskList {return &taskList{tasks: []*task{{title: "Nearly done", description: "you can tick my checkbox and I will be marked as done and disappear"},{title: "Functions", description: "Tap the plus icon above to add a new task, or tap the munus icon to remove this one"},},} }

下面會講解下具體思路

如圖，我們首先需要創建一個toolbar，需要使用到函數NewToolbar，toolbar里面需要放置一個添加按鈕

toolBar := widget.NewToolbar(widget.NewToolbarAction(theme.ContentAddIcon(), func() {task := &task{title: "New task"}a.data.add(task)a.setTask(task)a.refreshData()}), )

然后添加面板中各個入口的對象

// 當選中一個list的時候，調用該回調函數 // 選中哪個list之后，將界面上需要顯示的都更換成當前ID 的list對象 a.tasks.OnSelected = func(id widget.ListItemID) {a.setTask(a.visible[id]) } // 標題支持輸入 a.title = widget.NewEntry() a.title.OnChanged = func(text string) {if a.current == nil {return}// 更新當前選中的標題a.current.title = texta.tasks.Refresh() }a.description = widget.NewMultiLineEntry() a.description.OnChanged = func(text string) {if a.current == nil {return}a.current.description = text }a.category = widget.NewSelect([]string{"Home"}, func(cat string) {if a.current == nil {return}a.current.category = cat })a.priority = widget.NewRadioGroup([]string{"Low", "Mid", "High"}, func(pri string) {if a.current == nil {return}if pri == "Mid" {a.current.priority = midPriority} else if pri == "High" {a.current.priority = highPriority} else {a.current.priority = lowPriority} })a.due = widget.NewEntry() a.due.Validator = dateValidator a.due.OnChanged = func(str string) {if a.current == nil {return}if str == "" {a.current.due = nil} else {date, err := time.Parse(dateFormat, str)if err != nil {a.current.due = &date}} }a.completion = widget.NewSlider(0, 100) a.completion.OnChanged = func(done float64) {if a.current == nil {return}a.current.completion = done }details := widget.NewForm(widget.NewFormItem("Title", a.title),widget.NewFormItem("Description", a.description),widget.NewFormItem("Category", a.category),widget.NewFormItem("Priority", a.priority),widget.NewFormItem("Due", a.due),widget.NewFormItem("Completion", a.completion), )toolBar := widget.NewToolbar(widget.NewToolbarAction(theme.ContentAddIcon(), func() {task := &task{title: "New task"}a.data.add(task)a.setTask(task)a.refreshData()}), )

總結

以上是生活随笔為你收集整理的golang的GUI库，使用go-fyne设计一个代办事项APP的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。