bounty将在5天内到期。回答此问题可获得+100声望奖励。Mr Mister希望引起更多关注这个问题。
我正在做一个Flutter网络应用程序,并希望限制屏幕的宽度,但在同一时间保持整个屏幕滚动一样,它在twitter网站。
我使用主Scaffold来确定是显示bottomAppBar还是导航栏。在脚手架主体内,我将内部脚手架包裹在ContrainedBox(最大宽度:650)所以我限制了内容的宽度。问题是滚动条是附加到内部脚手架,但不是屏幕。下面是最小代表代码。
class MinimalHomeScreen extends StatelessWidget {
const MinimalHomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
final bool isMobile = constraints.maxWidth <= 600;
return Scaffold(
// show bottom bar if width is small
bottomNavigationBar: isMobile
? BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home)),
BottomNavigationBarItem(icon: Icon(Icons.search)),
],
)
: null,
// The content is centered and its maxWidth is 650
body: Center(
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: 650),
child: Row(
children: [
// show navigation rail if width is not small
if (!isMobile)
NavigationRail(
destinations: [
NavigationRailDestination(icon: Icon(Icons.home), label: Text('Home')),
NavigationRailDestination(icon: Icon(Icons.search), label: Text('Search')),
],
selectedIndex: 0,
),
// show content
Expanded(
child: Scaffold(
appBar: AppBar(title: Text('Title')),
body: ListView.separated(
itemCount: 100,
itemBuilder: (_, __) {
return Container(
height: 50,
width: double.infinity,
color: Colors.green,
);
},
separatorBuilder: (_, __) {
return Divider();
},
),
),
),
],
),
),
),
);
}
);
}
}
我需要从屏幕的任何部分滚动我的内容,但我真的不知道如何做到这一点。我还需要使用内部的脚手架有像AppBar上的后退按钮的逻辑。
我想我必须使用NestedScrollView或CustomScrollView,但经过几个小时的尝试,我没有找到解决方案。我还研究了“响应框架”包,但它仍然只滚动部分内容,而不是整个屏幕。如果有人知道如何解决这个典型的问题,请,帮助!
1条答案
按热度按时间vyu0f0g11#
在web中可以听到整个屏幕滚动,如下所示:
所以我们可以得到滚动偏移量,把它放在一些流中,从包含ListView/GridView等的小部件中获取,在ScrollController中计算偏移量并使用ScrollController的jumpTo()方法。但问题是,给定的触控板从onMouseWheel偏移很小。因此,在尝试了几个小时不同的方法(比如Listener小部件和一些库)之后,我决定停止把头撞向墙壁,重新设计我的应用程序。我希望有一天这样的任务能轻松解决