Flutter局部刷新方法_安全

Flutter中Widget分为StatefulWidget和StatelessWidget，分别为动态视图和静态视图，视图的更新需要调用StatefulWidget的setState方法，这会遍历调用子Widget的build方法。当一个主页面比较复杂时，会包含多个widget，如果直接调用setState，会遍历所有子Widget的build，这是非常不必要的性能开销，有没有单独刷新指定Widget的方式呢？这个时候就要用到GlobalKey了。

一个StatefulWidget包含一个Button，一个Text，通过点击Button调用主Widget的setState方法，刷新Text，示例如下：

同样一个StatefulWidget包含一个多个Text和Button，点击Button我们只需要刷新指定的Text，通过GlobalKey的方式，实现如下：

主Widget，包含一个需要更新的TextWidget和一个不需要更新的Text

需要单独更新的Widget

传递事件的Button

这样点击Button就只会更新指定的TextWidget了，效果如下：

这只是一个简单的例子，在实际开发中为了页面刷新的高效率，模块化封装非常重要。很多情况下都只需要局部刷新，而不是重构整个视图。所以Globalkey的运用在项目中需要熟练掌握

实现web页面的局部刷新

服务器的回传会引发整个页面的刷新，怎么样只让它刷新局部呢，前几天看见书上有讲用
WebService行为的，今天试了试，效果还不错
在web目录中需要一个文件webservicehtc
可以到这里下载: >Prototype如何实现页面局部定时刷新

可以使用Prototype的AjaxPeriodicalUpdater来实现页面的局部刷新。

比如如果页面上需要定时刷新的部分为

那么可以按照如下代码定时刷新这一部份

new AjaxPeriodicalUpdater(‘refresh’, ‘/your_url’,

{

method: ‘get’,

insertion: InsertionTop,

frequency: 1,

decay: 2

});

其中的两个参数frequency表示间隔的秒数，缺省情况下为2。decay表示如果返回的内容相同，则将frequency的间隔时间加倍，这里第一次是1秒，如果返回内容相同则编程两秒，然后四秒，然后八秒。。。如果每次返回的结果都不一样那么这个参数就不起作用 ;

可以用Ajax实现局部刷新，参考代码如下：

<%@ page language="java" import="javautil" pageEncoding="utf-8"%>
<%
String url = requestgetRequestURI();
String param = requestgetParameter("param");
if(param != null && !paramequals(""))
{
String[] testData = {"测试数据00000000000000","测试数据111111111111111111","测试数据222222222222222"};
outclear();
outprint(testData[IntegervalueOf(param)]);
return;
}
%>
<!DOCTYPE HTML>
<html>
<body>
<select onchange="GetData(thisvalue)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</select>

<script type="text/javascript">
var ajax;
function GetData(v)
{
    var url = "<%=url%>param=" + v +"&" + (new Date());
    ajax = windowXML><body class="oss">
<div class="header">
<div class="second_nav_out">
</div>
<div class="logo">
</div>
<div class="more_btn left">
<span></span>
</div>
<div class="more_btn right">
<span></span>
</div>
<div class="nav_wrap">
<div class="nav">
<ul class="nav_item" id="nav_here">

</ul>
</div>
<div class="nav_welcome">

<span id="welcome_title"></span><span id="nave_here_welcome"></span>

</div>

</div>
</div>
<iframe src="Cost/CostOfTechniqueCenteraspxflag=homepage" id="showframe" onload="Javascript:SetWinHeight(this)"
name="showframe" scrolling="no" frameborder="0" width="100%"></iframe>
</body>
将你的子网页url写在src中。然后在这个主页中加个菜单，每级菜单对应你的一个子页面。通过点击菜单修改这里的iframe的src来加载你的子页面。

Repeater里面的button控件ID不是原来的控件ID，因为Repeater中的button控件是动态生成的，会根据行值为它内部的控件ID自动添加前缀，所以UpdatePanel 找不到 PS：你把Repeater整个放进UpdatePanel 里也可以实现局部刷新的不用指定ControlID

欢迎分享，转载请注明来源：内存溢出

原文地址: http://www.outofmemory.cn/yw/13374306.html

Flutter局部刷新方法

发表评论

评论列表（0条）