Flutter Web:URL栏不隐藏在滚动条上

Question

我有一个Flutter网络应用程序，它包含一个SingleChildScrollView和其中的许多元素。当在我的iPhone Safari上查看时，URL和底部栏不会像在任何其他网站上那样向下滚动时隐藏。

我尝试了很多方法，包括使用不同的元素，如ListViews和玩物理游戏，但URL和底部栏仍然没有被忽略。

有什么想法我可以配置一个网页颤振应用程序来帮助浏览器识别滚动并消除它们吗？

Answer 1

在GitHub中查看此线程：Flutter for Web不会在iOS的Safari 中隐藏滚动的url栏和导航栏

信贷：jamesblasco

您可以将其添加到任何flutter项目的index.hml文件中，并在那里尝试。

<style>
body {
height: 500vh !important;  /* Bigger than 100% to allow scroll */
position: static !important;  /* Override absolute from flutter */
overflow-y: scroll !important; /* Allows verticall scrolling */
overflow-x: hidden !important;
touch-action: pan-y !important;  /* Allows vertical scrolling */
overscroll-behavior: none; /* Avoid bouncing scrolling on top/bottom edget */
}
/* Centers flutter canvas with a size of the viewport*/
flt-glass-pane {
position: fixed !important; /* Overrides absolute from flutter  */
top: 50vh  !important;
left: 50vw  !important;
max-width: 100vw  !important;
max-height: 100vh  !important;
transform: translate(-50vw, -50vh)  !important;
}
/* 
Scrollbar hide doesn't work on iOS, they add a default one when overflow:true and  -webkit-overflow-scrolling: touch; 
Sadly since iOS 13, this value is forced on iOS -> https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes
*/
::-webkit-scrollbar {
display: false;
width: 0px;
height: 0px;  /* Remove scrollbar space */
background: transparent;  /* Optional: just make scrollbar invisible */
}
</style>