listview - 电晕的 listView 教程

Question

有没有关于电晕中 listView 的教程？

我在电晕示例代码中去了这里，但我很难理解它，任何人都可以提供一个链接来教如何在电晕中使用 listView 吗？关于将 sqlite 数据插入 listView 的教程会更好。

提前致谢。

score 2 · Accepted Answer

在这里我找到了一个关于 ListView 的非常好的博客。我认为它会对你有所帮助:)
我也建议你看看这个Table View Sample V0.13

score 0 · Accepted Answer

最近 Corona SDK 中出现了新的小部件。对于列表视图，我目前使用这个，这很容易配置。

score 0 · Accepted Answer

okay, so this one is state of the art, 2.0 compatible. it combines the best of the old school (pre-widget) code that I dropped above–based on Carlos' code and the list view code that comes in the Sample Code folder of the most recent version of Corona. it has the same image requirements as above to avoid errors. this can be saved as main.lua in the same folder as the suggested download above.

when you click a selection, you get a slide-in image and text explaining the image. the index also includes images like Carlos'... 

-- 
-- Abstract: List View sample app
--  
-- Version: 2.0
-- 
-- Sample code is MIT licensed, see http://www.coronalabs.com/links/code/license
-- Copyright (C) 2013 Corona Labs Inc. All Rights Reserved.
--
-- Demonstrates how to create a list view using the widget's Table View Library.
-- A list view is a collection of content organized in rows that the user
-- can scroll up or down on touch. Tapping on each row can execute a 
-- custom function.
--
-- Supports Graphics 2.0
------------------------------------------------------------

display.setStatusBar( display.HiddenStatusBar ) 

-- Import the widget library
local widget = require( "widget" )

-- create a constant for the left spacing of the row content
local LEFT_PADDING = 10

--Set the background to white
display.setDefault( "background", 1, 1, 1 )

--Create a group to hold our widgets & images
local widgetGroup = display.newGroup()
local _W = display.contentWidth
local _H = display.contentHeight
-- Create a background to go behind our tableView
--local background = display.newImage( widgetGroup, "bg.jpg", 0, 0, true )
--background.anchorX = 0; background.anchorY = 0        -- TopLeft anchor

-- The gradient used by the title bar
local titleGradient = {
    type = 'gradient',
    color1 = { 189/255, 203/255, 220/255, 255/255 }, 
    color2 = { 0, 0, 0, 1 },
    direction = "down"
}

-- Create toolbar to go at the top of the screen
local titleBar = display.newRect( display.contentCenterX, 0, display.contentWidth, 32 )
titleBar:setFillColor( titleGradient ) 
titleBar.y = display.screenOriginY + titleBar.contentHeight * 0.5

-- create embossed text to go on toolbar
local titleText = display.newEmbossedText( "Coffee", display.contentCenterX, titleBar.y, native.systemFontBold, 20 )

local data = {}

data[1] = {}
data[1].title = "Hot Coffee"
data[1].subtitle = "Grounds brewed in hot water"
data[1].image = "coffee1.png"
data[1].image2 = "coffee_1.png"
data[1].text="This is Hot Coffee line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8\nAnd this is Line9\nAnd this is Line10\nAnd this is Line11\nAnd this is Line12\nAnd this is Line13\nAnd this is Line14\nAnd this is Line11\nAnd this is Line15\nAnd this is Line11\nAnd this is Line16\nAnd this is Line11\nAnd this is Line17\nAnd this is Line11\nAnd this is Line18\nAnd this is Line11\nAnd this is Line19\nAnd this is Line11\nAnd this is Line19\nAnd this is Line11\nAnd this is Line20\n\n\n\n"

data[2] = {}
data[2].title = "Iced Coffee"
data[2].subtitle = "Chilled coffee with ice"
data[2].image = "coffee2.png"
data[2].image2 = "coffee_2.png"
data[2].text="This is Iced Coffee line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"


data[3] = {}
data[3].title = "Espresso"
data[3].subtitle = "Hot water forced through"
data[3].image = "coffee3.png"
data[3].image2 = "coffee_3.png"
data[3].text="This is Espresso line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"


data[4] = {}
data[4].title = "Cappuccino"
data[4].subtitle = "Espresso with frothy milk"
data[4].image = "coffee4.png"
data[4].image2 = "coffee_4.png"
data[4].text="This is Cappucino line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"


data[5] = {}
data[5].title = "Latte"
data[5].subtitle = "More milk and less froth"
data[5].image = "coffee5.png"
data[5].image2 = "coffee_5.png"
data[5].text="This is Latte line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"


data[6] = {}
data[6].title = "Americano"
data[6].subtitle = "Espresso with hot water"
data[6].image = "coffee6.png"
data[6].image2 = "coffee_6.png"
data[6].text="This is Americano line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8\n\n\n"
for i=1, 6 do
    table.insert(data, data[i])
end
-- create a shadow underneath the titlebar (for a nice touch)
local shadow = display.newImage( "shadow.png" )
shadow.anchorX = 0; shadow.anchorY = 0      -- TopLeft anchor
shadow.x, shadow.y = 0, titleBar.y + titleBar.contentHeight * 0.5
shadow.xScale = 320 / shadow.contentWidth
shadow.alpha = 0.45

--Text to show which item we selected
local itemSelected = native.newTextBox( 20, _H*.75, _W, 160 )
local fontSize = 20
itemSelected.font = native.newFont( "Arial",  fontSize )
itemSelected.isEditable=false
--itemSelected:setFillColor(0,0,0)
itemSelected.x = display.contentWidth + itemSelected.contentWidth * 0.5
itemSelected.y = display.contentCenterY+200
widgetGroup:insert( itemSelected )

-- Forward reference for our back button & tableview
local backButton, list

-- Handle row rendering
local function onRowRender( event )
    local phase = event.phase
    local row = event.row
    local id = row.index
    -- in graphics 2.0, the group contentWidth / contentHeight are initially 0, and expand once elements are inserted into the group.
    -- in order to use contentHeight properly, we cache the variable before inserting objects into the group

    local groupContentHeight = row.contentHeight

    local rowTitle = display.newText( row, data[id].title,0,0, native.systemFontBold, 16 )
    rowTitle:setFillColor(0,0,0)
    -- in Graphics 2.0, the row.x is the center of the row, no longer the top left.
    rowTitle.x = LEFT_PADDING + 80

    -- we also set the anchorX of the text to 0, so the object is x-anchored at the left
    rowTitle.anchorX = 0

    rowTitle.y = groupContentHeight * 0.25

    local rowSubTitle = display.newText( row, data[id].subtitle,0,0, native.systemFontBold, 12 )
    rowSubTitle:setFillColor(.2,.2,.2)
    -- in Graphics 2.0, the row.x is the center of the row, no longer the top left.
    rowSubTitle.x = LEFT_PADDING + 80

    -- we also set the anchorX of the text to 0, so the object is x-anchored at the left
    rowSubTitle.anchorX = 0

    rowSubTitle.y = groupContentHeight * 0.75

    local rowArrow = display.newImage( row, "rowArrow.png",false )
    rowArrow.x = row.contentWidth - LEFT_PADDING
    rowArrow.y = groupContentHeight * 0.5

    -- we set the image anchorX to 1, so the object is x-anchored at the right
    rowArrow.anchorX = 1
    --data[id]=row.index
    local itemImage = display.newImage( row, data[id].image,0,0)
    itemImage.x = 100
    itemImage.y = groupContentHeight * 0.5

    -- we set the image anchorX to 1, so the object is x-anchored at the right
    itemImage.anchorX = 1

end

-- Hande row touch events
local function onRowTouch( event )
    local phase = event.phase
    local row = event.target
    local id = row.index

    if "press" == phase then
        print( "Pressed row: " .. row.index )

    elseif "release" == phase then
        -- Update the item selected text
        itemSelected.text = data[id].text
        itemSelected:toFront()
        backButton:toFront()
        --Transition out the list, transition in the item selected text and the back button
img = display.newImage(data[id].image2,0,0)
print(data[id].image2)
img.width=img.width*.45
img.height=img.height*.45
img.x= display.contentCenterX
img.y= _H*.45
widgetGroup:insert( img )
        -- The table x origin refers to the center of the table in Graphics 2.0, so we translate with half the object's contentWidth
        transition.to( list, { x = - list.contentWidth * 0.5, time = 400, transition = easing.outExpo } )
        transition.to( itemSelected, { x = display.contentCenterX, time = 400, transition = easing.outExpo } )
        transition.to( img, { x = display.contentCenterX, time = 400, transition = easing.outExpo } )
        transition.to( backButton, { alpha = 1, time = 400, transition = easing.outQuad } )

        print( "Tapped and/or Released row: " .. row.index )
    end
end

-- Create a tableView
list = widget.newTableView
{
    top = 38,
    width = 320, 
    height = 448,
    hideBackground = true,
    maskFile = "mask-320x448.png",
    onRowRender = onRowRender,
    onRowTouch = onRowTouch,
}

--Insert widgets/images into a group
widgetGroup:insert( list )
widgetGroup:insert( titleBar )
widgetGroup:insert( titleText )
widgetGroup:insert( shadow )


--Handle the back button release event
local function onBackRelease()
    --Transition in the list, transition out the item selected text and the back button

    -- The table x origin refers to the center of the table in Graphics 2.0, so we translate with half the object's contentWidth
    transition.to( list, { x = list.contentWidth * 0.5, time = 400, transition = easing.outExpo } )
    transition.to( itemSelected, { x = display.contentWidth + itemSelected.contentWidth * 0.5, time = 400, transition = easing.outExpo } )
    transition.to( img, { x = display.contentWidth + img.width, time = 400, transition = easing.outExpo } )
    transition.to( backButton, { alpha = 0, time = 400, transition = easing.outQuad } )
