fyne 開發筆記

田園百曉生發表於2020-04-13
筆記

安裝

go mod init fyneDemo
go get fyne.io/fyne

點選使用看雲閱讀

各種軟體包說明

fyne

  1. 用途：提供所有fyne程式碼中共有的基本定義，包含資料型別和介面
  2. 命令 說明
    fyne.NewSize(200, 400) 設定應用的寬高，需配合widget使用
    fyne.NewPos(20, 20) 設定一個偏移量
    container := fyne.NewContainer(text1, text2, text3) 新建一個容器

app

  1. 用途：提供用於啟動新應用程式的api
  2. 命令 說明
    myApp ：= app.New() 新建一個應用
    myWindow := myApp.NewWindow("hello") 新建一個視窗
    myWindow.ShowAndRun() 顯示視窗，並執行，等同於myWindow.Show()和myApp.Run()，若有第二個視窗，則第二個視窗只可呼叫myWindow.Show()方法
    myWindow.SetContent() 給視窗設定內容

widget

  1. 用途：提供各種各樣的小部件(如按鈕、標籤等)
    命令 說明
    w.Resize(fyne.NewSize(200, 400)) 設定寬高
    widget.NewHyperlink("百度", url) 設定一個超連結，需配合url, _ := url.Parse("http://www.baidu.com")使用
    content := widget.NewLabel("text") 設定一段文字
    content := widget.NewButton("click me", clickFunc()) 設定一個按鈕，clickFunc()為點選事件後進行的操作
    content := widget.NewButtonWithIcon("Home", theme.HomeIcon(), clickFunc()) 設定一個帶圖示的點選按鈕
    content := widget.NewVBox() 建立一個盒子
    content.Append() 追加元素
    input := widget.NewEntry() 設定一個輸入框
    textArea := widget.NewMultiLineEntry() 設定多行輸入框
    input.SetPlaceHolder("Enter text...") 設定輸入框的提示內容
    check := widget.NewCheck("Optional", test() 設定核取方塊
    radio := widget.NewRadio([]string{"Option 1", "Option 2"}, test()) 設定單選框
    combo := widget.NewSelect([]string{"Option 1", "Option 2"}, test()) 設定select選擇器
    progress := widget.NewProgressBar() 設定進度條
    progress.SetValue(i) 設定進度
    infinite := widget.NewProgressBarInfinite() 設定無限進度條

設定一個表單

form := &widget.Form{
        Items: []*widget.FormItem{ // we can specify items in the constructor
            {"Entry", entry}},
        OnSubmit: func() { // optional, handle form submission
            log.Println("Form submitted:", entry.Text)
            log.Println("multiline:", textArea.Text)
            myWindow.Close()
        },
    }

    // we can also append items
    form.Append("Text", textArea)

設定tab欄

tabs := widget.NewTabContainer(
   widget.NewTabItem("Tab 1", widget.NewLabel("Hello")),
  widget.NewTabItem("Tab 2", widget.NewLabel("World!")))
tabs.SetTabLocation(widget.TabLocationLeading) // 設定為豎向的tab

設定工具欄

toolbar := widget.NewToolbar(
        widget.NewToolbarAction(theme.DocumentCreateIcon(), func() {
            log.Println("New document")
        }),
        widget.NewToolbarSeparator(),
        widget.NewToolbarAction(theme.ContentCutIcon(), func() {}),
        widget.NewToolbarAction(theme.ContentCopyIcon(), func() {}),
        widget.NewToolbarAction(theme.ContentPasteIcon(), func() {}),
        widget.NewToolbarSpacer(),
        widget.NewToolbarAction(theme.HelpIcon(), func() {
            log.Println("Display help")
        }),
    )

    content := fyne.NewContainerWithLayout(layout.NewBorderLayout(toolbar, nil, nil, nil),
        toolbar, widget.NewLabel("Content"))

canvas

  1. 用途：提供繪圖api
    命令 說明
    myCanvas := myWindow.Canvas() 建立一個新畫布
    text := canvas.NewText("Text", color.White) 建立白色的文字
    text.TextStyle.Bold = true 設定文字的樣式
    text2.Move(fyne.NewPos(20, 20)) 移動文字
    canvas.NewRectangle(color.Black) 建立一個矩形
    canvas.NewLine(color.Gray{0x66}) 建立一條線段
    circle := canvas.NewCircle(color.White) 建立一個圓
    canvas.NewImageFromResource(theme.FyneLogo()) 建立一個圖片資源
    myCanvas.SetContent(text) 將文字新增到畫布上

dialog

  1. 用途：處理彈出框
    設定一個詢問按鈕
    dialog.NewConfirm("標題", "內容", func(checked bool) {
fmt.Println("333")
}, myWindow)

layout

  1. 用途：提供各種佈局使用的容器
    設定grid佈局
     text1 := canvas.NewText("1", color.White)
 text2 := canvas.NewText("2", color.White)
 text3 := canvas.NewText("3", color.White)
 grid := fyne.NewContainerWithLayout(layout.NewGridLayout(2),
     text1, text2, text3)
    設定fixed佈局
     text1 := canvas.NewText("1", color.White)
 text2 := canvas.NewText("2", color.White)
 text3 := canvas.NewText("3", color.White)
 grid := fyne.NewContainerWithLayout(layout.NewFixedGridLayout(fyne.NewSize(50, 50)),
     text1, text2, text3)
    設定邊界佈局
     top := canvas.NewText("top bar", color.White)
 left := canvas.NewText("left", color.White)
 middle := canvas.NewText("content", color.White)
 content := fyne.NewContainerWithLayout(layout.NewBorderLayout(top, nil, left, nil),
     top, left, middle)
    設定表單佈局
     label1 := canvas.NewText("Label 1", color.Black)
 value1 := canvas.NewText("Value", color.White)
 label2 := canvas.NewText("Label 2", color.Black)
 value2 := canvas.NewText("Something", color.White)
 grid := fyne.NewContainerWithLayout(layout.NewFormLayout(),
     label1, value1, label2, value2)
    設定居中佈局
     img := canvas.NewImageFromResource(theme.FyneLogo())
 img.FillMode = canvas.ImageFillOriginal
 text := canvas.NewText("Overlay", color.Black)
 content := fyne.NewContainerWithLayout(layout.NewCenterLayout(),
     img, text)
    設定佔滿佈局
     img := canvas.NewImageFromResource(theme.FyneLogo())
 text := canvas.NewText("Overlay", color.Black)
 content := fyne.NewContainerWithLayout(layout.NewMaxLayout(),
     img, text)

test

  1. 用途：測試包
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章