如何在Flutter中将底部片材的最大高度设置为屏幕高度的2/3

mtb9vblg 于 2023-10-22 发布在 Flutter

关注(0)|答案(3)|浏览(192)

我目前正在尝试做一个底部表如下：

Container(
  child: TextButton(
    onPressed: () {
      showModalBottomSheet(
        context: context,
        builder: (context) {
          return LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              double maxHeight = (2 / 3) * MediaQuery.of(context).size.height;
              return Container(
                height: constraints.maxHeight > maxHeight
                    ? maxHeight
                    : constraints.maxHeight,
                child: _BottomSheetWidget(),
              );
            },
          );
        },
        isScrollControlled: true, // Ensures the sheet is fully visible on smaller screens
      );
    },
    child: Text('Open Bottom Sheet'),
  ),
)

下面是我的底部工作表小部件：

class _BottomSheetWidget extends StatelessWidget {
    const _BottomSheetWidget();

    @override
    Widget build(BuildContext context) {
        return SafeArea(
            child: SingleChildScrollView(
                child: Column(
                    [
                        // ...Some dynamic content 
                    ]
                )
            )
        )
    }
}

我目前做的是让底部工作表总是有2 / 3的屏幕宽度（即使内容高度小于屏幕尺寸的2 / 3，因此总是在底部工作表中创建一个空部分）。
列内容是动态的（基于获取的计数数据）。我想底部的工作表高度，以适合的内容，如果内容的高度是小于2 / 3的屏幕大小。但是如果内容高度超过屏幕尺寸的2 / 3，我希望底部工作表高度是屏幕尺寸的2 / 3，因此底部工作表是可滚动的。那该怎么做呢？

flutter

来源：https://stackoverflow.com/questions/77285219/how-to-set-maximum-height-of-a-bottom-sheet-as-2-3-of-screen-height-in-flutter

3条答案

按热度按时间

5fjcxozz1#

Container(
  child: TextButton(
    onPressed: () {
      showModalBottomSheet(
        context: context,
        builder: (context) {
          return ConstrainedBox(
                      constraints:  BoxConstraints(
                        maxHeight: (2 / 3) * MediaQuery.of(context).size.height,
                      ),
                child: _BottomSheetWidget(),
              );
            },
          );
        },
      );
    },
    child: Text('Open Bottom Sheet'),
  ),
)

赞(0）回复(0）举报 2023-10-22

ttvkxqim2#

你可以用SizedBox Package 你的Modal，而不是使用LayoutBuilder

showModalBottomSheet(
    context: context,
    builder: (context) {
      return SizedBox(
        height: (2 / 3) * MediaQuery.of(context).size.height,
        child: _BottomSheetWidget(),
      );
    },
    isScrollControlled: true, // Ensures the sheet is fully visible on smaller screens
  );

不要使用SingleChildScrollView作为BottomSheetWidget中的父项，因为SingleChildScrollView的高度将调整其子项的高度。你可以像这样把它移到柱子里

SafeArea(
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        /// Bottom Sheet Header or NULL
        Expanded(
          child: SingleChildScrollView(
            child: /// list widgets,
          ),
        ),
        /// Bottom Sheet Footer or NULL
      ],
    ),
  ),

赞(0）回复(0）举报 2023-10-22

xe55xuns3#

你已经接近你想要的输出了。只需添加width: double.infinity

Container(
    child: TextButton(
      onPressed: () {
        showModalBottomSheet(
          context: context,
          builder: (context) {
            return LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) {
                double maxHeight =
                    (2 / 3) * MediaQuery.of(context).size.height;
                return SizedBox(
                  height: constraints.maxHeight > maxHeight
                      ? maxHeight
                      : constraints.maxHeight,
                  // Add this line to limit the width of the bottom sheet
                  width: double.infinity,
                  child: _BottomSheetWidget(),
                  
                );
              },
            );
          },
          isScrollControlled: true,
             
        );
      },
      child: Text('Open Bottom Sheet'),
    ),
  ),

赞(0）回复(0）举报 2023-10-22

我来回答

如何在Flutter中将底部片材的最大高度设置为屏幕高度的2/3

3条答案

相关问题

热门标签

最新问答