darjun
darjun

Go 每日一库之 fyne

简介

Go 语言生态中，GUI 一直是短板，更别说跨平台的 GUI 了。fyne向前迈了一大步。fyne 是 Go 语言编写的跨平台的 UI 库，它可以很方便地移植到手机设备上。fyne使用上非常简单，同时它还提供fyne命令打包静态资源和应用程序。我们先简单介绍基本控件和布局，然后介绍如何发布一个fyne应用程序。

快速使用

本文代码使用 Go Modules。

先初始化：

$ mkdir fyne && cd fyne
$ go mod init github.com/darjun/go-daily-lib/fyne

由于fyne包含一些 C/C++ 的代码，所以需要gcc编译工具。在 Linux/Mac OSX 上，gcc基本是标配，在 windows 上我们有 3 种方式安装gcc工具链：

本文选择TDM-GCC的方式安装。到https://jmeubank.github.io/tdm-gcc/download/下载安装程序并安装。正常情况下安装程序会自动设置PATH路径。打开命令行，键入gcc -v。如果正常输出版本信息，说明安装成功且环境变量设置正确。

安装fyne：

$ go get -u fyne.io/fyne

到此准备工作已经完成，我们开始编码。按照惯例，先以Hello, World程序开始：

package main

import (
  "fyne.io/fyne"
  "fyne.io/fyne/app"
  "fyne.io/fyne/widget"
)

func main() {
  myApp := app.New()

  myWin := myApp.NewWindow("Hello")
  myWin.SetContent(widget.NewLabel("Hello Fyne!"))
  myWin.Resize(fyne.NewSize(200, 200))
  myWin.ShowAndRun()
}

运行结果如下：

fyne的使用很简单。每个fyne程序都包括两个部分，一个是应用程序对象myApp，通过app.New()创建。另一个是窗口对象，通过应用程序对象myApp来创建myApp.NewWindow("Hello")。myApp.NewWindow()方法中传入的字符串就是窗口标题。

fyne提供了很多常用的组件，通过widget.NewXXX()创建（XXX为组件名）。上面示例中，我们创建了一个Label控件，然后设置到窗口中。最后，调用myWin.ShowAndRun()开始运行程序。实际上myWin.ShowAndRun()等价于

myWin.Show()
myApp.Run()

myWin.Show()显示窗口，myApp.Run()开启事件循环。

注意一点，fyne默认窗口大小是根据内容的宽高来设置的。上面我们调用myWin.Resize()手动设置了大小。否则窗口只能放下字符串Hello Fyne!。

fyne包结构划分

fyne将功能划分到多个子包中：

  • fyne.io/fyne：提供所有fyne应用程序代码共用的基础定义，包括数据类型和接口；
  • fyne.io/fyne/app：提供创建应用程序的 API；
  • fyne.io/fyne/canvas：提供Fyne使用的绘制 API；
  • fyne.io/fyne/dialog：提供对话框组件；
  • fyne.io/fyne/layout：提供多种界面布局；
  • fyne.io/fyne/widget：提供多种组件，fyne所有的窗体控件和交互元素都在这个子包中。

Canvas

在fyne应用程序中，所有显示元素都是绘制在画布（Canvas）上的。这些元素都是画布对象（CanvasObject）。调用Canvas.SetContent()方法可设置画布内容。Canvas一般和布局（Layout）容器（Container）一起使用。canvas子包中提供了一些基础的画布对象：

package main

import (
  "image/color"
  "math/rand"

  "fyne.io/fyne"
  "fyne.io/fyne/app"
  "fyne.io/fyne/canvas"
  "fyne.io/fyne/layout"
  "fyne.io/fyne/theme"
)

func main() {
  a := app.New()
  w := a.NewWindow("Canvas")

  rect := canvas.NewRectangle(color.White)

  text := canvas.NewText("Hello Text", color.White)
  text.Alignment = fyne.TextAlignTrailing
  text.TextStyle = fyne.TextStyle{Italic: true}

  line := canvas.NewLine(color.White)
  line.StrokeWidth = 5

  circle := canvas.NewCircle(color.White)
  circle.StrokeColor = color.Gray{0x99}
  circle.StrokeWidth = 5

  image := canvas.NewImageFromResource(theme.FyneLogo())
  image.FillMode = canvas.ImageFillOriginal

  raster := canvas.NewRasterWithPixels(
    func(_, _, w, h int) color.Color {
      return color.RGBA{uint8(rand.Intn(255)),
        uint8(rand.Intn(255)),
        uint8(rand.Intn(255)), 0xff}
    },
  )

  gradient := canvas.NewHorizontalGradient(color.White, color.Transparent)

  container := fyne.NewContainerWithLayout(
    layout.NewGridWrapLayout(fyne.NewSize(150, 150)),
    rect, text, line, circle, image, raster, gradient))
  w.SetContent(container)
  w.ShowAndRun()
}

程序运行结果如下：

canvas.Rectangle是最简单的画布对象了，通过canvas.NewRectangle()创建，传入填充颜色。

canvas.Text是显示文本的画布对象，通过canvas.NewText()创建，传入文本字符串和颜色。该对象可设置对齐方式和字体样式。对齐方式通过设置Text对象的Alignment字段值，取值有：

  • TextAlignLeading：左对齐；
  • TextAlignCenter：中间对齐；
  • TextAlignTrailing：右对齐。

字体样式通过设置Text对象的TextStyle字段值，TextStyle是一个结构体：

type TextStyle struct {
  Bold      bool
  Italic    bool
  Monospace bool
}

对应字段设置为true将显示对应的样式：

  • Bold：粗体；
  • Italic：斜体；
  • Monospace：系统等宽字体。

我们还可以通过设置环境变量FYNE_FONT为一个.ttf文件从而使用外部字体。

canvas.Line是线段，通过canvas.NewLine()创建，传入颜色。可以通过line.StrokeWidth设置线段宽度。默认情况下，线段是从父控件或画布的左上角到右下角的。可通过line.Move()和line.Resize()修改位置。

canvas.Circle是圆形，通过canvas.NewCircle()创建，传入颜色。另外通过StrokeColor和StrokeWidth设置圆形边框的颜色和宽度。

canvas.Image是图像，可以通过已加载的程序资源创建（canvas.NewImageFromResource()），传入资源对象。或通过文件路径创建（canvas.NewImageFromFile()），传入文件路径。或通过已构造的image.Image对象创建（canvas.NewImageFromImage()）。可以通过FillMode设置图像的填充模式：

  • ImageFillStretch：拉伸，填满空间；
  • ImageFillContain：保持宽高比；
  • ImageFillOriginal：保持原始大小，不缩放。

下面程序演示了这 3 种创建图像的方式：

package main

import (
  "image"
  "image/color"

  "fyne.io/fyne"
  "fyne.io/fyne/app"
  "fyne.io/fyne/canvas"
  "fyne.io/fyne/layout"
  "fyne.io/fyne/theme"
)

func main() {
  a := app.New()
  w := a.NewWindow("Hello")

  img1 := canvas.NewImageFromResource(theme.FyneLogo())
  img1.FillMode = canvas.ImageFillOriginal

  img2 := canvas.NewImageFromFile("./luffy.jpg")
  img2.FillMode = canvas.ImageFillOriginal

  image := image.NewAlpha(image.Rectangle{image.Point{0, 0}, image.Point{100, 100}})
  for i := 0; i < 100; i++ {
    for j := 0; j < 100; j++ {
      image.Set(i, j, color.Alpha{uint8(i % 256)})
    }
  }
  img3 := canvas.NewImageFromImage(image)
  img3.FillMode = canvas.ImageFillOriginal

  container := fyne.NewContainerWithLayout(
    layout.NewGridWrapLayout(fyne.NewSize(150, 150)),
    img1, img2, img3)
  w.SetContent(container)
  w.ShowAndRun()
}

