调整颤动中的底片

Question

我的应用程序中有一个底部工作表，对于 5 + 尺寸的手机可以正确显示，但是当我在较小屏幕的手机上运行时，我会得到如下所示的结果

问题在于填充跨越了范围，是否有其他方法来创建底片，并且其内容大小应该特定于设备？如何自动调整字体大小，以及根据设备特定的填充。

下面是相同的代码

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(
  mainAxisSize: MainAxisSize.min,
  child: ...
)

还尝试使用LayoutBuilder小部件包装您的内容，以访问BottomSheet大小的约束，以便您可以根据您拥有的空间设置小部件的大小。

Flutter 布局构建器

Answer 2

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

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

希望这能回答您的问题。