CustomScrollWidget,SliverList,SliverChildBuilderDelegate会不断重建并降低性能扑

问题描述

我正在考虑实现SliverAppBar及其下的Scrollable项,所以我现在有了以下代码

CustomScrollView(
        semanticChildCount: categoryItems.length,physics: BouncingScrollPhysics(),slivers: [
          SliverAppBar(
            automaticallyImplyLeading: false,backgroundColor: Colors.white,elevation: 0,actions: [
              Padding(
                padding: EdgeInsets.only(right: 15),child: IconButton(
                  onpressed: () {},icon: Icon(
                    Icons.more_horiz,color: changeColor == 80 ? Color(0xFFB2A588) : Colors.white,size: 30,),)
            ],expandedHeight: MediaQuery.of(context).size.height / 3,stretch: true,pinned: true,flexibleSpace: LayoutBuilder(
                builder: (BuildContext context,BoxConstraints constraints) {
              // setting state for top to change color of more horiz
              WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {
                    changeColor = constraints.biggest.height;
                  }));
              return FlexibleSpaceBar(
                title: Row(
                  mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.start,children: [
                    Text(
                      constraints.biggest.height == 80 ? 'Title' : '',style: TextStyle(
                        fontSize: 25,fontWeight: FontWeight.bold,color: Color(0xFFB2A588),Visibility(
                      visible: constraints.biggest.height == 80,child: Icon(
                        Icons.keyboard_arrow_down,size: 35,)
                  ],stretchModes: [
                  StretchMode.zoomBackground,],background: Stack(
                  children: [
                    // category image
                    Image.network(
                      'networkimage',fit: BoxFit.cover,width: double.infinity,// category title
                    Positioned(
                      bottom: 30,left: 30,child: Row(
                        children: [
                          SizedBox(
                            width: MediaQuery.of(context).size.width / 2.5,child: Text(
                              'Title',style: TextStyle(
                                  fontSize: 60,color: Colors.white),// button
                    Positioned(
                      bottom: 30,right: 30,child: SizedBox(
                        width: MediaQuery.of(context).size.width / 4,child: RaisedButton(
                          onpressed: () {
                            Navigator.pop(context);
                          },color: Colors.white,elevation: 4.0,child: Text('View more',style: TextStyle(
                                  fontSize: 20,fontWeight: FontWeight.w600,color: Colors.black)),shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(25.0)),);
            }),SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context,int index) {
                print(index); },childCount: categoryItems.length,)
    ],)

print(index)语句不断地每秒执行一次。任何想法为什么会这样?首次使用SliverList

P.S。例如,如果您将一些ListTile放在SliverChildBuilderDelegate内,它仍会不断执行print语句。

解决方法

使用嵌套结构时要考虑的事情之一是避免无限循环。如果在“状态”更改时重绘了字段,它将在其下的其他循环中重复其自身。 请删除指定的区域并尝试。

要删除的代码:

// This field triggers repetition.

WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {
    changeColor = constraints.biggest.height;
}));