写一个Flutter彩票客户端--开奖列表

数据来源 聚合数据

项目用到的库 rxdart + dio + bloc

主要技术点：

• 请求完数据的组合显示（由于聚合数据是每一个彩种都是单个请求发）；

• 号码的动态添加布局（遍历数据动态添加布局数据，就像Android中动态addview一样）；

• rxdart + dio 的网络请求；

• rxdart + bloc 的状态管理；

• Stack + Positoned + Offstage（隐藏显示）Widget的使用

---

数据的组合: Future.wait([各个彩种的请求接口])

Future<Response> lottery(String lotteryId) {
    return _dio.get(Api.LOTTERY_QUERY, queryParameters: {
      "lottery_id": lotteryId,
      "lottery_no": "",
      "key": Api.KEY
    });
  }

Future queryLotteryList_() {
    Future<List<Response>> resp = Future.wait([
      lottery(Const.SSQ),
      lottery(Const.DLT),
      lottery(Const.QLC),
      lottery(Const.QXC),
      lottery(Const.PLS),
      lottery(Const.PLW),
      lottery(Const.FCSD),
    ]);
    return resp;
  }
复制代码

号码布局的实现（动态添加）：

 Container(
  padding: EdgeInsets.only(top: 9),
  child: Row(
    children: info.lotteryRes.split(',').map((number) {
      ++numberIndex;
      return Container(
        margin: EdgeInsets.only(right: 4),
        child: ClipOval(
          child: Container(
            width: 30,
            height: 30,
            color: Utils.getLotteryItemColor(
                numberIndex, info.lotteryId),
            child: Center(
              child: Text(
                number,
                style: TextStyle(
                    color: Colors.white, fontSize: 14),
              ),
            ),
          ),
        ),
      );
    }).toList(),
  ),
),
复制代码

转载于:https://juejin.im/post/5d01d2c15188254ee433c50b