Question

我使用showRoundedModalBottomSheet，如何将这种模式高度调整到应用栏以下？

Answer 1

对我有用的是返回包装在DraggableScrollableSheet中的模式内容：

result = pytesseract.image_to_string(img, lang='eng')
arr = result.split('\n')[0:-1]
result = '\n'.join(arr)

Answer 2

您可以通过使用 FractionallySizedBox 并将 isScrollControlled 设置为 true 来控制高度。

showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (context) {
      return FractionallySizedBox(
        heightFactor: 0.9,
        child: Container(),
      );
    });

Answer 3

您可以在flutter库中打开BottomSheet类，并更改maxHeight

来自

BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
return BoxConstraints(
  minWidth: constraints.maxWidth,
  maxWidth: constraints.maxWidth,
  minHeight: 0.0,
  maxHeight: constraints.maxHeight * 9.0 / 16.0
);}

到

BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
return BoxConstraints(
  minWidth: constraints.maxWidth,
  maxWidth: constraints.maxWidth,
  minHeight: 0.0,
  maxHeight: constraints.maxHeight
);}

您可以使用其他名称创建一个新类，并从BottomSheet类复制源代码并更改maxHeight

Answer 4

如果用showModalBottomSheet()调用isScrollControlled: true，则对话框将占据整个高度。

要调整内容的高度，可以像平常一样继续进行操作，例如，使用Container和Wrap小部件。

示例：

final items = <Widget>[
  ListTile(
    leading: Icon(Icons.photo_camera),
    title: Text('Camera'),
    onTap: () {},
  ),
  ListTile(
    leading: Icon(Icons.photo_library),
    title: Text('Select'),
    onTap: () {},
  ),
  ListTile(
    leading: Icon(Icons.delete),
    title: Text('Delete'),
    onTap: () {},
  ),
  Divider(),
  if (true)
    ListTile(
      title: Text('Cancel'),
      onTap: () {},
    ),
];

showModalBottomSheet(
  context: context,
  builder: (BuildContext _) {
    return Container(
      child: Wrap(
        children: items,
      ),
    );
  },
  isScrollControlled: true,
);

Answer 5

您可以改为实现FullScreenDialog。

Flutter Gallery应用具有一个FullScreenDialog

的示例

您可以使用以下代码打开对话框：

Navigator.of(context).push(new MaterialPageRoute<Null>(
      builder: (BuildContext context) {
        return Dialog();
      },
    fullscreenDialog: true
  ));

也请查看此博客post，以了解更多信息：

希望它会对您有所帮助。

[更新]

如果您在master分支中，

在showModalBottomSheet(...)中设置属性isScrollControlled:true。

这将使bottomSheet达到最大高度。

要切换到master分支，可以运行以下命令：

flutter channel master

Answer 6

我猜最简单的方法是：

showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      builder: (context) => Wrap(children: [YourSheetWidget()]),
    );

Answer 7

您可以在底部工作表的定义中修改此方法。通常，它是 9.0，但正如您在此处看到的，我将其更改为 13.0。 16.0 是全屏。

@override
      BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
        return BoxConstraints(
          minWidth: constraints.maxWidth,
          maxWidth: constraints.maxWidth,
          minHeight: 0.0,
          maxHeight: isScrollControlled
            ? constraints.maxHeight
            : constraints.maxHeight * 13.0 / 16.0,
        );
      }

如何将showModalBottomSheet设置为全高

7 个答案: