在颤动中调整底片

Question

我的应用程序中有一个底部 sheet，对于尺寸为 5 + 的 phone，它显示正确，但是当我运行在较小的屏幕上 phones 我越来越喜欢下面

问题出在填充超出范围时，是否有其他方法可以创建底部sheet，并且其内容大小应该特定于设备？如何自动调整字体大小，以及基于设备特定的填充。

下面是相同的代码

showModalBottomSheet<void>(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        context: context,
        isScrollControlled: true,
        builder: (BuildContext context) {
          return FractionallySizedBox(
              heightFactor: 0.2,
              child: Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 22.0,
                    vertical: 14.0,
                  ),
                  child: Column(
                    children: <Widget>[
                      ListTile(
                          leading: Icon(Icons.remove_red_eye),
                          title: Text(
                            "View",
                            overflow: TextOverflow.ellipsis,
                            textAlign: TextAlign.justify,
                            maxLines: 1,
                            style: TextStyle(
                              fontSize:
                                  ScreenUtil(allowFontScaling: true).setSp(50),
                            ),
                          ),
                          onTap: () {
                            Navigator.of(context).pop();
                            setGenerateReportView(context, count, data);
                          }),
                      ListTile(
                          leading: Icon(Icons.file_download),
                          title: Text(
                            "Download",
                            overflow: TextOverflow.ellipsis,
                            textAlign: TextAlign.justify,
                            maxLines: 1,
                            style: TextStyle(
                              fontSize:
                                  ScreenUtil(allowFontScaling: true).setSp(50),
                            ),
                          ),
                          onTap: () => {
                                Toast.show("Downloading", context,
                                    duration: Toast.LENGTH_LONG,
                                    gravity: Toast.BOTTOM),
                                Navigator.of(context).pop()
                              }),
                    ],
                  )));
        });

谢谢。

Answer 1

Column 小部件默认扩展到最大垂直 space。因此，不要使用 Column，而是使用 Wrap 小部件，它会根据屏幕上的 space 调整其子项。下面分别在屏幕尺寸 < 5 和 > 5 的模拟器上运行代码：

child:
                  Wrap(
                    children: <Widget>[
                      ListTile(
                          leading: Icon(Icons.remove_red_eye),
                          title: Text(
                                      ....

希望这能回答您的问题。

Answer 2

首先为您的列使用此属性：

Column(
  mainAxisSize: MainAxisSize.min,
  child: ...
)

同时尝试使用 LayoutBuilder 小部件包装您的内容，以访问 BottomSheet 大小的约束，因此您可以设置基于您拥有的 space 的小部件。

Flutter LayoutBuilder

在颤动中调整底片

adjusting bottomsheet in flutter

flutter

bottom-sheet