theme.FyneLogo()是 Fyne 图标资源，luffy.jpg是磁盘中的文件，最后创建一个image.Image，从中生成canvas.Image。

最后一种是梯度渐变效果，有两种类型canvas.LinearGradient（线性渐变）和canvas.RadialGradient（放射渐变），指从一种颜色渐变到另一种颜色。线性渐变又分为两种水平线性渐变和垂直线性渐变，分别通过canvas.NewHorizontalGradient()和canvas.NewVerticalGradient()创建。放射渐变通过canvas.NewRadialGradient()创建。我们在上面的示例中已经看到了水平线性渐变的效果，接下来一起看看放射渐变的效果：

func main() {
  a := app.New()
  w := a.NewWindow("Canvas")

  gradient := canvas.NewRadialGradient(color.White, color.Transparent)
  w.SetContent(gradient)
  w.Resize(fyne.NewSize(200, 200))
  w.ShowAndRun()
}

运行效果如下：

放射效果就是从中心向周围渐变。

Widget

窗体控件是一个Fyne应用程序的主要组成部分。它们能适配当前的主题，并且处理与用户的交互。

Label

标签（Label）是最简单的一个控件了，用于显示字符串。它有点类似于canvas.Text，不同之处在于Label可以处理简单的格式化，例如\n：

func main() {
  myApp := app.New()
  myWin := myApp.NewWindow("Label")

  l1 := widget.NewLabel("Name")
  l2 := widget.NewLabel("da\njun")

  container := fyne.NewContainerWithLayout(layout.NewVBoxLayout(), l1, l2)
  myWin.SetContent(container)
  myWin.Resize(fyne.NewSize(150, 150))
  myWin.ShowAndRun()
}

第二个widget.Label中\n后面的内容会在下一行渲染：

Button

按钮（Button）控件让用户点击，给用户反馈。Button可以包含文本，图标或两者皆有。调用widget.NewButton()创建一个默认的文本按钮，传入文本和一个无参的回调函数。带图标的按钮需要调用widget.NewButtonWithIcon()，传入文本和回调参数，还需要一个fyne.Resource类型的图标资源：

func main() {
  myApp := app.New()
  myWin := myApp.NewWindow("Button")

  btn1 := widget.NewButton("text button", func() {
    fmt.Println("text button clicked")
  })

  btn2 := widget.NewButtonWithIcon("icon", theme.HomeIcon(), func() {
    fmt.Println("icon button clicked")
  })

  container := fyne.NewContainerWithLayout(layout.NewVBoxLayout(), btn1, btn2)
  myWin.SetContent(container)
  myWin.Resize(fyne.NewSize(150, 50))
  myWin.ShowAndRun()
}

上面创建了一个文本按钮和一个图标按钮，theme子包中包含一些默认的图标资源，也可以加载外部的图标。运行：

点击按钮，对应的回调就会被调用，试试看！

Box

盒子控件（Box）就是一个简单的水平或垂直的容器。在内部，Box对子控件采用盒状布局（Box Layout），详见后文布局。我们可以通过传入控件对象给widget.NewHBox()或widget.NewVBox()创建盒子。或者调用已经创建好的widget.Box对象的Append()或Prepend()向盒子中添加控件。前者在尾部追加，后者在头部添加。

func main() {
  myApp := app.New()
  myWin := myApp.NewWindow("Box")

  content := widget.NewVBox(
    widget.NewLabel("The top row of VBox"),
    widget.NewHBox(
      widget.NewLabel("Label 1"),
      widget.NewLabel("Label 2"),
    ),
  )
  content.Append(widget.NewButton("Append", func() {
    content.Append(widget.NewLabel("Appended"))
  }))
  content.Append(widget.NewButton("Prepend", func() {
    content.Prepend(widget.NewLabel("Prepended"))
  }))

  myWin.SetContent(content)
  myWin.Resize(fyne.NewSize(150, 150))
  myWin.ShowAndRun()
}

我们甚至可以嵌套widget.Box控件，这样就可以实现比较灵活的布局。上面的代码中添加了两个按钮，点击时分别在尾部和头部添加一个Label：

Entry

输入框（Entry）控件用于给用户输入简单的文本内容。调用widget.NewEntry()即可创建一个输入框控件。我们一般保存输入框控件的引用，以便访问其Text字段来获取内容。注册OnChanged回调函数。每当内容有修改时，OnChanged就会被调用。我们可以调用SetReadOnly(true)设置输入框的只读属性。方法SetPlaceHolder()用来设置占位字符串，设置字段Multiline让输入框接受多行文本。另外，我们可以使用NewPasswordEntry()创建一个密码输入框，输入的文本不会以明文显示。

func main() {
  myApp := app.New()
  myWin := myApp.NewWindow("Entry")

  nameEntry := widget.NewEntry()
  nameEntry.SetPlaceHolder("input name")
  nameEntry.OnChanged = func(content string) {
    fmt.Println("name:", nameEntry.Text, "entered")
  }

  passEntry := widget.NewPasswordEntry()
  passEntry.SetPlaceHolder("input password")

  nameBox := widget.NewHBox(widget.NewLabel("Name"), layout.NewSpacer(), nameEntry)
  passwordBox := widget.NewHBox(widget.NewLabel("Password"), layout.NewSpacer(), passEntry)

  loginBtn := widget.NewButton("Login", func() {
    fmt.Println("name:", nameEntry.Text, "password:", passEntry.Text, "login in")
  })

  multiEntry := widget.NewEntry()
  multiEntry.SetPlaceHolder("please enter\nyour description")
  multiEntry.MultiLine = true

  content := widget.NewVBox(nameBox, passwordBox, loginBtn, multiEntry)
  myWin.SetContent(content)
  myWin.ShowAndRun()
}

这里我们实现了一个简单的登录界面：

Checkbox/Radio/Select

CheckBox是简单的选择框，每个选择是独立的，例如爱好可以是足球、篮球，也可以都是。创建方法widget.NewCheck()，传入选项字符串（足球，篮球）和回调函数。回调函数接受一个bool类型的参数，表示该选项是否选中。

Radio是单选框，每个组内只能选择一个，例如性别，只能是男或女（？）。创建方法widget.NewRadio()，传入字符串切片和回调函数作为参数。回调函数接受一个字符串参数，表示选中的选项。也可以使用Selected字段读取选中的选项。

Select是下拉选择框，点击时显示一个下拉菜单，点击选择。选项非常多的时候，比较适合用Select。创建方法widget.NewSelect()，参数与NewRadio()完全相同。

func main() {
  myApp := app.New()
  myWin := myApp.NewWindow("Choices")

  nameEntry := widget.NewEntry()
  nameEntry.SetPlaceHolder("input name")

  passEntry := widget.NewPasswordEntry()
  passEntry.SetPlaceHolder("input password")

  repeatPassEntry := widget.NewPasswordEntry()
  repeatPassEntry.SetPlaceHolder("repeat password")

  nameBox := widget.NewHBox(widget.NewLabel("Name"), layout.NewSpacer(), nameEntry)
  passwordBox := widget.NewHBox(widget.NewLabel("Password"), layout.NewSpacer(), passEntry)
  repeatPasswordBox := widget.NewHBox(widget.NewLabel("Repeat Password"), layout.NewSpacer(), repeatPassEntry)

  sexRadio := widget.NewRadio([]string{"male", "female", "unknown"}, func(value string) {
    fmt.Println("sex:", value)
  })
  sexBox := widget.NewHBox(widget.NewLabel("Sex"), sexRadio)

  football := widget.NewCheck("football", func(value bool) {
    fmt.Println("football:", value)
  })
  basketball := widget.NewCheck("basketball", func(value bool) {
    fmt.Println("basketball:", value)
  })
  pingpong := widget.NewCheck("pingpong", func(value bool) {
    fmt.Println("pingpong:", value)
  })
  hobbyBox := widget.NewHBox(widget.NewLabel("Hobby"), football, basketball, pingpong)

  provinceSelect := widget.NewSelect([]string{"anhui", "zhejiang", "shanghai"}, func(value string) {
    fmt.Println("province:", value)
  })
  provinceBox := widget.NewHBox(widget.NewLabel("Province"), layout.NewSpacer(), provinceSelect)

  registerBtn := widget.NewButton("Register", func() {
    fmt.Println("name:", nameEntry.Text, "password:", passEntry.Text, "register")
  })

  content := widget.NewVBox(nameBox, passwordBox, repeatPasswordBox,
    sexBox, hobbyBox, provinceBox, registerBtn)
  myWin.SetContent(content)
  myWin.ShowAndRun()
}

