CustomScrollWidget、SliverList、SliverChildBuilderDelegate 不断重建和降低性能。扑

Question

我正在考虑在其下实现 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,
                        color: Color(0xFFB2A588),
                      ),
                    )
                  ],
                ),
                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,
                                  fontWeight: FontWeight.bold,
                                  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。例如，如果你在 SliverChildBuilderDelegate 中放置一些 ListTiles，它仍然会不断地执行打印语句。

Answer 1

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

要删除的代码：

// This field triggers repetition.

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

CustomScrollWidget、SliverList、SliverChildBuilderDelegate 不断重建和降低性能。扑

CustomScrollWidget, SliverList, SliverChildBuilderDelegate constantly rebuilds and degrades performance. Flutter

flutter

sliverappbar