在 ModalBottomSheet 中添加显示透明视图的 Column 小部件 - Flutter

Question

我必须使用此小部件显示 ModalBottomSheet ： showModalBottomSheet

为此，我设置了 ModalBottomSheet 的所有必需属性，并且作为构建器部分，我按如下方式进行操作：

builder: (_) {
      return Column(
        children: [
          Text("Sample "),
          ListView.builder(
              itemCount: 2,
              itemBuilder: (BuildContext context, int index) {
                return NagarTiming();
              }),
        ],
      );
    }

您可以看到 Column 小部件内有一个 Text 小部件，我在那里将其视为我的 ModalBottomSheet 的标题。

但不幸的是，当我执行或调用 showModalBottomSheet 方法时，它只向我显示透明窗口或视图。

请注意，如果没有 Column 小部件和 Text 小部件，如果我仅返回 ListView 作为 ModalBottomSheet 的构建器，它对我来说工作正常。

显示标题（列小部件中的文本）可能存在什么问题？

Answer 1

将shrinkWrap:true参数添加到ListView小部件并将mainAxisSize:MainAxisSize.min添加到您的Column小部件 应该可以正常使用

Answer 2

您需要将

ListView

与

Expanded

包裹在 Column 内以获得可用高度。否则，会引发高度无界的问题。要设置背景颜色，您可以使用

backgroundColor

中的

showModalBottomSheet

。

showModalBottomSheet(
    context: context,
    backgroundColor: Colors.green,
    builder: (_) {
      return Column(
        children: [
          Text("Sample "),
          Expanded(
            child: ListView.builder(

您可以检查无限高度/宽度|解码 Flutter 和 ShrinkWrap 与 slivers

Answer 3

这是垂直尺寸的问题。 Column 小部件内的 ListView 应该考虑高度。所以使用灵活的小部件如下：

builder: (_) {
      return Column(
        children: [
          Text("Sample "),
          Flexible(
          child: ListView.builder(
              itemCount: 2,
              itemBuilder: (BuildContext context, int index) {
                return NagarTiming();
              }),
          ),
        ],
      );
    }

Answer 4

用sizedbox包裹并指定宽度double.infinity

builder: (_) {
  return SizedBox(
       width:double.infinity 
      child: Column(
    children: [
      Text("Sample "),
      ListView.builder(
          itemCount: 2,
          itemBuilder: (BuildContext context, int index) {
            return NagarTiming();
          }),
    ],
   )
  );
}