这里我们实现了一个简单的注册界面：

Form

表单控件（Form）用于对很多Label和输入控件进行布局。如果指定了OnSubmit或OnCancel函数，表单控件会自动添加对应的Button按钮。我们调用widget.NewForm()传入一个widget.FormItem切片创建Form控件。每一项中一个字符串作为Label的文本，一个控件对象。创建好Form对象之后还能调用其Append(label, widget)方法添加控件。

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("Form")

  nameEntry := widget.NewEntry()
  passEntry := widget.NewPasswordEntry()

  form := widget.NewForm(
    &widget.FormItem{"Name", nameEntry},
    &widget.FormItem{"Pass", passEntry},
  )
  form.OnSubmit = func() {
    fmt.Println("name:", nameEntry.Text, "pass:", passEntry.Text, "login in")
  }
  form.OnCancel = func() {
    fmt.Println("login canceled")
  }

  myWindow.SetContent(form)
  myWindow.Resize(fyne.NewSize(150, 150))
  myWindow.ShowAndRun()
}

使用Form能大大简化表单的构建，我们使用Form重新编写了上面的登录界面：

注意Submit和Cancel按钮是自动生成的！

ProgressBar

进度条控件（ProgressBar）用来表示任务的进度，例如文件下载的进度。创建方法widget.NewProgressBar()，默认最小值为0.0，最大值为1.1，可通过Min/Max字段设置。调用SetValue()方法来控制进度。还有一种进度条是循环动画，它表示有任务在进行中，并不能表示具体的完成情况。

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("ProgressBar")

  bar1 := widget.NewProgressBar()
  bar1.Min = 0
  bar1.Max = 100
  bar2 := widget.NewProgressBarInfinite()

  go func() {
    for i := 0; i <= 100; i ++ {
      time.Sleep(time.Millisecond * 500)
      bar1.SetValue(float64(i))
    }
  }()

  content := widget.NewVBox(bar1, bar2)
  myWindow.SetContent(content)
  myWindow.Resize(fyne.NewSize(150, 150))
  myWindow.ShowAndRun()
}

在另一个 goroutine 中更新进度。效果如下：

TabContainer

标签容器（TabContainer）允许用户在不同的内容面板之间切换。标签可以是文本或图标。创建方法widget.NewTabContainer()，传入widget.TabItem作为参数。widget.TabItem可通过widget.NewTabItem(label, widget)创建。标签还可以设置位置：

  • TabLocationBottom：显示在底部；
  • TabLocationLeading：显示在顶部左边；
  • TabLocationTrailing：显示在顶部右边。

看示例：

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("TabContainer")

  nameLabel := widget.NewLabel("Name: dajun")
  sexLabel := widget.NewLabel("Sex: male")
  ageLabel := widget.NewLabel("Age: 18")
  addressLabel := widget.NewLabel("Province: shanghai")
  addressLabel.Hide()
  profile := widget.NewVBox(nameLabel, sexLabel, ageLabel, addressLabel)

  musicRadio := widget.NewRadio([]string{"on", "off"}, func(string) {})
  showAddressCheck := widget.NewCheck("show address?", func(value bool) {
    if !value {
      addressLabel.Hide()
    } else {
      addressLabel.Show()
    }
  })
  memberTypeSelect := widget.NewSelect([]string{"junior", "senior", "admin"}, func(string) {})

  setting := widget.NewForm(
    &widget.FormItem{"music", musicRadio},
    &widget.FormItem{"check", showAddressCheck},
    &widget.FormItem{"member type", memberTypeSelect},
  )

  tabs := widget.NewTabContainer(
    widget.NewTabItem("Profile", profile),
    widget.NewTabItem("Setting", setting),
  )

  myWindow.SetContent(tabs)
  myWindow.Resize(fyne.NewSize(200, 200))
  myWindow.ShowAndRun()
}

上面代码编写了一个简单的个人信息面板和设置面板，点击show address？可切换地址信息是否显示：

Toolbar

工具栏（Toolbar）是很多 GUI 应用程序必备的部分。工具栏将常用命令用图标的方式很形象地展示出来，方便使用。创建方法widget.NewToolbar()，传入多个widget.ToolbarItem作为参数。最常使用的ToolbarItem有命令（Action）、分隔符（Separator）和空白（Spacer），分别通过widget.NewToolbarItemAction(resource, callback)/widget.NewToolbarSeparator()/widget.NewToolbarSpacer()创建。命令需要指定回调，点击时触发。

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("Toolbar")

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

  content := fyne.NewContainerWithLayout(
    layout.NewBorderLayout(toolbar, nil, nil, nil),
    toolbar, widget.NewLabel(`Lorem ipsum dolor, 
    sit amet consectetur adipisicing elit.
    Quidem consectetur ipsam nesciunt,
    quasi sint expedita minus aut,
    porro iusto magnam ducimus voluptates cum vitae.
    Vero adipisci earum iure consequatur quidem.`),
  )
  myWindow.SetContent(content)
  myWindow.ShowAndRun()
}

工具栏一般使用BorderLayout，将工具栏放在其他任何控件上面，布局后文会详述。运行：

扩展控件

标准的 Fyne 控件提供了最小的功能集和定制化以适应大部分的应用场景。有些时候，我们需要更高级的功能。除了自己编写控件外，我们还可以扩展现有的控件。例如，我们希望图标控件widget.Icon能响应鼠标左键、右键和双击。首先编写一个构造函数，调用ExtendBaseWidget()方法获得基础的控件功能：

type tappableIcon struct {
  widget.Icon
}

func newTappableIcon(res fyne.Resource) *tappableIcon {
  icon := &tappableIcon{}
  icon.ExtendBaseWidget(icon)
  icon.SetResource(res)

  return icon
}

然后实现相关的接口：

// src/fyne.io/fyne/canvasobject.go
// 鼠标左键
type Tappable interface {
  Tapped(*PointEvent)
}

// 鼠标右键或长按
type SecondaryTappable interface {
  TappedSecondary(*PointEvent)
}

// 双击
type DoubleTappable interface {
  DoubleTapped(*PointEvent)
}

接口实现：

func (t *tappableIcon) Tapped(e *fyne.PointEvent) {
  log.Println("I have been left tapped at", e)
}

func (t *tappableIcon) TappedSecondary(e *fyne.PointEvent) {
  log.Println("I have been right tapped at", e)
}

func (t *tappableIcon) DoubleTapped(e *fyne.PointEvent) {
  log.Println("I have been double tapped at", e)
}

最后使用：

func main() {
  a := app.New()
  w := a.NewWindow("Tappable")
  w.SetContent(newTappableIcon(theme.FyneLogo()))
  w.Resize(fyne.NewSize(200, 200))
  w.ShowAndRun()
}

运行，点击图标控制台有相应输出：

2020/06/18 06:44:02 I have been left tapped at &{{110 97} {106 93}}
2020/06/18 06:44:03 I have been left tapped at &{{110 97} {106 93}}
2020/06/18 06:44:05 I have been right tapped at &{{88 102} {84 98}}
2020/06/18 06:44:06 I have been right tapped at &{{88 102} {84 98}}
2020/06/18 06:44:06 I have been left tapped at &{{88 101} {84 97}}
2020/06/18 06:44:07 I have been double tapped at &{{88 101} {84 97}}

