widget.newTabBar()

id _^(可选)

字符串. 分配给选项卡栏的可选标识。默认值为 widget_tabBar。

x、y _^(可选)

数字. 小组件的 x 和 y 中心点的坐标。如果定义了 left 和 top，这些值将被它们覆盖。

left、top _^(可选)

数字. 创建小组件的左上角位置。如果已指定，则这些值将覆盖 x 和 y 参数。

width、height _^(可选)

数字. 选项卡栏的宽度和高度（以像素为单位）。默认高度为 52。

buttons _^(必需)

表. 包含一个子表的参数/选项表的表，分别适用于选项卡栏中的各个选项卡。请参阅下面的 配置选项卡按钮。

object:setSelected()

id _^(可选)

String. 可选标识，用于指派到选项卡按钮。默认值为 button。

label _^(可选)

String. 可选文本标签，该标签将出现在选项卡按钮区域的底部。

labelColor _^(可选)

Table. 两个 RGB+A 颜色设置的表格，每个颜色设置各有一个默认状态和悬停状态。

labelColor = { default={ 1, 1, 1 }, over={ 0, 0, 0, 0.5 } }

labelXOffset、labelYOffset _^(可选)

Numbers. 选项卡按钮标签的可选 x 和 y 偏移量。例如，labelYOffset = -8 会将标签向上偏移 8 像素。

font _^(可选)

String. 用于选项卡按钮标签的字体。默认值为 native.systemFont。

size _^(可选)

Number. 选项卡按钮标签的字体大小（以像素为单位）。默认值为 8。

selected _^(可选)

Boolean. 将此设置为 true 以从选中/打开状态启动选项卡按钮。在初始化时，只应该将一个选项卡按钮设置为 selected = true。

onPress _^(可选)

Function. 当按下选项卡按钮时调用的可选函数。回调函数不需要对 event.phase 进行测试，因为它只接受 began。

baseDir _^(可选)

Constant. 存放自定义图像的基本目录。默认值为项目文件夹 (system.ResourceDirectory)。

backgroundFile _^(可选)

String. 选项卡栏的背景图像文件。此文件可能设计为宽高灵活。

突出显示覆盖

您可以配置可选高亮度叠加层，该叠加层将位于背景前面，但位于可选按钮图像后面。高亮度叠加层由一个左、中、右图像文件组成，每个图像文件应设计为大小相等。但是，如果选项卡宽度大于这三个图像文件总宽度，叠加层将拉伸以适合选项卡的宽度。在这种情况下，左边缘图像和右边缘图像将保持其原始大小，而中间部分将拉伸以填补两者之间的距离。

Tab 按钮

在 buttons 表格的每个子表格内（请参阅 配置选项卡按钮），您可以添加附加参数以直观自定义按钮。请注意，各个按钮可以根据指定的图像具有独特的样式。

sheet _^(必需)

ImageSheet。图像 图纸选项卡栏对象。

backgroundFrame _^(可选)

字符串。选项卡栏的背景图像框架。这可以设计成灵活的宽度/高度。

backgroundFrameWidth、backgroundFrameHeight _^(必需)

数字。背景框架的宽度和高度。

突出显示覆盖

您可以配置可选的高亮叠加层，它将放在背景的前面，但在可选按钮图像的后面。高亮叠加层由左右中三个图像框架组成，每个图像框架的大小都应相等。但是，如果选项卡的宽度比这三个图像框架的总宽度大，叠加层将拉伸以适应选项卡的宽度。在这种情况下，左右边缘框架将保持其原始大小，而中间部分将拉伸以填充之间的距离。

Tab 按钮

在 buttons 表的每个子表（参阅 配置 选项卡 按钮）内，您可以添加其他参数以直观地自定义按钮。请注意，根据指定的框架，各个按钮可以具有独特的风格。

默认

local widget = require( "widget" )

-- Function to handle button events
local function handleTabBarEvent( event )
    print( event.target.id )  -- Reference to button's 'id' parameter
end

