Flutter 笔记：图片加载无闪烁；父子传值

图片加载闪烁解决

将gaplessPlayback设置为true时,原始图像将保留,直到新图像完成加载并且不会出现“白色闪烁间隙”.

Image.asset(curImgUrl, fit: BoxFit.cover,gaplessPlayback: true,)

父类改变子组件的值用GlobalKey，例子是一个点击按钮修改gridview的值

//图案选择点击
class _TuanMenusState extends State {
  //1-改变子类的值
  GlobalKey<_ZmXzGridViewState> _globalKey = new GlobalKey<_ZmXzGridViewState>();

  void _updateGroupValue(int v) {
    setState(() {
      groupValue = v;
      curTuan = v == 0 ? zmDatas[0] : xzDatas[0];
      widget.updataImg();
      //1-传值给子组件，父级绑定并可以改变子组件参数值
      _globalKey.currentState.setData(0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 110,
      margin: EdgeInsets.fromLTRB(0, 20, 0, 0),
      alignment: Alignment.topLeft,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '图案',
            style: menusGraysTextStyle,
          ),
          //字母 星座
          Container(
            padding: EdgeInsets.fromLTRB(0, 4, 0, 0),
            width: 110,
            height: 28,
            child: Row(
              children: [
                Expanded(
                  child: RaisedButton(
                    padding: EdgeInsets.zero,
                    child: Text(
                      '字母',
                      style: TextStyle(
                          color: groupValue == 0 ? Colors.white : Colors.grey,
                          fontSize: 10),
                    ),
                    color: Colors.black,
                    onPressed: () {
                      _updateGroupValue(0);
                    },
                  ),
                ),
                SizedBox(
                  width: 5,
                ),
                Expanded(
                  child: FlatButton(
                    padding: EdgeInsets.zero,
                    child: Text(
                      '星座',
                      style: TextStyle(
                          color: groupValue == 1 ? Colors.white : Colors.grey,
                          fontSize: 10),
                    ),
                    color: Colors.black,
                    onPressed: () {
                      _updateGroupValue(1);
                    },
                  ),
                ),
              ],
            ),
          ),
          //显示列表
          Container(
            alignment: Alignment.topLeft,
            padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
            //将globalKey传给子组件
            child: ZmXzGridView(key:_globalKey,menusData: groupValue == 0 ? zmDatas : xzDatas, updataImg: widget.updataImg,),
          ),
        ],
      ),
    );
  }
}

class ZmXzGridView extends StatefulWidget {
  List menusData = new List();
  int curIndex = 0;
  final updataImg;

  ZmXzGridView({Key key, this.menusData, this.updataImg}) : super(key: key);

  @override
  _ZmXzGridViewState createState() => new _ZmXzGridViewState();
}

//字母星座列表
class _ZmXzGridViewState extends State {
  String imgUrl;
  int curIndex = 0;

  //如果需要父类控制字类就要void setData，不需要就可以用正常的initState
  @override
  void initState() {
    super.initState();
  }
  //接收父类的传值
  void setData(int index) {
    setState(() {
      curIndex = index;
    });
  }

  void _updateTuan(Menu menu, int index) {
    setState(() {
      if (curIndex != index) {
        curTuan = menu;
        curIndex = index;
        menu.select = true;
        widget.updataImg();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: EdgeInsets.zero,
      shrinkWrap: true,
      //水平子Widget之间间距
      crossAxisSpacing: 10.0,
      //垂直子Widget之间间距
      mainAxisSpacing: 10.0,
      //一行的Widget数量
      crossAxisCount: 3,
      //子Widget宽高比例
      childAspectRatio: 1.4,
      //子Widget列表
      children: getWidgetList(widget.menusData.length, widget.menusData),
    );
  }

  List getWidgetList(int number, List menusDatas) {
//  return menusDatas.map((menu) => getItemContainer(context, menu)).toList();
    List widgetList = new List();
    for (int index = 0; index < number; index++) {
      Menu menu = menusDatas[index];
      String pressUrl = menu.icon;
      if (curIndex == index && menu.icon.indexOf("_press.png") == -1) {
        imgUrl = pressUrl.replaceAll('.png', '_press.png');
        menu.icon = imgUrl;
      } else if (curIndex != index) {
        imgUrl = pressUrl.replaceAll('_press.png', '.png');
        menu.icon = imgUrl;
      }
      widgetList.add(getItemContainer(index, menu));
    }
    return widgetList;
  }

  Widget getItemContainer(int index, Menu menu) {
    return Container(
        alignment: Alignment.center,
        child: GestureDetector(
          child: Image.asset(
            menu.icon,
            fit: BoxFit.contain,
          ),
          onTap: () {
            //图案点击事件
            _updateTuan(menu, index);
          },
        ));
  }
}

子组件改变父类的值

将父类的方法传给子类，然后子类调用weight.*

//1.父类修改显示图片
  void _updateImg() {
    setState(() {
      curImgUrl = getStrImgUrl();
      print('curImg---' + curImgUrl);
    });
  }



class RightsMens extends StatefulWidget {
  //2.子类定义
  final updataImg;
  RightsMens({Key key, this.updataImg}) : super(key: key);

  @override
  _RightsMensState createState() => new _RightsMensState();
}

class _RightsMensState extends State {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        //3.传递父类方法调用
        ColorsMenus(updataImg: widget.updataImg, ),
        TuanMenus(
          updataImg: widget.updataImg,
        ),
        ModelSelect(
          updataImg: widget.updataImg,
        ),
      ],
    );
  }
}