end

--Create the back button
backButton = widget.newButton
{
    width = 298,
    height = 56,
    label = "Back", 
    labelYOffset = - 1,
    onRelease = onBackRelease
}
backButton.alpha = 0
backButton.x = display.contentCenterX
backButton.y = backButton.contentHeight
widgetGroup:insert( backButton )


for i = 1, 12 do

    local isCategory = false
    local rowHeight = 90
    local rowColor = { default={ 1, 1, 1 }, over={ 1, 0.5, 0, 0.2 } }
    local lineColor = { 0.5, 0.5, 0.5 }

    -- Make some rows categories
   --[[ if ( i == 1 or i == 21 ) then
        isCategory = true
        rowHeight = 40
        rowColor = { default={ 0.8, 0.8, 0.8, 0.8 } }
        lineColor = { 1, 0, 0 }
    end--]]

    -- Insert a row into the tableView
    list:insertRow(
        {
            isCategory = isCategory,
            rowHeight = rowHeight,
            rowColor = rowColor,
            lineColor = lineColor
        }
    )
end

score 0 · Accepted Answer

这是老派（没有小部件），但我对其进行了调整，它可以满足我的需要。 http://www.coronalabs.com/blog/2010/09/24/create-scrolling-list-views-with-text-and-graphics-in-coronasdk-ios-android-tutorial/

在创建新的 main.lua 后，我进行了以下更改，以便我可以对其进行故事板。您应该能够将其复制并粘贴到 main/lua 上以快速了解。由于缺少图像，您会收到错误（我找到了他的咖啡示例的更大版本）；您可以制作一个虚拟图像并复制并重命名六次。反正...：

local storyboard = require "storyboard"
local scene = storyboard.newScene()

--import the table view library
local tableView = require("tableView")

--import the button events library
local ui = require("ui")

display.setStatusBar( display.HiddenStatusBar ) 
_W=display.contentWidth
_H=display.contentHeight
--initial values
local screenOffsetW, screenOffsetH = _W - display.viewableContentWidth, _H - display.viewableContentHeight

local myList, backBtn, detailScreenText

function scene:createScene( event )
local group = self.view

local background = display.newRect(0, 0, _W, _H+80)
background:setFillColor(255, 255, 255)
background.y=_H*.5
group:insert(background)
--setup a destination for the list items
local detailScreen = display.newGroup()


--setup the table
local data = {}  --note: the declaration of this variable was moved up higher to broaden its scope


--setup functions to execute on touch of the list view items
function listButtonRelease( event )
    self = event.target
    local id = self.id
    print(self.id)
    local img2 = display.newImage(data[id].image2,_W*.5,_H*.25)
        img2.width=_W*.75
        img2.height=_H*.75
        detailBg = img2
        detailBg.x=_W*.5
        detailBg.y=_H*.375
      detailScreen:insert(detailBg) 
      detailScreenText = native.newTextBox( 0, _H*.785, _W, 160 )
      local fontSize = 18
      detailScreenText.font = native.newFont( "Arial",  fontSize )
detailScreenText.isEditable=false
detailScreenText.text = data[id].text
 detailScreen:insert(detailScreenText) 
 group:insert(detailScreen)
    transition.to(myList, {time=400, x=_W*-1, transition=easing.outExpo })
        transition.to(detailScreen, {time=400, x=0, transition=easing.outExpo })
        transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2) + screenOffsetW*.5 + 6, transition=easing.outExpo })
        transition.to(backBtn, {time=400, alpha=1 })

        delta, velocity = 0, 0

end

function backBtnRelease( event )
    print("back button released")
    transition.to(myList, {time=400, x=0, transition=easing.outExpo })
    transition.to(detailScreen, {time=400, x=_W, transition=easing.outExpo })
    transition.to(detailScreenText, {time=400, x=_W, transition=easing.outExpo })
    transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2)+backBtn.width, transition=easing.outExpo })
    transition.to(backBtn, {time=400, alpha=0 })

    delta, velocity = 0, 0
end

--setup each row as a new table, then add title, subtitle, and image
data[1] = {}
data[1].title = "Hot Coffee"
data[1].subtitle = "Grounds brewed in hot water"
data[1].image = "coffee1.png"
data[1].image2 = "coffee_1.png"
data[1].text="This is Hot Coffee line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8\nAnd this is Line9\nAnd this is Line10\nAnd this is Line11"

