我正在尝试全屏显示我选择的图像,这在手机上绝对可以正常工作,但在平板电脑上,图像不会覆盖屏幕。我正在使用 boxFit.cover
,所以我不确定为什么它没有覆盖屏幕。
一种解决方案是使用height: double.infinity
和width: double.infinity
。然后平板电脑屏幕被覆盖。但是,如果我这样做,我必须删除我的“SingleChildScrollView”,这意味着我无法在需要时滚动更宽的图片。
这是我的代码:
@override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
child: Container(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Image(
image: NetworkImage(widget.imPath),
fit: BoxFit.cover,
),
),
),
是否有任何解决方法,以便在需要时既可以覆盖屏幕又可以滚动?
最佳答案
首先,我想指出您将无法使用当前设置进行滚动。看,你有一个小部件正好覆盖了 ScrollView 可用的区域。
我将假设您计划将其他小部件添加到 SingleChildScrollView
但图像会占据整个屏幕或可用高度。
我有两个解决方案。其中一个覆盖整个屏幕,因此更容易一点,另一个更强大,并且还考虑了填充或图像没有全屏的情况。
@override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
child: Container(
child: LayoutBuilder(
builder: (context, constraints) => SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
height: constraints.biggest.height,
child: Image(
image: NetworkImage(widget.imPath),
fit: BoxFit.cover,
),
),
),
),
),
),
);
}
在这个可能的解决方案中,我添加了一个 LayoutBuilder
在 SingleChildScrollView
之前,然后使用最大的高度限制用使用该高度的 SizedBox
包围 Image
。
仅适用于全屏场景的更简单的解决方案使用来自 MediaQuery
的高度:
@override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
child: Container(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: Image(
image: NetworkImage(widget.imPath),
fit: BoxFit.cover,
),
),
),
),
),
);
}
关于dart - 如何同时使用 ScrollView 和全尺寸图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55888989/