侧边栏Drawer栏刷新

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<StatefulWidget> createState() {return _DrawerTestState();}
}class _DrawerTestState extends State<DrawerTest> {SSML ssml = SSML();StreamController streamController = StreamController.broadcast();List<SSML> ssmlList = [];@overridevoid initState() {ssmlList.add(SSML()..name = 'dan');ssmlList.add(SSML()..name = 'ada');super.initState();}final GlobalKey<ScaffoldState> _ssKey = GlobalKey<ScaffoldState>();@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;
}

侧边栏Drawer栏刷新相关推荐

纯CSS实现侧边栏/分栏高度自动相等
一.为何要分栏高度一致? 分栏高度一致的目的是更加美观.举两个例子吧 2.1 对于分栏布局,我们或许会用边框(border)进行分隔,就如鄙人博客的分栏此时最担心的问题就是高度不一致,尤其是无边框属 ...
vue 导航栏刷新页面定位:
不想分析可以直接看解决方案问题描述: 通过router的route-link可以实现导航栏的功能,并且可以跳转到相应页面但是刷新页面导航栏没有定位到当前页面一栏. 问题分析: 定位导航栏步骤 1. ...
html页面跳转时导航栏不变_解决Vue-iview封装导航栏刷新，导航栏消失之坑
1.前言记录一次跳转路由时,导航栏选中消失的神秘事件. 2.事情原图请看这张图,一开始路由跳转到这页面时,导航栏是有高亮的,但是在刷新的时候,高亮就消失了: 总所周知,客户是一种可以从鸡蛋里面挑出 ...
Flutter Drawer侧边栏、以及侧边栏内容布局
1.Drawer(抽屉) 侧边栏在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏.侧边栏默认是隐藏的,我们可以通过手指滑动显示侧边栏 ...
浅识Flutter 基本组件Scaffold的 drawer属性 app创建头像
浅识Flutter 基本组件Scaffold的 drawer属性 app创建头像在项目开发中使用本地图片资源文件的步骤. 1.在项目下创建一个文件夹image 2.将本地图片放入images文件夹里 ...
layui tree ajax刷新,layer 刷新某个页面的实现方法
layer 刷新某个页面的实现方法一:使用layer.open打开的子页面 window.parent.location.reload()//刷新父页面 var index = parent.lay ...
Flutter中Scaffold布局的使用详解及实例代码
Flutter中Scaffold布局的使用详解及实例代码 Scaffold实现了基本的Material布局.只要是在Material中定义了的单个界面显示的布局控件元素,都可以使用Scaffold来绘 ...
Flutter中的Scaffold
文章目录 1.backgroundColor属性 2.appBar属性(顶部标题栏) 3.body属性(页面的主体部分) 4.bottomNavigationBar属性(底部导航栏) 实现效果: 5. ...
ems-员工管理系统
员工管理系统一.项目搭建 1.1 初始化项目依赖二.ems的前端三.ems的后端 config pojo Controller server server.impl mapper mapper. ...

侧边栏Drawer栏刷新

侧边栏Drawer栏刷新相关推荐

最新文章

热门文章