侧边栏Drawer栏刷新
创始人
2024-03-23 08:28:49
0

Drawer的父类为StatelessWidget,不可刷新,今天来讲一下刷新的办法
需求:点击A用户,弹出侧边栏,侧边栏展示用户的数据。
需要使用StreamBuilder。但是使用stream发数据是行不通的,因为数据传递不进去。
但是使用StreamBuilder依旧可以收到通知。所以流程就需要改变一下
一、点击按键后刷新Drawer并展示
1、使用StatefulWidget
2、在state里创建备用数据,本例为SSML ssml=SSML();
3、点击按键,更新备用数据:ssml = ssmlList[index];
4、通知StreamBuilder:streamController.add(‘event’);
5、StreamBuilder接到通知,使用备用数据重新构造

二、刷新Drawer面板上的内容
具体为使用StatefulBuilder自带的setState方法,不要使用公共的,作为区别,名字改为setStateB。代码片段为_changeRate方法

class DrawerTest extends StatefulWidget {final File file;const DrawerTest(this.file, {super.key});@overrideState createState() {return _DrawerTestState();}
}class _DrawerTestState extends State {SSML ssml = SSML();StreamController streamController = StreamController.broadcast();List ssmlList = [];@overridevoid initState() {ssmlList.add(SSML()..name = 'dan');ssmlList.add(SSML()..name = 'ada');super.initState();}final GlobalKey _ssKey = GlobalKey();@overrideWidget build(BuildContext context) {return Scaffold(key: _ssKey,drawer: _getDrawer(),appBar: AppBar(leading: IconButton(onPressed: () {Navigator.pop(context);},icon: const Icon(Icons.arrow_back)),title: const Text('Drawer测试'),),body: SafeArea(child: Container(color: Colors.white10,padding: const EdgeInsets.all(15),child: ListView.builder(itemCount: ssmlList.length,itemBuilder: (context, index) {return ElevatedButton(onPressed: () {ssml = ssmlList[index];streamController.add('event'); //通知StreamBuilder该刷新了_ssKey.currentState!.openDrawer();},child: Text('${ssmlList[index].name}打开左边栏'));}),)));}StreamBuilder _getDrawer() {return StreamBuilder(stream: streamController.stream,builder: (context, shot) {return Drawer(child: StatefulBuilder(builder: (context, setStateB) {return _changeRate(ssml);},));});}Widget _changeRate(SSML ssml) {return StatefulBuilder(builder: (context, setStateB) {return Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Text('速度:${ssml.rate}'),Slider(value: ssml.rate.toDouble(),max: 500,min: -500,onChanged: (value) {setStateB(() {ssml.rate = value.toInt();});// setState(() {});})],);});}
}class SSML {late String name;int rate = 0;
}

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...
【Ctfer训练计划】——(三... 作者名:Demo不是emo  主页面链接:主页传送门 创作初心ÿ...