记一点flutter的小问题 有遇到就更
- 同一个页面多个tab切换widget重新构建的问题(首页那种效果)
- 报错setState() or markNeedsBuild() called during build.
- 跳转并关闭当前页面
- 占位图网络图片(我这是圆形头像)
- 新跳转页面全黑
- 全局参数状态管理
- 设置TextField限制只能输入字母数字
- String 不能转json
- ListView不能设列数,GridView不能设置具体item高度(只有比例)
- ListView中嵌套GridView
- SingleChildScrollView,Column中嵌套GridView
- 获取屏幕宽高
- 获取系统状态栏高度
- Row中嵌套Column时高度默认为最大(Column嵌套row时宽高默认最大)
同一个页面多个tab切换widget重新构建的问题(首页那种效果)
我自己场景是在首页用户信息页面初始化获取用户信息 然后切换页面发现被刷新才发现的(我直接用stack包裹要显示的几个切换页面)
方式挺多种 我自己是用Offstage ,因为那时顺便练习了provide就大材小用把点击选中position保存成全局的了
Flutter 三种方式实现页面切换后保持原页面状态
报错setState() or markNeedsBuild() called during build.
我自己的场景是首页切换tab的时候在build里判断页面显示了就请求网络(因为原先一次性初始化initState()被调用过了)
然后build()return之前就请求网络了 想着加个loading吧 就报错了
看别人说的加个延时就可以了
Future.delayed应该也是吧任务排序到栈尾 延时写0也是可以的
跳转并关闭当前页面
///跳转并关闭当前页面
Navigator.pushAndRemoveUntil(
context,
new MaterialPageRoute(builder: (context) => new 页面,
(route) => route == null,
);
占位图网络图片(我这是圆形头像)
ClipOval(
child: FadeInImage(
fit: BoxFit.cover,
height: 50,
width: 50,
//修改淡入淡出时间
fadeOutDuration: Duration(milliseconds: 10),
fadeInDuration: Duration(milliseconds: 10),
image: NetworkImage(
//网络图片地址,
),
placeholder: AssetImage(
//自己占位图
'images/Me/ic_avatar_default.png',
),
),
),
新跳转页面全黑
使用Scaffold包裹
全局参数状态管理
使用provide: ^1.0.2
设置TextField限制只能输入字母数字
TextField(
obscureText: true,
decoration: InputDecoration(
hintText: "请输入密码",
),
onChanged: (v) {
onPassWordChange(v);
},
inputFormatters: <TextInputFormatter>[
WhitelistingTextInputFormatter(RegExp("[a-zA-Z]|[0-9]")), //只输入字母数字
LengthLimitingTextInputFormatter(12) //限制长度
],
),
String 不能转json
这是我在SharePreferences缓存字符串json后提取缓存json转实体遇到的。小问题
网络请求下来的json用json.encode(实体) 转jsonString
用json.decode(String)序列化成Map<String, dynamic> json格式
ListView不能设列数,GridView不能设置具体item高度(只有比例)
这不坑爹呢 想念recycleView
ListView中嵌套GridView
正常情况下报错
要给Gridview加两个属性 physics:NeverScrollableScrollPhysics(),
shrinkWrap: true,
SingleChildScrollView,Column中嵌套GridView
这个说嵌套报错最主要原因是不知道ListView和GridView的高度
给了两个解决
第一个用Container给了具体高度
然而GrideView这个坑爹只有宽高比例。
为了不出现内部滑动 高度就要算明明白白的???
(屏幕宽度用MediaQuery.of(context).size.width, 能获取)
那我要是手贱搞item间隔什么不是要算上天了
再次想念recycleView
转念一想那ListView中嵌套GridView也应该是同一个原因导致报错。试了一下再List View中用Container包裹GridView果然也是有效的。
再转念一想那么SingleChildScrollView中包裹的GridView也加上
physics:NeverScrollableScrollPhysics(),
shrinkWrap: true,
呢
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: 100,
child: Text('Cate'),
),
Container(
height: 100,
child: Text('Cate'),
),
Container(
height: 100,
child: Text('Cate'),
),
Container(
height: 100,
child: Text('Cate'),
),
GridView.builder(
padding: EdgeInsets.all(0),
physics: new NeverScrollableScrollPhysics(),
//增加
shrinkWrap: true,
//增加
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
// crossAxisSpacing: 15,
// mainAxisSpacing: 0,
// childAspectRatio: 0.6,
),
primary: false,
itemCount: 10,
itemBuilder: (context, index) {
return Container(
color: Colors.red,
height: 100,
child: Text('C'),
);
}),
],
),
),
果然也有效。 另外发现GridView会带一个padding效果,我用padding: EdgeInsets.all(0),取消掉了。哎想念recycleView。
附:shrinkWrap的解释是
// 是否应该由正在查看的内容确定scrollDirection中滚动视图的范围。 Whether the extent of the scroll view in the scrollDirection should be determined by the contents being viewed.
可能是类似交予父view决定高度把
physics:NeverScrollableScrollPhysics() 是取消边界效果 我自己试加不加是都无所谓的
获取屏幕宽高
MediaQuery.of(context).size.width,
MediaQuery.of(context).size.height
获取系统状态栏高度
import ‘dart:ui’;
MediaQueryData.fromWindow(window).padding.top
Row中嵌套Column时高度默认为最大(Column嵌套row时宽高默认最大)
加上 mainAxisSize: MainAxisSize.min,
mainAxisSize 主轴尺寸
点进构造方法就能看到默认值是
MainAxisSize mainAxisSize = MainAxisSize.max,
一个默认宽度尽可能大一个默认高度尽可能大