如何在 fyne-io 中制作具有不同对象类型的表格？

Question

我使用 fyne-io 制作用户界面。在表格中，我想要一些带有超链接的单元格和其他带有 Label 的单元格。我试过了，但没用：package mainimport (    "fmt"    "fyne.io/fyne"    "fyne.io/fyne/app"    "fyne.io/fyne/layout"    "fyne.io/fyne/widget")func setDefaultColumnsWidth(table *widget.Table) {    table.SetColumnWidth(0, 130)    table.SetColumnWidth(1, 150)    table.SetColumnWidth(2, 160)    table.SetColumnWidth(3, 200)    table.SetColumnWidth(4, 400)    table.SetColumnWidth(5, 150)    table.SetColumnWidth(6, 250)    table.SetColumnWidth(7, 110)    table.SetColumnWidth(8, 80)}func main() {    application := app.New()    win := application.NewWindow("Test GUI")    data := [][]string{{"ffffffffffffff", "ffffffffffffff", "ffffffffffffff", "ffffffffffffff", "ffffffffffffff", "ffffffffffffff", "ffffffffffffff"},        {"ffffffffffffff", "ffffffffffffff", "ffffffffffffff", "ffffffffffffff", "ffffffffffffff", "ffffffffffffff", "ffffffffffffff"},        {"ffffffffffffff", "ffffffffffffff", "ffffffffffffff", "ffffffffffffff", "ffffffffffffff", "ffffffffffffff", "ffffffffffffff"}}    tableData := widget.NewTable(        func() (int, int) {            return len(data), len(data[0])        },        func() fyne.CanvasObject {            label := widget.NewLabel("")            return label        },        func(i widget.TableCellID, o fyne.CanvasObject) {            switch o.(type) {            case *widget.Label:                label := o.(*widget.Label)                label.SetText(data[i.Row][i.Col])            case *widget.Hyperlink:                fmt.Println("Found Hyperlink")                hyperlink := o.(*widget.Hyperlink)                //  hyperlink.SetText(data[i.Row][i.Col])                hyperlink.SetText("aaaaaaa")            }        })}我能怎么做 ？我看到消息“fmt.Println("Found Hyperlink")”，但未显示超链接。为什么 o.(type) 等于 *widget.Hyperlink 而超链接不显示？

Answer 1

看来问题是标签没有被破坏并且与新创建的超链接重叠。我无法找到上述问题的解决方案，但提出了替代解决方案，因为fyne API 处于开发阶段，许多内部功能无法访问并且可能会更改解决方案可能会随着时间的推移而更改并变得简单化。

package main

import (

  "image/color"

  "fyne.io/fyne/v2"

  "fyne.io/fyne/v2/app"

  "fyne.io/fyne/v2/layout"

  "fyne.io/fyne/v2/widget"

  "fyne.io/fyne/v2/canvas"

)

const HEIGHT float32 = 30

func setDefaultColumnsWidth(table *widget.Table) {

  colWidths := []float32{130, 150, 160, 200, 400, 150, 250, 110, 80}

  for idx, colWidth := range colWidths {

    table.SetColumnWidth(idx, colWidth)

  }

}

func main() {

  application := app.New()

  win := application.NewWindow("Test GUI")

  data := [][]fyne.CanvasObject{

    {widget.NewLabel("ffffffffffffff"), widget.NewHyperlink("TUTU", nil), widget.NewLabel("ffffffffffffff"), widget.NewLabel("ffffffffffffff"), widget.NewLabel("ffffffffffffff"), widget.NewLabel("ffffffffffffff"), widget.NewLabel("ffffffffffffff")},

    {widget.NewLabel("ffffffffffffff"), widget.NewLabel("ffffffffffffff"), widget.NewLabel("ffffffffffffff"), widget.NewLabel("ffffffffffffff"), widget.NewLabel("ffffffffffffff"), widget.NewLabel("ffffffffffffff"), widget.NewHyperlink("ffffffffffffff", nil)},

    {widget.NewHyperlink("TUTU", nil), widget.NewLabel("ffffffffffffff"), widget.NewLabel("ffffffffffffff"), widget.NewLabel("ffffffffffffff"), widget.NewLabel("ffffffffffffff"), widget.NewLabel("ffffffffffffff"), widget.NewLabel("ffffffffffffff")},

  }

  tableData := widget.NewTable(

    func() (int, int) {

      return len(data), len(data[0])

    },

    func() fyne.CanvasObject {

      c := fyne.NewContainerWithoutLayout()

      r := canvas.NewRectangle(color.White)

      r.SetMinSize(fyne.NewSize(0, HEIGHT))

      r.Resize(fyne.NewSize(0, HEIGHT))

      c.AddObject(r)

      return c

    },

    func(cell widget.TableCellID, o fyne.CanvasObject) {

      container := o.(*fyne.Container)

      var obj fyne.CanvasObject = data[cell.Row][cell.Col]

      container.AddObject(obj)

      container.Refresh()

  })

  setDefaultColumnsWidth(tableData)

  label := widget.NewLabel("My table :")

  button := widget.NewButton("Close", func() {

    application.Quit()

  })

  container := layout.NewBorderLayout(label, button, nil, nil)

  box := fyne.NewContainerWithLayout(container, label, tableData, button)

  win.SetContent(box)

  win.Resize(fyne.NewSize(1800, 400))

  win.ShowAndRun()

}

输出： 

Answer 2

我联系了 Fyne Slack 小组，推荐的解决方案是将两个元素封装在一个容器中，并在更新回调函数中仅显示所需的元素

创建单元回调函数：

func() fyne.CanvasObject {

    label := widget.NewLabelWithStyle("", fyne.TextAlignLeading, fyne.TextStyle{})

    hyperlink := widget.NewHyperlink("", nil)

    hyperlink.Hide()

    return container.NewMax(label, hyperlink)

}

更新回调函数：

func(i widget.TableCellID, o fyne.CanvasObject) {

    container := o.(*fyne.Container)

    label := container.Objects[0].(*widget.Label)

    hyperlink := container.Objects[1].(*widget.Hyperlink)

    switch i.Col {

    case 0:

    case 5:

        label.Hide()

        hyperlink.Hidden = false

        hyperlink.SetText("Hi!")

        hyperlink.SetURL(url.Parse("https://stackoverflow.com"))

    default:

        hyperlink.Hide()

        label.Hidden = false

        label.SetText("Hello")

    }

}

Answer 3

关于如何使用container.NewMax和Table.SetColumnWidth创建更复杂的表，有更完整的文章。该示例逐步执行此表的代码：

在此处输入图像描述

两个主要技巧是设置容器而不是单个小部件：

container.NewMax(widget.NewLabel("template11"), widget.NewIcon(nil))

然后在回调中适当地隐藏或显示项目：

l := o.(*fyne.Container).Objects[0].(*widget.Label)

i := o.(*fyne.Container).Objects[1].(*widget.Icon)

l.Show()

i.Hide()

switch id.Col {

case 2:

    l.Hide()

    i.Show()

    i.SetResource(getIcon(id.Row))

case 0:

    l.SetText("hostname")

}

在https://fynelabs.com/2022/12/30/building-complex-tables-with-fyne/阅读更多内容