主页 / coding / 问题 / 76920996
Accepted
IMemon
Asked: 2023-08-17 19:18:00 +0800 CST

在 flutter 中使用 sliver appbar 时状态不会改变

  • 772

我正在学习 sliverapp 吧....

在这里我使用了 Customscroll 视图，我想要三件事

  1. SliverAppBar用于显示标题“交易”

  2. ** SliverPersistentHeader**。用于根据开关值（全部或仅正数）进行选择

3)条子列表。显示所有过滤数据

我在 Switch 的 onChange 方法中遇到问题。即使我已经应用了 setState，它也不会更改 showAll 变量的状态。

Widget build(BuildContext context) {
    return SafeArea(
      child:Scaffold(
        body: CustomScrollView(
          slivers: [
            //sliver appbar
             SliverAppBar(
              expandedHeight: 300,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('All'+showAll.toString()),
              ),
              pinned: true,
              floating: true,
            ),

            SliverPersistentHeader(
              delegate: _PinnedHeaderDelegate(child:  Container(
                height: 50,
                color: Colors.white,
                child: Row(children: [
                  Text('Show All Data'),
                  Switch(
                      value: showAll,
                      onChanged: (val) {
                        print(val);
                        setState(() {
                          showAll = val;
                        });
                      }),


                ],),
              )),
              pinned: true,
            ),

            //sliver list
            buildShowData(),
          ],
        ),
      ),
    );

  }

  buildShowData() {
    List<int> data;
    if(showAll==true)
    data=numbers;
    else
    data=numbers.where((element) => element>0).toList();
    return SliverList(
      delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              final number=data[index];
          return Card(
            child: ListTile(
              title: Text('$number',style: TextStyle(
                color: number<0?Colors.red:Colors.green
              ),),
            ),
          );
        },
        childCount: data.length,
      ),
    );
  }
}
flutter

2 个回答

  1. Best Answer

    发送您的 _PinnedHeaderDelegate 类代码

    希望 shouldRebuild 返回 true...

    bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return true;// check this line of your class
  }
    • 1

  2. 确保_PinnedHeaderDelegate类中的shouldRebuild返回true

    class _PinnedHeaderDelegate extends SliverPersistentHeaderDelegate {
  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      height: 50,
      color: Colors.grey,
      child: Center(child: Text('Pinned Widget')),
    );
  }

  @override
  double get maxExtent => 50; 

  @override
  double get minExtent => 50;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return true; -------------------> //Make sure here it returns true
  }
}

    输出 ：

    开关关闭：

    在此输入图像描述

    开关已打开：

    在此输入图像描述

    • 1

相关问题