fyne程序的表头无法相对容器居中的问题

Question

试了很多方法，无法将header 表头按照容器居中，总是相对窗口居中的，如何解决？

package main

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

func main() {
    // 创建一个新的应用
    myApp := app.New()
    myWindow := myApp.NewWindow("Table Example")

    // 定义表格数据
    data := [][]string{
        {"Header 1", "Header 2", "Header 3"},
        {"Row 1, Col 1", "Row 1, Col 2", "Row 1, Col 3"},
        {"Row 2, Col 1", "Row 2, Col 2", "Row 2, Col 3"},
        {"Row 3, Col 1", "Row 3, Col 2", "Row 3, Col 3"},
        {"Row 4, Col 1", "Row 4, Col 2", "Row 4, Col 3"},
        {"Row 5, Col 1", "Row 5, Col 2", "Row 5, Col 3"},
        {"Row 6, Col 1", "Row 6, Col 2", "Row 6, Col 3"},
    }

    // 创建表格
    table := widget.NewTable(
        func() (int, int) {
            return len(data), len(data[0]) // 返回行数和列数
        },
        func() fyne.CanvasObject { // 创建单元格
            return widget.NewLabel("") // 初始化空标签
        },
        func(cellID widget.TableCellID, cell fyne.CanvasObject) { // 更新单元格内容
            i, j := cellID.Row, cellID.Col
            cell.(*widget.Label).SetText(data[i][j]) // 设置单元格文本
        })

    // 调整表格列宽，使内容自适应
    for i := 0; i < len(data[0]); i++ {
        table.SetColumnWidth(i, 120) // 设置列宽为120
    }

    // 设置每一行的高度
    for i := 0; i < len(data); i++ {
        table.SetRowHeight(i, 40) // 设置每一行的高度为40
    }

    // 将表格放入滚动容器中
    scrollContainer := container.NewScroll(table)

    // 设置滚动容器的大小，增加可视区域
    scrollContainer.SetMinSize(fyne.NewSize(300, 200))

    // 添加表头
    header := widget.NewLabel("Table Header")
    header.Alignment = fyne.TextAlignCenter // 设置文本居中显示
    cH := container.NewCenter(header)

    // 将滚动容器放入水平布局容器
    hCont := container.NewHBox(scrollContainer)

    // 将水平布局容器放入垂直布局容器
    vCont := container.NewVBox(cH, hCont)
    vCont.Resize(fyne.NewSize(300, 200))

    // 设置窗口的内容
    myWindow.SetContent(vCont)

    // 设置窗口的初始大小
    myWindow.Resize(fyne.NewSize(600, 400))

    // 显示并运行窗口
    myWindow.ShowAndRun()
}

Answer 1

🕒下午好，题主！目前：🟢[在线]
📢参考GPT-4o mini 模型、由清水白石008整理提供！
📣今日金句：“成功的关键在于相信自己有能力实现目标。”** — 诺曼·文森特·皮尔

在 Fyne 中，如果你希望表头相对于表格容器居中，而不是相对于整个窗口居中，可以通过调整布局容器的结构来实现。你可以使用 container.NewHBox 和 container.NewVBox 来创建一个包含表头和表格的布局，并确保表头的宽度与表格的宽度一致。

以下是修改后的代码示例，确保表头相对于表格容器居中：

package main

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

func main() {
    // 创建一个新的应用
    myApp := app.New()
    myWindow := myApp.NewWindow("Table Example")

    // 定义表格数据
    data := [][]string{
        {"Header 1", "Header 2", "Header 3"},
        {"Row 1, Col 1", "Row 1, Col 2", "Row 1, Col 3"},
        {"Row 2, Col 1", "Row 2, Col 2", "Row 2, Col 3"},
        {"Row 3, Col 1", "Row 3, Col 2", "Row 3, Col 3"},
        {"Row 4, Col 1", "Row 4, Col 2", "Row 4, Col 3"},
        {"Row 5, Col 1", "Row 5, Col 2", "Row 5, Col 3"},
        {"Row 6, Col 1", "Row 6, Col 2", "Row 6, Col 3"},
    }

    // 创建表格
    table := widget.NewTable(
        func() (int, int) {
            return len(data), len(data[0]) // 返回行数和列数
        },
        func() fyne.CanvasObject { // 创建单元格
            return widget.NewLabel("") // 初始化空标签
        },
        func(cellID widget.TableCellID, cell fyne.CanvasObject) { // 更新单元格内容
            i, j := cellID.Row, cellID.Col
            cell.(*widget.Label).SetText(data[i][j]) // 设置单元格文本
        })

    // 调整表格列宽，使内容自适应
    for i := 0; i < len(data[0]); i++ {
        table.SetColumnWidth(i, 120) // 设置列宽为120
    }

    // 设置每一行的高度
    for i := 0; i < len(data); i++ {
        table.SetRowHeight(i, 40) // 设置每一行的高度为40
    }

    // 将表格放入滚动容器中
    scrollContainer := container.NewScroll(table)

    // 设置滚动容器的大小，增加可视区域
    scrollContainer.SetMinSize(fyne.NewSize(300, 200))

    // 添加表头
    header := widget.NewLabel("Table Header")
    header.Alignment = fyne.TextAlignCenter // 设置文本居中显示

    // 创建一个容器，将表头和表格放在一起
    headerContainer := container.NewHBox(header)
    headerContainer.SetMinSize(fyne.NewSize(300, 40)) // 设置表头容器的最小大小

    // 将滚动容器放入水平布局容器
    hCont := container.NewHBox(scrollContainer)

    // 将水平布局容器放入垂直布局容器
    vCont := container.NewVBox(headerContainer, hCont)

    // 设置窗口的内容
    myWindow.SetContent(vCont)

    // 设置窗口的初始大小
    myWindow.Resize(fyne.NewSize(600, 400))

    // 显示并运行窗口
    myWindow.ShowAndRun()
}

关键修改点

1. 表头容器：使用 container.NewHBox(header) 创建一个水平容器 headerContainer，将表头放入其中。
2. 设置最小大小：通过 headerContainer.SetMinSize(fyne.NewSize(300, 40)) 设置表头容器的最小大小，以确保它与表格的宽度一致。
3. 布局结构：将 headerContainer 和 scrollContainer 放入一个垂直布局容器 vCont 中。

结果

通过这些修改，表头将相对于表格容器居中，而不是相对于整个窗口居中。这样可以确保表头与表格的宽度一致，并且在视觉上看起来更协调。