输出的fyne.PointEvent中有绝对位置（对于窗口左上角）和相对位置（对于容器左上角）。

Layout

布局（Layout）就是控件如何在界面上显示，如何排列的。要想界面好看，布局是必须要掌握的。几乎所有的 GUI 框架都提供了布局或类似的接口。实际上，在前面的示例中我们已经在fyne.NewContainerWithLayout()函数中使用了布局。

BoxLayout

盒状布局（BoxLayout）是最常使用的一个布局。它将控件都排在一行或一列。在fyne中，我们可以通过layout.NewHBoxLayout()创建一个水平盒装布局，通过layout.NewVBoxLayout()创建一个垂直盒装布局。水平布局中的控件都排列在一行中，每个控件的宽度等于其内容的最小宽度（MinSize().Width），它们都拥有相同的高度，即所有控件的最大高度（MinSize().Height）。

垂直布局中的控件都排列在一列中，每个控件的高度等于其内容的最小高度，它们都拥有相同的宽度，即所有控件的最大宽度。

一般地，在BoxLayout中使用layout.NewSpacer()辅助布局，它会占满剩余的空间。对于水平盒状布局来说，第一个控件前添加一个layout.NewSpacer()，所有控件右对齐。最后一个控件后添加一个layout.NewSpacer()，所有控件左对齐。前后都有，那么控件中间对齐。如果在中间有添加一个layout.NewSpacer()，那么其它控件两边对齐。

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("Box Layout")

  hcontainer1 := fyne.NewContainerWithLayout(layout.NewHBoxLayout(),
    canvas.NewText("left", color.White),
    canvas.NewText("right", color.White))

  // 左对齐
  hcontainer2 := fyne.NewContainerWithLayout(layout.NewHBoxLayout(),
    layout.NewSpacer(),
    canvas.NewText("left", color.White),
    canvas.NewText("right", color.White))

  // 右对齐
  hcontainer3 := fyne.NewContainerWithLayout(layout.NewHBoxLayout(),
    canvas.NewText("left", color.White),
    canvas.NewText("right", color.White),
    layout.NewSpacer())

  // 中间对齐
  hcontainer4 := fyne.NewContainerWithLayout(layout.NewHBoxLayout(),
    layout.NewSpacer(),
    canvas.NewText("left", color.White),
    canvas.NewText("right", color.White),
    layout.NewSpacer())

  // 两边对齐
  hcontainer5 := fyne.NewContainerWithLayout(layout.NewHBoxLayout(),
    canvas.NewText("left", color.White),
    layout.NewSpacer(),
    canvas.NewText("right", color.White))

  myWindow.SetContent(fyne.NewContainerWithLayout(layout.NewVBoxLayout(),
    hcontainer1, hcontainer2, hcontainer3, hcontainer4, hcontainer5))
  myWindow.Resize(fyne.NewSize(200, 200))
  myWindow.ShowAndRun()
}

运行效果：

GridLayout

格子布局（GridLayout）每一行有固定的列，添加的控件数量超过这个值时，后面的控件将会在新的行显示。创建方法layout.NewGridLayout(cols)，传入每行的列数。

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("Grid Layout")

  img1 := canvas.NewImageFromResource(theme.FyneLogo())
  img2 := canvas.NewImageFromResource(theme.FyneLogo())
  img3 := canvas.NewImageFromResource(theme.FyneLogo())
  myWindow.SetContent(fyne.NewContainerWithLayout(layout.NewGridLayout(2),
    img1, img2, img3))
  myWindow.Resize(fyne.NewSize(300, 300))
  myWindow.ShowAndRun()
}

运行效果：

该布局有个优势，我们缩放界面时，控件会自动调整大小。试试看~

GridWrapLayout

GridWrapLayout是GridLayout的扩展。GridWrapLayout创建时会指定一个初始size，这个size会应用到所有的子控件上，每个子控件都保持这个size。初始，每行一个控件。如果界面大小变化了，这些子控件会重新排列。例如宽度翻倍了，那么一行就可以排两个控件了。有点像流动布局：

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("Grid Wrap Layout")

  img1 := canvas.NewImageFromResource(theme.FyneLogo())
  img2 := canvas.NewImageFromResource(theme.FyneLogo())
  img3 := canvas.NewImageFromResource(theme.FyneLogo())
  myWindow.SetContent(
    fyne.NewContainerWithLayout(
      layout.NewGridWrapLayout(fyne.NewSize(150, 150)),
      img1, img2, img3))
  myWindow.ShowAndRun()
}

初始：

加大宽度：

再加大宽度：

BorderLayout

边框布局（BorderLayout）比较常用于构建用户界面，上面例子中的Toolbar一般都和BorderLayout搭配使用。创建方法layout.NewBorderLayout(top, bottom, left, right)，分别传入顶部、底部、左侧、右侧的控件对象。添加到容器中的控件如果是这些边界对象，则显示在对应位置，其他都显示在中心：

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("Border Layout")

  left := canvas.NewText("left", color.White)
  right := canvas.NewText("right", color.White)
  top := canvas.NewText("top", color.White)
  bottom := canvas.NewText("bottom", color.White)
  content := widget.NewLabel(`Lorem ipsum dolor, 
  sit amet consectetur adipisicing elit.
  Quidem consectetur ipsam nesciunt,
  quasi sint expedita minus aut,
  porro iusto magnam ducimus voluptates cum vitae.
  Vero adipisci earum iure consequatur quidem.`)

  container := fyne.NewContainerWithLayout(
    layout.NewBorderLayout(top, bottom, left, right),
    top, bottom, left, right, content,
  )
  myWindow.SetContent(container)
  myWindow.ShowAndRun()
}

效果：

FormLayout

表单布局（FormLayout）其实就是一个 2 列的GridLayout，但是针对表单做了一些微调。

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("Border Layout")

  nameLabel := canvas.NewText("Name", color.Black)
  nameValue := canvas.NewText("dajun", color.White)
  ageLabel := canvas.NewText("Age", color.Black)
  ageValue := canvas.NewText("18", color.White)

  container := fyne.NewContainerWithLayout(
    layout.NewFormLayout(),
    nameLabel, nameValue, ageLabel, ageValue,
  )
  myWindow.SetContent(container)
  myWindow.Resize(fyne.NewSize(150, 150))
  myWindow.ShowAndRun()
}

运行效果：

CenterLayout

CenterLayout将容器内的所有控件显示在中心位置，按传入的顺序显示。最后传入的控件显示最上层。CenterLayout中所有控件将保持它们的最小尺寸（大小能容纳其内容）。

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("Center Layout")

  image := canvas.NewImageFromResource(theme.FyneLogo())
  image.FillMode = canvas.ImageFillOriginal
  text := canvas.NewText("Fyne Logo", color.Black)

  container := fyne.NewContainerWithLayout(
    layout.NewCenterLayout(),
    image, text,
  )
  myWindow.SetContent(container)
  myWindow.ShowAndRun()
}

运行结果：

字符串Fyne Logo显示在图片上层。如果我们把text和image顺序对调，字符串将会被图片挡住，无法看到。动手试一下~

MaxLayout

MaxLayout与CenterLayout类似，不同之处在于MaxLayout会让容器内的元素都显示为最大尺寸（等于容器的大小）。细心的朋友可能发现了，在CenterLayout的示例中。我们设置了图片的填充模式为ImageFillOriginal。如果不设置填充模式，图片的默认MinSize为(1, 1)。可以fmt.Println(image.MinSize())验证一下。这样图片就不会显示在界面中。

