记自己看flutter遇到的小问题

同一个页面多个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,
一个默认宽度尽可能大一个默认高度尽可能大

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值