-- Configure the tab buttons to appear within the bar
local tabButtons = {
    {
        label = "Tab1",
        id = "tab1",
        selected = true,
        onPress = handleTabBarEvent
    },
    {
        label = "Tab2",
        id = "tab2",
        onPress = handleTabBarEvent
    },
    {
        label = "Tab3",
        id = "tab3",
        onPress = handleTabBarEvent
    }
}

-- Create the widget
local tabBar = widget.newTabBar(
    {
        top = display.contentHeight-120,
        width = display.contentWidth,
        buttons = tabButtons
    }
)

图像文件

local widget = require( "widget" )

-- Function to handle button events
local function handleTabBarEvent( event )
    print( event.target.id )  -- Reference to button's 'id' parameter
end

-- Configure the tab buttons to appear within the bar
local tabButtons = {
    {
        width = 72, 
        height = 120,
        defaultFile = "tabBarIconDef.png",
        overFile = "tabBarIconOver.png",
        label = "Tab1",
        id = "tab1",
        selected = true,
        size = 16,
        labelYOffset = -8,
        onPress = handleTabBarEvent
    },
    {
        width = 72, 
        height = 120,
        defaultFile = "tabBarIconDef.png",
        overFile = "tabBarIconOver.png",
        label = "Tab2",
        id = "tab2",
        size = 16,
        labelYOffset = -8,
        onPress = handleTabBarEvent
    },
    {
        width = 72, 
        height = 120,
        defaultFile = "tabBarIconDef.png",
        overFile = "tabBarIconOver.png",
        label = "Tab3",
        id = "tab3",
        size = 16,
        labelYOffset = -8,
        onPress = handleTabBarEvent
    }
}

-- Create the widget
local tabBar = widget.newTabBar(
    {
        left = 0,
        top = display.contentHeight-120,
        width = 580,
        height = 120,
        backgroundFile = "tabBarBack.png",
        tabSelectedLeftFile = "tabBarSelL.png",
        tabSelectedRightFile = "tabBarSelR.png",
        tabSelectedMiddleFile = "tabBarSelM.png",
        tabSelectedFrameWidth = 40,
        tabSelectedFrameHeight = 120,
        buttons = tabButtons
    }
)

图像图层

local widget = require( "widget" )

-- Function to handle button events
local function handleTabBarEvent( event )
    print( event.target.id )  -- Reference to button's 'id' parameter
end

-- Image sheet options and declaration
-- For testing, you may copy/save the image under "Visual Customization: Image Sheet" above
local options = {
    frames =
    {
        { x=4, y=0, width=24, height=120 },
        { x=32, y=0, width=40, height=120 },
        { x=72, y=0, width=40, height=120 },
        { x=112, y=0, width=40, height=120 },
        { x=152, y=0, width=72, height=120 },
        { x=224, y=0, width=72, height=120 }
    },
    sheetContentWidth = 296,
    sheetContentHeight = 120
}
local tabBarSheet = graphics.newImageSheet( "widget-tabbar-sheet.png", options )

-- Configure the tab buttons to appear within the bar
local tabButtons = {
    {
        defaultFrame = 5,
        overFrame = 6,
        label = "Tab1",
        id = "tab1",
        selected = true,
        size = 16,
        labelYOffset = -8,
        onPress = handleTabBarEvent
    },
    {
        defaultFrame = 5,
        overFrame = 6,
        label = "Tab2",
        id = "tab2",
        size = 16,
        labelYOffset = -8,
        onPress = handleTabBarEvent
    },
    {
        defaultFrame = 5,
        overFrame = 6,
        label = "Tab3",
        id = "tab3",
        size = 16,
        labelYOffset = -8,
        onPress = handleTabBarEvent
    }
}

local tabBar = widget.newTabBar(
    {
        sheet = tabBarSheet,
        left = 0,
        top = display.contentHeight-120,
        width = 580,
        height = 120,
        backgroundFrame = 1,
        tabSelectedLeftFrame = 2,
        tabSelectedMiddleFrame = 3,
        tabSelectedRightFrame = 4,
        tabSelectedFrameWidth = 40,
        tabSelectedFrameHeight = 120,
        buttons = tabButtons
    }
)