在MaxLayout的容器中，我们不需要这样处理：

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("Max Layout")

  image := canvas.NewImageFromResource(theme.FyneLogo())
  text := canvas.NewText("Fyne Logo", color.Black)

  container := fyne.NewContainerWithLayout(
    layout.NewMaxLayout(),
    image, text,
  )
  myWindow.SetContent(container)
  myWindow.Resize(fyne.Size(200, 200))
  myWindow.ShowAndRun()
}

运行结果：

注意，canvas.Text显示为左对齐了。如果要居中对齐，设置其Alignment属性为fyne.TextAlignCenter。

自定义 Layout

内置布局在子包layout中。它们都实现了fyne.Layout接口：

// src/fyne.io/fyne/layout.go
type Layout interface {
  Layout([]CanvasObject, Size)
  MinSize(objects []CanvasObject) Size
}

要实现自定义的布局，只需要实现这个接口。下面我们实现一个台阶（对角）的布局，好似一个矩阵的对角线，从左上到右下。首先定义一个新的类型。然后实现接口fyne.Layout的两个方法：

type diagonal struct {
}

func (d *diagonal) MinSize(objects []fyne.CanvasObject) fyne.Size {
  w, h := 0, 0
  for _, o := range objects {
    childSize := o.MinSize()

    w += childSize.Width
    h += childSize.Height
  }

  return fyne.NewSize(w, h)
}

func (d *diagonal) Layout(objects []fyne.CanvasObject, containerSize fyne.Size) {
  pos := fyne.NewPos(0, 0)
  for _, o := range objects {
    size := o.MinSize()
    o.Resize(size)
    o.Move(pos)

    pos = pos.Add(fyne.NewPos(size.Width, size.Height))
  }
}

MinSize()返回所有子控件的MinSize之和。Layout()从左上到右下排列控件。然后是使用：

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("Diagonal Layout")

  img1 := canvas.NewImageFromResource(theme.FyneLogo())
  img1.FillMode = canvas.ImageFillOriginal
  img2 := canvas.NewImageFromResource(theme.FyneLogo())
  img2.FillMode = canvas.ImageFillOriginal
  img3 := canvas.NewImageFromResource(theme.FyneLogo())
  img3.FillMode = canvas.ImageFillOriginal

  container := fyne.NewContainerWithLayout(
    &diagonal{},
    img1, img2, img3,
  )
  myWindow.SetContent(container)
  myWindow.ShowAndRun()
}

运行结果：

fyne demo

fyne提供了一个 Demo，演示了大部分控件和布局的使用。可使用下面命令安装，执行：

$ go get fyne.io/fyne/cmd/fyne_demo
$ fyne_demo

效果图：

fyne命令

fyne库为了方便开发者提供了fyne命令。fyne可以用来将静态资源打包进可执行程序，还能将整个应用程序打包成可发布的形式。fyne命令通过下面命令安装：

$ go get fyne.io/fyne/cmd/fyne

安装完成之后fyne就在$GOPATH/bin目录中，将$GOPATH/bin添加到系统$PATH中就可以直接运行fyne命令了。

静态资源

其实在前面的示例中我们已经多次使用了fyne内置的静态资源，使用最多的要属fyne.FyneLogo()了。下面我们有两个图片image1.png/image2.jpg。我们使用fyne bundle命令将这两个图片打包进代码：

$ fyne bundle image1.png >> bundled.go
$ fyne bundle -append image2.jpg >> bundled.go

第二个命令指定-append选项表示添加到现有文件中，生成的文件如下：

// bundled.go
package main

import "fyne.io/fyne"

var resourceImage1Png = &fyne.StaticResource{
  StaticName: "image1.png",
  StaticContent: []byte{...}}

var resourceImage2Jpg = &fyne.StaticResource{
  StaticName: "image2.jpg",
  StaticContent: []byte{...}}

实际上就是将图片内容存入一个字节切片中，我们在代码中就可以调用canvas.NewImageFromResource()，传入resourceImage1Png或resourceImage2Jpg来创建canvas.Image对象了。

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("Bundle Resource")

  img1 := canvas.NewImageFromResource(resourceImage1Png)
  img1.FillMode = canvas.ImageFillOriginal
  img2 := canvas.NewImageFromResource(resourceImage2Jpg)
  img2.FillMode = canvas.ImageFillOriginal
  img3 := canvas.NewImageFromResource(theme.FyneLogo())
  img3.FillMode = canvas.ImageFillOriginal

  container := fyne.NewContainerWithLayout(
    layout.NewGridLayout(1),
    img1, img2, img3,
  )
  myWindow.SetContent(container)
  myWindow.ShowAndRun()
}

运行结果：

注意，由于现在是两个文件，不能使用go run main.go，应该用go run .。

theme.FyneLogo()实际上是也是提前打包进代码的，代码文件是bundled-icons.go：

// src/fyne.io/fyne/theme/icons.go
func FyneLogo() fyne.Resource {
  return fynelogo
}

// src/fyne.io/fyne/theme/bundled-icons.go
var fynelogo = &fyne.StaticResource{
  StaticName: "fyne.png",
  StaticContent: []byte{}}

发布应用程序

发布图像应用程序到多个操作系统是非常复杂的任务。图形界面应用程序通常有图标和一些元数据。fyne命令提供了将应用程序发布到多个平台的支持。使用fyne package命令将创建一个可在其它计算机上安装/运行的应用程序。在 Windows 上，fyne package会创建一个.exe文件。在 macOS 上，会创建一个.app文件。在 Linux 上，会生成一个.tar.xz文件，可手动安装。

我们将上面的应用程序打包成一个exe文件：

$ fyne package -os windows -icon icon.jpg

上面命令会在同目录下生成两个文件bundle.exe和fyne.syso，将这两个文件拷贝到任何目录或其他 Windows 计算机都可以通过直接双击bundle.exe运行了。没有其他的依赖。

fyne还支持交叉编译，能在 windows 上编译 mac 的应用程序，不过需要安装额外的工具，感兴趣可自行探索。

总结

fyne提供了丰富的组件和功能，我们介绍的只是很基础的一部分，还有剪切板、快捷键、滚动条、菜单等等等等内容。fyne命令实现打包静态资源和应用程序，非常方便。fyne还有其他高级功能留待大家探索、挖掘~

大家如果发现好玩、好用的 Go 语言库，欢迎到 Go 每日一库 GitHub 上提交 issue

参考

  1. fyne GitHub：https://github.com/fyne-io/fyne
  2. fyne 官网：https://fyne.io/
  3. fyne 官方入门教程：https://developer.fyne.io/tour/introduction/hello.html
  4. Go 每日一库 GitHub：https://github.com/darjun/go-daily-lib

我

我的博客：https://darjun.github.io

欢迎关注我的微信公众号【GoUpUp】，共同学习，一起进步~

