Question

我的ListView填充的列表项每个都包含从互联网获取数据的initState方法。因此，当我滚动浏览列表而看不到项目时，它们就会离开小部件树，而当我再次向上滚动至它们时，它们将重新渲染，并再次获取数据。

我不希望这种情况发生，所以有什么方法可以缓存数据或在滚动时不将其从渲染树中删除吗？

Answer 1

请查看此问题和答案。 how to build dynamic list from http server in flutter?

您应该做的是在第一次接收到数据时将其缓存。您还需要使用ListView.builder。该小部件具有itemBuilder方法。您应该定义自己的名为getItem(int index)的方法。此方法将使用索引在缓存中查找您的数据，如果找不到该数据，它将发出http请求并将其保存在缓存中。

Answer 2

您可以使用

 return ListView.separated(
  physics: BouncingScrollPhysics(),
  padding: EdgeInsets.only(bottom: 10),
  shrinkWrap: true,
  scrollDirection: Axis.vertical,
  itemCount: (transaction.length > 10 ? 5 : transaction.length),
  itemBuilder: (context, index) {
     return Container(
       child: (transaction.length == 4 ? Text('No Latest Transaction', textAlign: TextAlign.center,style:
       TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0, color: Colors.black),) :
       ListTile(
         dense: true,
         trailing: Text(
           transaction[index].network,
           style: TextStyle(
               inherit: true, fontWeight: FontWeight.w700, fontSize: 16.0),
         ),
         leading: Padding(
           padding: const EdgeInsets.symmetric(horizontal: 4.0),
           child: Material(
             elevation: 10,
             shape: CircleBorder(),
             shadowColor: Color(0xFF63013C), //ChangeColor(transaction[index].network).withOpacity(0.4),
             child: Container(
               height: 50,
               width: 50,
               decoration: BoxDecoration(
                 color: ChangeColor(transaction[index].network),
                 shape: BoxShape.circle,
               ),
               child: ClipRRect(
                 borderRadius: BorderRadius.circular(8.0),
                 child: Icon(
                   NetworkIcon(transaction[index].network),
                   color: Colors.white,
                 ),
               ),
             ),
           ),
         ),
         title: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: <Widget>[
             Text(
               'N' + transaction[index].amount,
               style: TextStyle(
                   inherit: true,
                   fontWeight: FontWeight.w700,
                   fontSize: 16.0),
             ),
           ],
         ),
         subtitle: Padding(
           padding: const EdgeInsets.only(top: 8.0),
           child: Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: <Widget>[
               Text(transaction[index].phoneno,
                   style: TextStyle(
                       inherit: true,
                       fontSize: 12.0,
                       color: Colors.black45)),
               SizedBox(
                 width: 20,
               ),
               Text(transaction[index].category,
                   style: TextStyle(
                       inherit: true,
                       fontSize: 12.0,
                       color: Colors.black45)),
               Spacer(),
             ],
           ),
         ),
       )),
     );
  },
  separatorBuilder: (context, index) {
    return Divider();
  },
);

Flutter阻止ListView重新呈现其子级

2 个答案: