解决Flutter中软键盘遮挡底部弹窗问题

最新推荐文章于 2024-08-20 14:34:44 发布

小九今天不码代码

最新推荐文章于 2024-08-20 14:34:44 发布

阅读量348

点赞数 2

分类专栏： flutter 文章标签： flutter 前端 javascript

本文链接：https://blog.csdn.net/weixin_42285486/article/details/141132445

版权

flutter 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

showModalBottomSheet(
      context: context,
      isScrollControlled: true,//显示的底部弹出框（Bottom Sheet）是否能够根据内容大小进行滚动。
      builder: (BuildContext context) {
        return StatefulBuilder(
            builder: (context, setState) {
          final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;//检测软键盘是否弹出
          return Padding(
              padding: EdgeInsets.only(bottom: keyboardHeight),//设置底部内边距为软件盘高度
              child:
              ClipRRect(
                  borderRadius:
                      const BorderRadius.vertical(
                    top: Radius.circular(20),
                  ),
                  child: Container(
                      color: Colors.white,
                      height: 300.w,
                      width: double.infinity,
                      padding: const EdgeInsets.only(
                          top: 34.0, bottom: 20.0),
                      child: Column(
                        mainAxisAlignment:
                            MainAxisAlignment
                                .spaceBetween,
                        children: [
                          Text(
                            '修改密码',
                            style: TextStyle(
                              color:
                                  hexColor('#333333'),
                              fontSize: 20,
                            ),
                          ),
                          const SizedBox(height: 15.0),
                          // 弹窗中间部分处理
                          Expanded(
                            child: Center(
                              child: _option(),
                            ),
                          ),
                          const SizedBox(height: 15.0),
                          SizedBox(
                            width: 180.w,
                            child: OptBtn(
                                height: 52.w,
                                borderRadius: 26.0,
                                color:
                                    hexColor('#03B86F'),
                                borderColor:
                                    hexColor('#03B86F'),
                                textColor:
                                    hexColor('#FFFFFF'),
                                text: '确定',
                                onTap: () {
                                  Navigator.pop(
                                      context);
                                }),
                          )
                        ],
                      )));
          );
        });
      });