Как динамически уменьшать высоту нижнего листа во флаттере?

Question

Я использую showModalBottomSheet и с учетом высоты 90% в начале. Внутри нижнего листа есть две вкладки (повторяющаяся и одноразовая), у повторяющейся вкладки много содержимого, и она отлично отображается с высотой 90%. Но когда я перехожу на одноразовую вкладку, я хочу уменьшить размер нижнего листа до 40%, потому что в нем нет большего содержания, и он выглядит не очень хорошо. Но я не могу динамически изменять высоту нижнего листа при нажатии кнопки одноразовой вкладки.

Может ли кто-нибудь помочь мне, как я могу достичь этой функции во флаттере?

Answer 1

Вы можете использовать следующий код, заменив PutYourWidgetHere() с вашим пользовательским виджетом.

void showBottomSheet() {
    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (BuildContext context) {
          return SingleChildScrollView(
              child: Container(
                padding: EdgeInsets.only(
                    bottom: MediaQuery.of(context).viewInsets.bottom),
                child: PutYourWidgetHere(),
              ));
        });
  }

Answer 2

динамически изменять высоту и размещать контент в центре

      showCupertinoModalBottomSheet(
  expand: false,
  enableDrag: true,
  isDismissible: true,
  barrierColor: ColorUtils.disableBackground.withAlpha(128),
  backgroundColor: ColorUtils.enableBackground,
  topRadius: Radius.circular(SizeUtils.minBlock * 4),
  context: globalKey.currentState!.context,
  builder: (builder) {
    return Padding(
        padding: EdgeInsets.all(SizeUtils.minBlock * 8),
        child: Container(
            constraints: BoxConstraints(
                minHeight: SizeUtils.blockHeight * 30,
                maxHeight: SizeUtils.blockHeight * 60),
            child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [SingleChildScrollView(child: widget)])));
  });

Answer 3

Вы можете взглянуть на исходный код_ModalBottomSheetLayoutвshowModalBottomSheet:

      maxHeight: isScrollControlled
  ? constraints.maxHeight
  : constraints.maxHeight * 9.0 / 16.0,

The maxHeightзависит отisScrollControlledиconstraintsи по умолчанию maxHeight равен 9/16 для screenHeight.

Поэтому вы должны назначить два свойства, чтобы задать динамический maxHeight:

      showModalBottomSheet(
  isScrollControlled: true,
  constraints: BoxConstraints(maxHeight: your dynamic height),
  ...
);