data[2] = {}
data[2].title = "Iced Coffee"
data[2].subtitle = "Chilled coffee with ice"
data[2].image = "coffee2.png"
data[2].image2 = "coffee_2.png"
data[2].text="This is Iced Coffee line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"


data[3] = {}
data[3].title = "Espresso"
data[3].subtitle = "Hot water forced through"
data[3].image = "coffee3.png"
data[3].image2 = "coffee_3.png"
data[3].text="This is Espresso line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"


data[4] = {}
data[4].title = "Cappuccino"
data[4].subtitle = "Espresso with frothy milk"
data[4].image = "coffee4.png"
data[4].image2 = "coffee_4.png"
data[4].text="This is Cappucino line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"


data[5] = {}
data[5].title = "Latte"
data[5].subtitle = "More milk and less froth"
data[5].image = "coffee5.png"
data[5].image2 = "coffee_5.png"
data[5].text="This is Latte line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"


data[6] = {}
data[6].title = "Americano"
data[6].subtitle = "Espresso with hot water"
data[6].image = "coffee6.png"
data[6].image2 = "coffee_6.png"
data[6].text="This is Americano line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"

for i=1, 6 do
    table.insert(data, data[i])
end

local topBoundary = display.screenOriginY + 40
local bottomBoundary = display.screenOriginY + 0

-- create the list of items
myList = tableView.newList{
    data=data, 
    default="listItemBg.png",
    --default="listItemBg_white.png",
    over="listItemBg_over.png",
    onRelease=listButtonRelease,
    top=topBoundary,
    bottom=bottomBoundary,
    --backgroundColor={ 255, 255, 255 },  --commented this out because we're going to add it down below
    callback = function( row )
                         local g = display.newGroup()

                         local img = display.newImage(row.image)
                         g:insert(img)
                         img.x = math.floor(img.width*0.5 + 6)
                         img.y = math.floor(img.height*0.5) 



                         local title =  display.newText( row.title, 0, 0, native.systemFontBold, 14 )
                         title:setTextColor(0, 0, 0)
                         --title:setTextColor(255, 255, 255)
                         g:insert(title)
                         title.x = title.width*0.5 + img.width + 6
                         title.y = 30

                         local subtitle =  display.newText( row.subtitle, 0, 0, native.systemFont, 12 )
                         subtitle:setTextColor(80,80,80)
                         --subtitle:setTextColor(180,180,180)
                         g:insert(subtitle)
                         subtitle.x = subtitle.width*0.5 + img.width + 6
                         subtitle.y = title.y + title.height + 6

group:insert(g)

                         return g   


                  end 
}


local function scrollToTop()
    myList:scrollTo(topBoundary-1)
end

--Setup the nav bar 
local navBar = ui.newButton{
    default = "navBar.png",
    onRelease = scrollToTop
}
navBar.x = _W*.5
navBar.y = math.floor(display.screenOriginY + navBar.height*0.5)
group:insert(navBar)

local navHeader = display.newText("Coffee", 0, 0, native.systemFontBold, 16)
navHeader:setTextColor(255, 255, 255)
navHeader.x = _W*.5
navHeader.y = navBar.y
group:insert(navHeader)
--Setup the back button
backBtn = ui.newButton{ 
    default = "backButton.png", 
    over = "backButton_over.png", 
    onRelease = backBtnRelease
}
backBtn.x = math.floor(backBtn.width/2) + backBtn.width + screenOffsetW
backBtn.y = navBar.y 
backBtn.alpha = 0
group:insert(backBtn)
--Add a white background to the list.  
--It didn't move with the list when it appeared on the larger screen of the iPad.
local listBackground = display.newRect( 0, 0, myList.width, myList.height )
listBackground:setFillColor(255,255,255)
myList:insert(1,listBackground)
group:insert(listBackground)
end

function scene:exitScene( event )
storyboard.purgeScene("coffee")
storyboard.removeScene("coffee")
collectgarbage("collect")
collectgarbage()

end


-- Called prior to the removal of scene's "view" (display group)
function scene:destroyScene( event )

    ----print( "((destroying scene 1's view))" )
end

---------------------------------------------------------------------------------
-- END OF YOUR IMPLEMENTATION
---------------------------------------------------------------------------------

-- "createScene" event is dispatched if scene's view does not exist
scene:addEventListener( "createScene", scene )

-- "enterScene" event is dispatched whenever scene transition has finished
scene:addEventListener( "enterScene", scene )

-- "exitScene" event is dispatched before next scene's transition begins
scene:addEventListener( "exitScene", scene )

-- "destroyScene" event is dispatched before view is unloaded, which can be
-- automatically unloaded in low memory situations, or explicitly via a call to
-- storyboard.purgeScene() or storyboard.removeScene().
scene:addEventListener( "destroyScene", scene )

---------------------------------------------------------------------------------

return scene

listview - 电晕的 listView 教程

4 回答 4

Related

Reference