dart 在ModalBottomSheet中添加列小部件,显示透明视图- Flutter

zlhcx6iw  于 2023-09-28  发布在  Flutter
关注(0)|答案(4)|浏览(81)

我必须用这个小部件显示ModalBottomSheet:showModalBottomSheet
为此,我设置了ModalBottomSheet的所有必需属性,作为构建器部分,我如下所示:

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

你可以看到在Column小部件中有一个Text小部件,我在那里使用它作为ModalBottomSheet的Title。
但不幸的是,当我执行或调用showModalBottomSheet方法时,它只显示透明窗口或视图。
注意,如果没有Columnwidget和Textwidget,如果我只返回ListView作为ModalBottomSheet的构建器,它对我来说工作正常。
显示标题(列中的文本小部件)时可能会出现什么问题?

cu6pst1q

cu6pst1q1#

将shrinkWrap:true参数添加到ListView小部件,并将mainAxisSize:MainAxisSize.min添加到Column小部件,应该可以正常工作

sr4lhrrt

sr4lhrrt2#

您需要将ListViewExpanded一起 Package 在Column中,以获得可用的高度。否则,它将引起无限高度的问题。要设置背景颜色,可以使用showModalBottomSheet中的backgroundColor

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

您可以检查Unbounded height / width | Decoding FlutterShrinkWrap vs slivers

ryevplcw

ryevplcw3#

这是垂直尺寸的问题。列小部件中的ListView应该有高度问题。所以使用灵活的小部件如下:

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

ao218c7q4#

使用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();
          }),
    ],
   )
  );
}

相关问题