0
点赞
收藏
分享

微信扫一扫

Flutter之初识eventBus

追风骚年 2022-03-30 阅读 76

一、EventBus介绍

在Android事件总线库中,EventBus库是最广泛之一。

  • 发布者/订阅者模式

  • 集中式通信

  • 低耦合,简化组件通信

二、自定义EventBus

步骤1.
在yaml文件中引入

  event_bus: ^1.1.0

步骤2.
创建文件

import 'package:event_bus/event_bus.dart';
EventBus cartSpecEventBusNum = EventBus();
class CartSpecEventBus {
  int pecIndex;
  CartSpecEventBus(this.pecIndex);
}

步骤3.
在主文件中定义全局变量
在这里插入图片描述
主文件初始化时调用Eb构造方法赋值变量在这里插入图片描述
在主文件中自定义了两个组件
在这里插入图片描述
在这里插入图片描述商品规格组件
在这里插入图片描述

在这里插入图片描述
完整代码

import 'package:flutter/material.dart';
import 'package:myshop_flutter/config/index.dart';
import 'package:myshop_flutter/event/cart_guige_event.dart';

//定义规格改变回调方法
typedef OnNumberSpeciChange(int Spec);
class SpecificationsWidget extends StatefulWidget {
  OnNumberSpeciChange SpecChange;
  //计数
  var _Spec;
  var list;
  SpecificationsWidget(this._Spec,this.SpecChange,this.list);

  @override
  _SpecificationsWidgetState createState() => _SpecificationsWidgetState();
}

class _SpecificationsWidgetState extends State<SpecificationsWidget> {
  OnNumberSpeciChange SpecChange;
  var specindex;
  var list;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    SpecChange = widget.SpecChange;
    specindex = widget._Spec;
    list = widget.list;
 }

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children:_specificationsWidget(list),
    );
  }
  //商品规格
  List<Widget> _specificationsWidget( specificationslist) {
    List<Widget> specificationsWidget =[];
    print(specificationslist.length);
    //循环迭代出所有规格
    for (int i = 0; i < specificationslist.length; i++) {

      specificationsWidget.add(
          Container(
          padding: EdgeInsets.all(10),
          child: InkWell(
            onTap: (){
              cartSpecEventBusNum.fire(CartSpecEventBus(
                  i
              ));

              setState(() {
                specindex = i;
              });
              SpecChange(i);
            },
            child:  Chip(
              //规格名称
              label: Text(
                specificationslist[i],
                //选中与未选中使用不同颜色区分
                style: TextStyle(
                    color: i == specindex
                        ? Colors.white
                        : Colors.black54,
                    fontSize: 16),
              ),
              //选中与未选中使用不同颜色区分
              backgroundColor: i == specindex
                  ? KColor.specificationWarpColor
                  : Colors.grey,
            ),
          ))
      );
    }
    return specificationsWidget;
  }
}

选择规格组件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

import 'package:flutter/material.dart';
import 'package:myshop_flutter/config/index.dart';
import 'package:myshop_flutter/event/cart_guige_event.dart';
class CartSelectWidget extends StatefulWidget {
  List list;
  int index;
  CartSelectWidget(this.index,this.list);
  @override
  _CartSelectWidgetState createState() => _CartSelectWidgetState();
}
class _CartSelectWidgetState extends State<CartSelectWidget> {
  List textList;
  int specindex;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    textList = widget.list;
    specindex = widget.index;
    print(specindex);
  }

  //监听当前规格索引值改变事件
  _listener() {
    print("触发监听");
    cartSpecEventBusNum
        .on<CartSpecEventBus>()
        .listen((CartSpecEventBus event) {
      setState(() {
        specindex = event.pecIndex;
      });
    });
  }
  @override
  Widget build(BuildContext context) {
    _listener();
    return
      Text(KString.ALREAD_SELECTED +
          ":" +
          textList[specindex]);
  }
}
举报

相关推荐

0 条评论