需要限制屏幕的宽度,但保持整个屏幕在Flutter网络应用程序可滚动

ssm49v7z  于 2023-05-29  发布在  Flutter
关注(0)|答案(1)|浏览(209)

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,但经过几个小时的尝试,我没有找到解决方案。我还研究了“响应框架”包,但它仍然只滚动部分内容,而不是整个屏幕。如果有人知道如何解决这个典型的问题,请,帮助!

vyu0f0g1

vyu0f0g11#

在web中可以听到整个屏幕滚动,如下所示:

document.onMouseWheel.listen((event) {
  event.deltaY; // scroll offset
});

所以我们可以得到滚动偏移量,把它放在一些流中,从包含ListView/GridView等的小部件中获取,在ScrollController中计算偏移量并使用ScrollController的jumpTo()方法。但问题是,给定的触控板从onMouseWheel偏移很小。因此,在尝试了几个小时不同的方法(比如Listener小部件和一些库)之后,我决定停止把头撞向墙壁,重新设计我的应用程序。我希望有一天这样的任务能轻松解决

相关问题