flutter 组件自适应高度

问题场景

对话框的提示语超出屏幕高度

解决方案

1、使用自适应高度组件:IntrinsicHeight对内容进行包裹
2、考虑内容超出屏幕的可滚动性:使用SingleChildScrollView或者其他可滚动组件进行包裹

示例

Future<void> showNewVersionDialog(
  VersionInfo currVersionInfo,
  VersionInfo newVersionInfo, {
  NewVersionDialogActionFun? cancelAction,
  NewVersionDialogActionFun? confirmAction,
}) async {
  BuildContext context = Get.context!;
  String title = AppLocalizations.of(context)!.upgradeVersion;
  String currentVersion = "${AppLocalizations.of(context)!.currentVersion} ${StringUtils.formatShowVersion(currVersionInfo.version)}";
  String newVersion = "${AppLocalizations.of(context)!.latestVersion} ${StringUtils.formatShowVersion(newVersionInfo.version)}";
  String newVersionNode = newVersionInfo.updateInfo ?? AppConst.EMPTY_STR;
  String str = "$currentVersion\n$newVersion\n$newVersionNode";
  return await showDialog<void>(
      context: Get.context!,
      barrierDismissible: false,
      builder: (BuildContext context) => Dialog(
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(AppSize.radius)),
            ),
            backgroundColor: AppColors.bgColor,
            child: PopScope(
              canPop: false,
              onPopInvoked: (bool? pop) {
                bool isPop = pop ?? false;
                LogD("showNewVersionDialog doOnPopInvoked pop: $pop isPop: $isPop");
                if (!isPop) {
                  LogD("showNewVersionDialog doOnPopInvoked pop: $pop");
                  // onBackPressed();
                }
              },
              child: GetBuilder<NewVersionDialogController>(
                init: NewVersionDialogController(),
                builder: (controller) => Padding(
                      padding: EdgeInsets.fromLTRB(AppSize.dialogHEdget,
                          AppSize.dialogVEdget, AppSize.dialogHEdget, 0),
                      child: IntrinsicHeight(child: Column(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.center,
                        // crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            title,
                            style: TextStyle(
                                color: AppColors.dialogTitleColor,
                                fontSize: AppSize.titleSize,
                                fontWeight: FontWeight.w700),
                          ),
                          SizedBox(height: 10.h),
                          Expanded(child:
                          SingleChildScrollView(child:
                          Align(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                str,
                                style: TextStyle(
                                    color: AppColors.textColor,
                                    fontSize: 14.sp,
                                    fontWeight: FontWeight.w400,
                                    height: AppSize.lineHeight),
                              )),
                          ),
                          ),
                          SizedBox(
                            height: 15.h,
                          ),
                          Row(
                            children: [
                              Expanded(
                                flex: 1,
                                child: UCommonCancelButton(
                                  text:
                                      AppLocalizations.of(Get.context!)!.cancel,
                                  textSize: AppSize.dialogConfirmTextSize,
                                  onPressed: () {
                                    Navigator.pop(context);
                                    if (cancelAction != null) {
                                      cancelAction(controller.noLongerPrompts);
                                    }
                                  },
                                ),
                              ),
                              SizedBox(
                                width: 12.w,
                              ),
                              Expanded(
                                flex: 1,
                                child: UCommonButton(
                                  text: AppLocalizations.of(context)!.immediateUpdates,
                                  textSize: AppSize.dialogConfirmTextSize,
                                  onPressed: () {
                                    Navigator.pop(context);
                                    if (confirmAction != null) {
                                      confirmAction(controller.noLongerPrompts);
                                    }
                                  },
                                ),
                              )
                            ],
                          ),
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              UCheckbox(
                                checked: controller.noLongerPrompts,
                                width: AppSize.checkBoxWidth,
                                height: AppSize.checkBoxHeight,
                                padding: EdgeInsets.only(
                                    top: 10.h, bottom: AppSize.dialogVEdget),
                                onClick: controller.onNoLongerPromptsClick,
                              ),
                              GestureDetector(
                                  onTap: controller.onNoLongerPromptsClick,
                                  behavior: HitTestBehavior.translucent,
                                  child: Padding(
                                      padding: EdgeInsets.only(
                                          top: 10.h,
                                          bottom: AppSize.dialogVEdget,
                                          left: 5.w),
                                      child: Text(
                                        AppLocalizations.of(context)!.noLongerPrompts,
                                        style: TextStyle(
                                            fontSize: AppSize.textSmallSize,
                                            height: AppSize.lineHeight,
                                            color: AppColors.textColor),
                                      )))
                            ],
                          )
                        ],
                      ),
                      )
                    ))),
          ));
}

效果

untitled.gif
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容