如何在下载时在两个场景之间制作加载场景.科罗纳 SDK



我正在使用电晕开发商业应用程序。Interfcae有点像Gmail移动应用程序界面。你有一个带有表格的屏幕,当单击一行时,它会打开一个新页面。

界面说明:应用从 json 对象中的索引元素获取文本和图像链接。对于 json 对象中的每个元素 (jsonObject[i](,将创建一个行,并从每个 json 元素的 "imagelink" 字段中传递的链接下载图像,同时从同一 json 元素中的其他字段获取文本。我正在使用套接字来获取图像并将它们存储在临时位置,以便在所有内容显示之前下载图像。当单击一行时,它会传递当前的 json 元素 (jsonObject[i]( 以及下载的临时图像,在这个新页面上,将显示 tempImage 和表中未使用的其他一些字段。

问题:在单击行时显示表格和页面的情况下从场景前后移动时,需要一些时间才能加载。可以理解,因为它必须下载图像,为了帮助解决这个问题,我创建了一个名为"加载"的场景,用于在其他两个场景之间调用,目前它只有一个平面白框(屏幕大小(,我希望它在下一个场景需要时间加载时显示,这样它看起来不像应用程序被冻结。

我的问题:">加载"场景不起作用,我知道应用程序加载它,因为我删除了代码中转到下一个屏幕的部分,并且加载场景出现了,但是当它被添加回来时,一切都像以前一样过渡,当前屏幕似乎被冻结,然后转到下一个屏幕,就像"加载"场景不存在一样。我可以得到一些帮助吗?我尝试在"goto"之前使用"loadScene",但我得到了很多错误。谢谢!

我的代码:

项目列表页面.lua

local composer = require ( "composer" )
local widget = require( "widget" )
local json = require( "json" )
-- Load the relevant LuaSocket modules
local http = require( "socket.http" )
local ltn12 = require( "ltn12" )
local scene = composer.newScene()
--To help with navigation, these two variables are set on all scenes except loading
--nextScene is the scene I want loaded after the "loading scene"
--prevScene is the current scene which will soon become the previous.
composer.setVariable( "nextScene", "itemDisplayPage")
composer.setVariable( "prevScene", composer.getSceneName("current"))
--NavigationBar elements initiated
--Removed for readability

--Load Json from local file
local filename = system.pathForFile( "items.json", system.ResourceDirectory )
local decoded, pos, msg = json.decodeFile( filename )
if not decoded then
print( "Decode failed at "..tostring(pos)..": "..tostring(msg) )
else
print( "File successfully decoded!" )
end
local items=decoded.items 
--items being JsonObject explained in queston
--image handler
local function networkListener( event )
if ( event.isError ) then
print ( "Network error - download failed" )
end
print ( "event.response.fullPath: ", event.response.fullPath )
print ( "event.response.filename: ", event.response.filename )
print ( "event.response.baseDirectory: ", event.response.baseDirectory )
end

--Table stuff
local scrollBarOptions = {
sheet = scrollBarSheet,  -- Reference to the image sheet
topFrame = 1,            -- Number of the "top" frame
middleFrame = 2,         -- Number of the "middle" frame
bottomFrame = 3          -- Number of the "bottom" frame
}

local function onRowRender( event )
-- Get reference to the row group
local row = event.row
local params=event.row.params
local itemRow=3;
-- Cache the row "contentWidth" and "contentHeight" because the row bounds can change as children objects are added
local rowHeight = row.contentHeight
local rowWidth = row.contentWidth
row.rowTitle = display.newText( row, params.topic, 0, 0, nil, 14 )
row.rowTitle:setFillColor( 0 )
row.rowTitle.anchorX = 0
row.rowTitle.x = 0
row.rowTitle.y = (rowHeight/2) * 0.5
--Other elements removed for readabilty (it's all just text objects)
--Download Image
--params referring to items[i]
local imagelink =params.imagelink
-- Create local file for saving data
local path = system.pathForFile( params.imagename, system.TemporaryDirectory )
myFile = io.open( path, "w+b" ) 
-- Request remote file and save data to local file
http.request{
url = imagelink, 
sink = ltn12.sink.file( myFile )
}
row.Image = display.newImageRect(row, params.imagename, system.TemporaryDirectory, 25, 25)
row.Image.x = 20
row.Image.y = (rowHeight/2) * 1.5
row:insert( row.rowTitle )
row:insert( row.Image )
end
local function onRowTouch( event )
local row = event.target
local params=event.target.params
composer.removeScene(composer.getSceneName("current"))
composer.gotoScene( "loading" , {params=params})
end
-- Table
local tableView = widget.newTableView(
{
left = 0,
top = navBar.height,
height = display.contentHeight-navBar.height,
width = display.contentWidth,
onRowRender = onRowRender,
onRowTouch = onRowTouch,
listener = scrollListener
}
)
function scene:create( event )
local sceneGroup = self.view
-- create a white background to fill screen
local background = display.newRect( display.contentCenterX, display.contentCenterY, display.contentWidth, display.contentHeight )
background:setFillColor( 1 )    -- white
-- Insert rows
for i = 1, #sermons do
-- Insert a row into the tableView
tableView:insertRow{
rowHeight = 100,
rowColor = { default={ 0.8, 0.8, 0.8, 0.8 } },
lineColor = { 1, 0, 0 },
params=items[i]
}
end
-- all objects must be added to group (e.g. self.view)
sceneGroup:insert( background )
sceneGroup:insert( tableView )
end
-- other functions and elements unused and removed for readability

加载中.lua

local composer = require ( "composer" )
local widget = require( "widget" )
local json = require( "json" )
local scene = composer.newScene()
local nextParams
function scene:create( event )
local sceneGroup = self.view
nextParams=  event.params  
-- create a white background to fill screen
local background = display.newRect( display.contentCenterX, 
display.contentCenterY, display.contentWidth, display.contentHeight )
background:setFillColor( 1 )    -- white
-- all objects must be added to group (e.g. self.view)
sceneGroup:insert( background )
end
local function showNext(event)
--go to next scene
composer.removeScene(composer.getSceneName("current"))
--Goes to next scene with parameters passed from previous scene
composer.gotoScene(composer.getVariable( "nextScene" ), {params=nextParams})
return true
end
function scene:show( event )
local sceneGroup = self.view
local phase = event.phase
if phase == "will" then
-- Called when the scene is still off screen and is about to move on screen
elseif phase == "did" then
showNext()
end 
end
-- other functions and elements unused and removed for readability

项目显示页面.lua

local composer = require ( "composer" )
local widget = require( "widget" )
local json = require( "json" )
local scene = composer.newScene()
--To help with navigation, these two variables are set on all scenes except loading
--nextScene is the scene I want loaded after the "loading scene"
--prevScene is the current scene which will soon become the previous.
composer.setVariable( "nextScene", composer.getVariable( "prevScene" ))
composer.setVariable( "prevScene", composer.getSceneName("current"))
--NavigationBar elements initiated
--This creates the "back button", when clicked it returns to the previous scene, in this case "itemListPage"
--it takes, no parameters
local function handleLeftButton( event )
if ( event.phase == "ended" ) then
composer.removeScene(composer.getSceneName("current"))
composer.gotoScene( "loading" , {params=nil})
end
return true
end
--Remaning navbar elements removed for readability
function scene:create( event )
local sceneGroup = self.view
local params=event.params
-- create a white background to fill screen
local background = display.newRect( display.contentCenterX, display.contentCenterY, display.contentWidth, display.contentHeight )
background:setFillColor( 1 )    -- white
--creating header bar
local bar = display.newRect( navBar.height + (headerBarHeight*0.5), display.contentCenterY, display.contentWidth, headerBarHeight )
bar:setFillColor( 1 )
-- create stuff
local title = display.newText(params.topic, 0, 0, nil, 14 )
title:setFillColor( 0 )
title.anchorX = 0
title.x = margin
title.y = ((2*headerBarHeight/2) * 0.5)+navBar.height
local Image = display.newImageRect(params.imagename, system.TemporaryDirectory, 25, 25)
Image.x = 50
Image.y = display.contentCenterY

-- all objects must be added to group (e.g. self.view)
sceneGroup:insert( background )
sceneGroup:insert( title )
sceneGroup:insert( Image)
end
-- other functions and elements unused and removed for readability

如果我理解正确,您的场景按以下顺序显示:ItemListPage->loading->ItemDisplayPage

但是加载场景没有任何繁重的工作要做 - 所以它是多余的。

ItemListPage.lua,您将onRowRender回调中加载图像。当您在scene:create中调用tableView:insertRow(...)时,将调用此回调。所以有freese的根源

我建议您在ItemListPage场景create事件上创建加载叠加。在向用户显示加载覆盖层后,应运行部分创建表的代码 -ItemListPagescene:show事件

function scene:show( event )
local sceneGroup = self.view
local phase = event.phase
if phase == "will" then
elseif phase == "did" then
composer.showOverlay( "loading", { isModal = true })
-- Insert rows
for i = 1, #sermons do
--put your code here
end
composer.hideOverlay( "fade", 100 )
end 
end

最新更新