
上QQ阅读APP看书,第一时间看更新
5.4 根据条件渲染内容的替代方案
我们可以在任何地方编写ListView需要返回的小部件。例如在build()方法中定义一个小部件变量newsCard,这不是类中的一个属性,只是一个方法内部的变量,所以只能在这个方法内部使用它,代码如下:

给它一个默认值,把居中的文字赋给它,然后添加一个if判断语句,代码如下:

还可以再优化一下代码,如果这里是一个复杂的小部件树,有一个更好的方案来创建小部件。在类中添加一个创建小部件的方法,例如命名为buildNewsList,代码如下:

方法名以build开头,表示返回一个小部件,就像类中的build()方法一样。方法体中可以剪切Widget build(BuildContext context){ }中的代码,这样在build()方法中我们只需要返回buildNewsList()方法的返回值,代码如下:

这里返回的是buildNewsList()方法的执行结果,在每次重新构建的时候都会调用buildNewsList()方法,更新的时候就可以看到变化。这样小部件News的build()方法更清晰了。如果想再添加一些其他小部件,可以在buildNewsList()中添加,这样build()方法就会一直很清晰,也可以进入到buildNewsList()方法中,查看方法里具体写了什么内容。