需求

在 Appbar设置按钮,点击出现顶部弹窗,并点击空白处弹窗消失

效果图

在这里插入图片描述

在这里插入图片描述

过程

  1. 首先预置弹窗、蒙层、和图片,
  2. 当没有点击按钮时,flag 为false,蒙层和弹窗就不出现
  3. 当点击按钮时,flag为true,蒙层和弹窗就出现,就会出现弹窗效果
  4. 在蒙层上设置一个Inkwell,点击使得falg为!flag
Container(
    width: double.infinity,
    height: double.infinity,
    child: Stack(fit: StackFit.expand, children: <Widget>[
      const Center(
        child: Image(
          image: AssetImage(
              "lib/static/picture/noInformation.png"),
        ),
      ),
      state.flag == true
        ? InkWell(
            onTap: () {
              var popButtonPhoneState =
                  context.read<PopButtonPhoneState>();
              popButtonPhoneState.changeFlag();
            },
            child: Container(
              margin: const EdgeInsets.only(top: 6),
              color: const Color.fromRGBO(
                  209, 209, 209, 0.4),
            ),
          )
        : Container(),
    state.flag == true
         ? Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: Container(
              color: Colors.white,
              padding: const EdgeInsets.only(
                  left: 10,
                  right: 10,
                  top: 10,
                  bottom: 10),
              child: Column(
                  crossAxisAlignment:
                      CrossAxisAlignment.start,
                  children: snapshot.data
                      .map<Widget>((e) => MessagePopItem(
                            value: e,
                            flag: e['id'] ==
                                state.checkValue['id'],
                          ))
                      .toList()),
            ))
         : Container()
   ]),
 )
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