你可能感兴趣的:(golang,gui,layout,bundle)

  • ARM驱动学习之基础小知识 JT灬新一 ARM嵌入式arm开发学习
    ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
  • 你可能遗漏的一些C#/.NET/.NET Core知识点 追逐时光者 C#.NETDotNetGuide编程指南c#.net.netcoremicrosoft
    前言在这个快速发展的技术世界中，时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NETCore拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节，以帮助大家更全面地了解这些技术栈的特性和发展方向。拾遗补漏GitHub开源地址https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/D
  • matlab mle 优化,MLE+: Matlab Toolbox for Integrated Modeling, Control and Optimization for Buildings... Simon Zhong matlabmle优化
    摘要：FollowingunilateralopticnervesectioninadultPVGhoodedrat,theaxonguidancecueephrin-A2isup-regulatedincaudalbutnotrostralsuperiorcolliculus(SC)andtheEphA5receptorisdown-regulatedinaxotomisedretinalgan
  • JAVA·一个简单的登录窗口 MortalTom java开发语言学习
    文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计
  • 笋丁网页自动回复机器人V3.0.0免授权版源码 希希分享 软希网58soho_cn源码资源笋丁网页自动回复机器人
    笋丁网页机器人一款可设置自动回复，默认消息，调用自定义api接口的网页机器人。此程序后端语言使用Golang，内存占用最高不超过30MB，1H1G服务器流畅运行。仅支持Linux服务器部署，不支持虚拟主机，请悉知！使用自定义api功能需要有一定的建站基础。源码下载：https://download.csdn.net/download/m0_66047725/89754250更多资源下载：关注我。安
  • Python3.7出现“ModuleNotFoundError: No module named ‘Tkinter‘”错误的解决方法 可爱的小红猪 python
    Python3.7出现“ModuleNotFoundError:Nomodulenamed‘Tkinter’”错误的解决方法在网上看到很多针对这个问题的解决方法都是重新安装或配置Tkinter库，但Tkinter是python内置的标准GUI库，安装Python时就已经内置在了库中，不需要另外下载。针对于Tkinter，你的代码很可能是这样的：importTkinter或者是这样fromTkint
  • Golang语言基础知识点总结 最帅猪猪侠 golang开发语言后端
    Golang语言基础知识点小总结1.go语言有两大类型：值类型：数值类型，bool，string，数组，struct结构体变量直接存储值，内存通常在栈中分配,修改值,不会对源对象产生影响引用类型：指针，slice切片，管道chan，map，interface变量存储的是一个地址，这个地址对应的空间才真正存储数据值，内存通常在堆上分配，当没有任何变量引用这个地址时，该地址对应的数据空间就成为一个垃圾
  • golang获取用户输入的几种方式 余生逆风飞翔 golang开发语言后端
    一、定义结构体typeUserInfostruct{Namestring`json:"name"`Ageint`json:"age"`Addstring`json:"add"`}typeReturnDatastruct{Messagestring`json:"message"`Statusstring`json:"status"`DataUserInfo`json:"data"`}二、get请求的
  • 【Golang】实现 Excel 文件下载功能 RumIV Golanggolangexcel开发语言
    在当今的网络应用开发中，提供数据导出功能是一项常见的需求。Excel作为一种广泛使用的电子表格格式，通常是数据导出的首选格式之一。在本教程中，我们将学习如何使用Go语言和GinWeb框架来创建一个Excel文件，并允许用户通过HTTP请求下载该文件。准备工作在开始之前，请确保您的开发环境中已经安装了Go语言和相关的开发工具。此外，您还需要安装GinWeb框架和excelize包，这两个包都将用于我
  • golang 实现文件上传下载 wangwei830 go
    Gin框架上传下载上传（支持批量上传）httpRouter.POST("/upload",func(ctx*gin.Context){forms,err:=ctx.MultipartForm()iferr!=nil{fmt.Println("error",err)}files:=forms.File["fileName"]for_,v:=rangefiles{iferr:=ctx.SaveUplo
  • golang实现从服务器下载文件到本地指定目录 余生逆风飞翔 golang服务器开发语言
    一、连接服务器，采用sftp连接模式packagemiddlewaresimport("fmt""time""github.com/pkg/sftp""golang.org/x/crypto/ssh")//建立服务器连接funcConnect(user,password,hoststring,portint)(*sftp.Client,error){var(auth[]ssh.AuthMethod
  • el-table实现全选整表，单元一页复选框功能 周bro vue.jselementuijavascript前端
    全选整表单选一页0":popper-append-to-body="false":total="tableData.length":page-size="pageObj.pagesize":page-sizes="[10,50,100]"layout="total,sizes,prev,pager,next"@size-change="handleSizeChange"@current-chang
  • 【Golang】 Golang 的 GORM 库中的 Rows 函数 不爱洗脚的小滕 golang开发语言后端
    文章目录前言一、Rows函数解释二、代码实现三、总结前言在使用Go语言进行数据库操作时，GORM（GoObject-RelationalMapping）库是一个常用的工具。它提供了一种简洁和强大的方式来处理数据库操作。本文将介绍GORM库中的Rows函数，这是一个用于执行原生SQL查询并返回结果的函数。一、Rows函数解释在GORM库中，Rows函数用于执行原生SQL查询并返回*sql.Rows结
  • 【Golang】使用 Golang 语言和 excelize 库将数据写入Excel 不爱洗脚的小滕 golangexcel开发语言
    文章目录前言一、Excelize简介二、代码实现1.获取依赖2.示例代码三、总结前言在数据处理和分析中，Excel作为一种常见的电子表格格式，被广泛应用于各种场景。然而，如何在Go语言中有效地处理Excel文件呢？在这篇博客中，我将介绍如何使用Go语言和excelize库将数据写入Excel文件。一、Excelize简介Excelize是一个用于读取和写入MicrosoftExcel™(XLSX)
  • 【Python】tkinter及组件如何使用 小九不懂SAP 我的Python日记python开发语言tkinter
    一、tkinter的应用场景tkinter是Python的标准GUI（图形用户界面）库，它提供了丰富的控件和工具，使得开发者能够轻松创建跨平台的桌面应用程序。以下是一些tkinter的常见应用场景：桌面应用程序开发：开发者可以使用tkinter来创建各种桌面应用程序，如文本编辑器、计算器、图片查看器、游戏等。这些应用程序可以具有复杂的用户界面，包括窗口、按钮、文本框、下拉菜单、滚动条等。数据可视化
  • 漫谈QWidget及其派生类(二) Caiaolun
    原文地址:https://blog.csdn.net/dbzhang800/article/details/6741344上一部分漫谈QWidget及其派生类(一)介绍了QWidget及其派生类,分：窗口、普通控件两种类型(其实有个Qt::SubWindow没有提，不过本系列中也没有介绍它的打算，因为我不熟)。本文接下来试图看看QLayout与窗口的几何尺寸控制。注意：本文只是试图解释，QLayo
  • Go编程语言前景怎么样？参加培训好就业吗 QFdongdong
    Go语言专门针对多处理器系统应用程序的编程进行了优化，使用Go编译的程序可以媲美C或C++代码的速度，而且更加安全、支持并行进程。不仅可以开发web,可以开发底层，目前知乎就是用golang开发。区块链首选语言就是go,以-太坊，超级账本都是基于go语言，还有go语言版本的btcd.Go的目标是希望提升现有编程语言对程序库等依赖性(dependency)的管理，这些软件元素会被应用程序反复调用。由
  • Go 面向包的设计和架构分层 云满笔记 golang架构directorylayoutsrcproject
    标题Go面向包的设计和架构分层序前项目架构分层工具包项目应用项目cmd/internal/internal/pkg/pkg/vendor/面向包的设计和验证包的位置依赖包导入应用级别的策略数据的发送和接收错误处理测试捕获错误不建议的目录结论Go面向包的设计和架构分层序本篇内容主要讲解golang项目的面向包设计准则和基础的架构分层。信息来自原文ArdanLabs:Package-Oriented-
  • Golang channel 死锁 羊城程序猿 golanggolang
    死锁是指两个或两个以上的协程的执行过程中，由于竞争资源或由于彼此通信而造成的一种阻塞的现象，若无外力作用，他们将无法推进下去,以下是总结出来的几种死锁情况。1.死锁1：一个通道在一个主go程里同时进行读和写2.死锁2：go程开启之前使用通道3.死锁3：通道1中调用了通道2，通道2中调用通道14.死锁4：直接读取空channel的死锁5.死锁5：超过channel缓存继续写入数据导致死锁6.向已关闭
  • golang学习笔记--MPG模型 xxzed golang#学习笔记学习笔记golang
    MPG模式：M（Machine）：操作系统的主线程P（Processor）：协程执行需要的资源（上下文context），可以看作一个局部的调度器，使go代码在一个线程上跑，他是实现从N：1到N：M映射的关键G（Goroutine）：协程，有自己的栈。包含指令指针（instructionpointer）和其它信息（正在等待的channel等等），用于调度。一个P下面可以有多个G1、当前程序有三个M,
  • Golang Channel PandaSkr golang
    Channel解析1.Channel源码分析1.1Channel数据结构typehchanstruct{qcountuint//channel的元素数量dataqsizuint//channel循环队列长度bufunsafe.Pointer//指向循环队列的指针elemsizeuint16//元素大小closeduint32//channel是否关闭0-未关闭elemtype*_type//元素类
  • C# 禁止程序重复启动 wiseyao1219 c#
    修改：Program.cs[STAThread]staticvoidMain(){Mutexmutex=newMutex(true,"NewGuid123456",outboolisCreatedNew);if(!isCreatedNew){MessageBox.Show(Application.ProductName+"isrunning...");return;}Application.Ena
  • MATLAB语言基础教程、 小项目1：简单的计算器、 小项目2：有页面的计算器、使用App Designer创建GUI计算器 azuredragonz 学习教程matlab开发语言
    MATLABMATLAB语言基础教程1.MATLAB简介2.基本语法变量与赋值向量与矩阵矩阵运算数学函数控制流3.函数4.绘图案例：简单方程求解小项目1：简单的科学计算器功能代码项目说明小项目2：有页面的计算器使用AppDesigner创建GUI计算器主要步骤：完整代码（使用MATLAB编写）说明：如何运行：小项目总结MATLAB语言基础教程1.MATLAB简介MATLAB（矩阵实验室）是一种用于
  • [Golang] goroutine 沉着冷静2024 Golanggolang后端
    [Golang]goroutine文章目录[Golang]goroutine并发进程和线程协程goroutine概述如何使用goroutine并发进程和线程谈到并发，大多都离不开进程和线程，什么是进程、什么是线程？进程可以这样理解：进程就是运行着的程序，它是程序在操作系统的一次执行过程，是一个程序的动态概念，进程是操作系统分配资源的基本单位。线程可以这样理解：线程是一个进程的执行实体，它是比进程粒
  • python图片匹配 给麦兜吃芒果 pythonpython
    #方法一，可以直接用importpyautogui,timeclassPic():def__init__(self):passself.w,self.h=pyautogui.size()defget_win(self,number_x=32,number_y=24):#读取页面，记录rgb数据tx=int(self.w/number_x)ty=int(self.h/number_y)img=pya
  • py获取系统缩放比例 xu-jssy Python自动化脚本python前端
    fromwin32.libimportwin32conimportwin32api,win32gui,win32printscaling=1.0defget_real_resolution():"""获取真实的分辨率"""hDC=win32gui.GetDC(0)wide=win32print.GetDeviceCaps(hDC,win32con.DESKTOPHORZRES)high=win32
  • 利用Python+OpenCV实现截图匹配图像，支持自适应缩放、灰度匹配、区域匹配、匹配多个结果 xu-jssy Python自动化脚本pythonopencv开发语言图像处理自动化
    可以直接通过pip获取，无需手动安装其他依赖pipinstallxug示例：importxugxug.find_image_on_screen(,,,)=========================================================================一、依赖安装pipinstallopencv-pythonpipinstallpyautogui二、获
  • 关于UI刷新重绘 草帽小子J
    最近做了一个关于用户雷达图的需求，有用到关于ui绘制相关的东西，于是去了解了下关于invalidate()、postInvalidate()、requestLayout()的知识。invalidate该方法会请求重绘view树，即draw(),刷新UI,并且不会调用onMeasure()，谁调用重绘谁，ViewGroup则重绘整个ViewGroup.一般会触发invalidate的主要为如下几种方
  • greenplum资源队列 李春田
    文章来源https://www.cnblogs.com/pl-boke/p/9852439.html官方文档：https://gpdb.docs.pivotal.io/6-8/admin_guide/workload_mgmt.html1、创建资源队列语法Command:CREATERESOURCEQUEUEDescription:createanewresourcequeueforworkloa
  • 【十八】【QT开发应用】标签页QTabWidget的常见用法 妖精七七_ QT开发应用qt开发语言
    #include"widget.h"//包含自定义的widget头文件#include//包含QHBoxLayout头文件，用于水平布局#include//包含QTabWidget头文件，用于创建标签页控件#include//包含QDebug头文件，用于调试输出widget::widget(QWidget*parent)//widget类的构造函数:QWidget(parent)//调用基类QWi
  • Spring的注解积累 yijiesuifeng spring注解
    用注解来向Spring容器注册Bean。   需要在applicationContext.xml中注册： <context:component-scan base-package=”pagkage1[,pagkage2,…,pagkageN]”/>。 如：在base-package指明一个包    <context:component-sc
  • 传感器 百合不是茶 android传感器
    android传感器的作用主要就是来获取数据,根据得到的数据来触发某种事件   下面就以重力传感器为例;   1,在onCreate中获得传感器服务   private SensorManager sm;// 获得系统的服务 private Sensor sensor;// 创建传感器实例 @Override protected void
  • [光磁与探测]金吕玉衣的意义 comsci
          这是一个古代人的秘密:现在告诉大家       信不信由你们:       穿上金律玉衣的人,如果处于灵魂出窍的状态,可以飞到宇宙中去看星星       这就是为什么古代
  • 精简的反序打印某个数 沐刃青蛟 打印
    以前看到一些让求反序打印某个数的程序。 比如：输入123，输出321。   记得以前是告诉你是几位数的，当时就抓耳挠腮，完全没有思路。   似乎最后是用到%和/方法解决的。   而今突然想到一个简短的方法，就可以实现任意位数的反序打印（但是如果是首位数或者尾位数为0时就没有打印出来了）   代码如下： long num, num1=0;
  • PHP：6种方法获取文件的扩展名 IT独行者 PHP扩展名
      PHP：6种方法获取文件的扩展名   1、字符串查找和截取的方法   1 $extension = substr ( strrchr ( $file ,  '.' ), 1); 2、字符串查找和截取的方法二   1 $extension = substr
  • 面试111 文强chu 面试
    1事务隔离级别有那些 ，事务特性是什么（问到一次） 2 spring aop 如何管理事务的，如何实现的。动态代理如何实现，jdk怎么实现动态代理的，ioc是怎么实现的，spring是单例还是多例，有那些初始化bean的方式，各有什么区别（经常问） 3 struts默认提供了那些拦截器 （一次） 4 过滤器和拦截器的区别 （频率也挺高） 5 final，finally final
  • XML的四种解析方式 小桔子 domjdomdom4jsax
    在平时工作中，难免会遇到把 XML 作为数据存储格式。面对目前种类繁多的解决方案，哪个最适合我们呢？在这篇文章中，我对这四种主流方案做一个不完全评测，仅仅针对遍历 XML 这块来测试，因为遍历 XML 是工作中使用最多的（至少我认为）。 　　预 备 　　测试环境： 　　AMD 毒龙1.4G OC 1.5G、256M DDR333、Windows2000 Server
  • wordpress中常见的操作 aichenglong 中文注册wordpress移除菜单
    1 wordpress中使用中文名注册解决办法   1)使用插件   2)修改wp源代码      进入到wp-include/formatting.php文件中找到       function sanitize_user( $username, $strict = false
  • 小飞飞学管理-1 alafqq 管理
    项目管理的下午题，其实就在提出问题（挑刺），分析问题，解决问题。 今天我随意看下10年上半年的第一题。主要就是项目经理的提拨和培养。 结合我自己经历写下心得 对于公司选拔和培养项目经理的制度有什么毛病呢？ 1，公司考察，选拔项目经理，只关注技术能力，而很少或没有关注管理方面的经验，能力。 2，公司对项目经理缺乏必要的项目管理知识和技能方面的培训。 3，公司对项目经理的工作缺乏进行指
  • IO输入输出部分探讨 百合不是茶 IO
     //文件处理  在处理文件输入输出时要引入java.IO这个包； /* 1，运用File类对文件目录和属性进行操作 2，理解流，理解输入输出流的概念 3，使用字节/符流对文件进行读/写操作 4，了解标准的I/O 5，了解对象序列化 */   //1，运用File类对文件目录和属性进行操作   //在工程中线创建一个text.txt
  • getElementById的用法 bijian1013 element
            getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单，就是给每个标签分配一个ID号。        返回具有指定ID属性值的第一个对象的一个引用。        语法： &n
  • 励志经典语录 bijian1013 励志人生
    经典语录1:   哈佛有一个著名的理论：人的差别在于业余时间，而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论，你会发现，你的人生正在发生改变，坚持数年之后，成功会向你招手。不要每天抱着QQ/MSN/游戏/电影/肥皂剧……奋斗到12点都舍不得休息，看就看一些励志的影视或者文章，不要当作消遣；学会思考人生，学会感悟人生
  • [MongoDB学习笔记三]MongoDB分片 bit1129 mongodb
    MongoDB的副本集(Replica Set)一方面解决了数据的备份和数据的可靠性问题，另一方面也提升了数据的读写性能。MongoDB分片(Sharding)则解决了数据的扩容问题，MongoDB作为云计算时代的分布式数据库，大容量数据存储，高效并发的数据存取，自动容错等是MongoDB的关键指标。 本篇介绍MongoDB的切片(Sharding)   1.何时需要分片 &nbs
  • 【Spark八十三】BlockManager在Spark中的使用场景 bit1129 manager
    1. Broadcast变量的存储，在HttpBroadcast类中可以知道 2. RDD通过CacheManager存储RDD中的数据，CacheManager也是通过BlockManager进行存储的 3. ShuffleMapTask得到的结果数据，是通过FileShuffleBlockManager进行管理的，而FileShuffleBlockManager最终也是使用BlockMan
  • yum方式部署zabbix ronin47 yum方式部署zabbix
    安装网络yum库#rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch.rpm 通过yum装mysql和zabbix调用的插件还有agent代理#yum install zabbix-server-mysql zabbix-web-mysql mysql-
  • Hibernate4和MySQL5.5自动创建表失败问题解决方法 byalias J2EEHibernate4
    今天初学Hibernate4，了解了使用Hibernate的过程。大体分为4个步骤： ①创建hibernate.cfg.xml文件 ②创建持久化对象 ③创建*.hbm.xml映射文件 ④编写hibernate相应代码 在第四步中，进行了单元测试，测试预期结果是hibernate自动帮助在数据库中创建数据表，结果JUnit单元测试没有问题，在控制台打印了创建数据表的SQL语句，但在数据库中
  • Netty源码学习-FrameDecoder bylijinnan javanetty
    Netty 3.x的user guide里FrameDecoder的例子，有几个疑问： 1.文档说：FrameDecoder calls decode method with an internally maintained cumulative buffer whenever new data is received. 为什么每次有新数据到达时，都会调用decode方法？ 2.Dec
  • SQL行列转换方法 chicony 行列转换
    create table tb(终端名称 varchar(10) , CEI分值 varchar(10) , 终端数量 int) insert into tb values('三星' , '0-5' , 74) insert into tb values('三星' , '10-15' , 83) insert into tb values('苹果' , '0-5' , 93)
  • 中文编码测试 ctrain 编码
    循环打印转换编码 String[] codes = { "iso-8859-1", "utf-8", "gbk", "unicode" }; for (int i = 0; i < codes.length; i++) { for (int j
  • hive 客户端查询报堆内存溢出解决方法 daizj hive堆内存溢出
    hive> select * from t_test where ds=20150323 limit 2; OK Exception in thread "main" java.lang.OutOfMemoryError: Java heap space   问题原因： hive堆内存默认为256M   这个问题的解决方法为： 修改/us
  • 人有多大懒，才有多大闲 (评论『卓有成效的程序员』) dcj3sjt126com 程序员
      卓有成效的程序员给我的震撼很大，程序员作为特殊的群体，有的人可以这么懒，  懒到事情都交给机器去做 ，而有的人又可以那么勤奋，每天都孜孜不倦得做着重复单调的工作。   在看这本书之前，我属于勤奋的人，而看完这本书以后，我要努力变成懒惰的人。 不要在去庞大的开始菜单里面一项一项搜索自己的应用程序，也不要在自己的桌面上放置眼花缭乱的快捷图标
  • Eclipse简单有用的配置 dcj3sjt126com eclipse
    1、显示行号  Window -- Prefences -- General -- Editors -- Text Editors -- show line numbers   2、代码提示字符 Window ->Perferences，并依次展开 Java -> Editor -> Content Assist，最下面一栏 auto-Activation
  • 在tomcat上面安装solr4.8.0全过程 eksliang Solrsolr4.0后的版本安装solr4.8.0安装
    转载请出自出处： http://eksliang.iteye.com/blog/2096478       首先solr是一个基于java的web的应用，所以安装solr之前必须先安装JDK和tomcat，我这里就先省略安装tomcat和jdk了         第一步：当然是下载去官网上下载最新的solr版本，下载地址
  • Android APP通用型拒绝服务、漏洞分析报告 gg163 漏洞androidAPP分析
    点评：记得曾经有段时间很多SRC平台被刷了大量APP本地拒绝服务漏洞，移动安全团队爱内测（ineice.com）发现了一个安卓客户端的通用型拒绝服务漏洞，来看看他们的详细分析吧。  0xr0ot和Xbalien交流所有可能导致应用拒绝服务的异常类型时，发现了一处通用的本地拒绝服务漏洞。该通用型本地拒绝服务可以造成大面积的app拒绝服务。  针对序列化对象而出现的拒绝服务主要
  • HoverTree项目已经实现分层 hvt 编程.netWebC#ASP.ENT
    HoverTree项目已经初步实现分层，源代码已经上传到 http://hovertree.codeplex.com请到SOURCE CODE查看。在本地用SQL Server 2008 数据库测试成功。数据库和表请参考：http://keleyi.com/a/bjae/ue6stb42.htmHoverTree是一个ASP.NET 开源项目，希望对你学习ASP.NET或者C#语言有帮助，如果你对
  • Google Maps API v3: Remove Markers 移除标记 天梯梦 google maps api
    Simply do the following:   I. Declare a global variable: var markersArray = [];   II. Define a function: function clearOverlays() { for (var i = 0; i < markersArray.length; i++ )
  • jQuery选择器总结 lq38366 jquery选择器
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
  • 基础数据结构和算法六：Quick sort sunwinner AlgorithmQuicksort
    Quick sort is probably used more widely than any other. It is popular because it is not difficult to implement, works well for a variety of different kinds of input data, and is substantially faster t
  • 如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作 刘星宇 htmlWeb
    今天在写一个flash广告代码的时候，因为flash自带的链接，容易被当成弹出广告，所以做了一个div层放到flash上面，这样链接都是a触发的不会被拦截，但发现flash一直处于div层上面，原来flash需要加个参数才可以。 让flash置于DIV层之下的方法，让flash不挡住飘浮层或下拉菜单，让Flash不档住浮动对象或层的关键参数：wmode=opaque。 方法如下：
  • Mybatis实用Mapper SQL汇总示例 wdmcygah sqlmysqlmybatis实用
    Mybatis作为一个非常好用的持久层框架，相关资料真的是少得可怜，所幸的是官方文档还算详细。本博文主要列举一些个人感觉比较常用的场景及相应的Mapper SQL写法，希望能够对大家有所帮助。 不少持久层框架对动态SQL的支持不足，在SQL需要动态拼接时非常苦恼，而Mybatis很好地解决了这个问题，算是框架的一大亮点。对于常见的场景，例如：批量插入/更新/删除，模糊查询，多条件查询，联表查询，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他