flutter 如何在屏幕大小内不反弹和滚动

oxf4rvwz  于 2022-12-14  发布在  Flutter
关注(0)|答案(2)|浏览(182)

当我在iPhone上运行以下代码时,GridView会弹出。
如果GridView的内容超过iPhone屏幕大小,我希望它滚动,但如果它在iPhone屏幕大小之内,我不希望它弹跳或滚动。
如何修改下面的代码?

import 'package:flutter/material.dart';

void main() {
  runApp(const DemoPage());
}

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Demo'),
        ),
        body: GridView.count(
          crossAxisCount: 2,
          mainAxisSpacing: 8,
          crossAxisSpacing: 8,
          children: const [
            Text("A"),
            Text("B"),
          ],
        ),
      )
    );
  }
}

顺便说一句,当在Chrome中启动时,如果内容小于屏幕大小,它不会反弹,所以它可以按预期工作。我希望在iPhone应用程序上也有这种行为。

$ flutter run
Multiple devices found:
...
[1]: macOS (macos)
[2]: Chrome (chrome)
Please choose one (To quit, press "q/Q"): 2
2wnc66cl

2wnc66cl1#

当我想在不同的设备上使用不同的逻辑时,我使用responsive_builder库。
您可以使用以下代码作为问题的答案。

ScreenTypeLayout(
  // if device is mobile phone..
  mobile: GridView.count(
    physics: const NeverScrollableScrollPhysics(),
    crossAxisCount: 2,
    mainAxisSpacing: 8,
    crossAxisSpacing: 8,
    children: const [
      Text("A"),
      Text("B"),
    ],
  ),
  // if device is tablet..
  tablet: GridView.count(
    physics: const BouncingScrollPhysics(),
    crossAxisCount: 2,
    mainAxisSpacing: 8,
    crossAxisSpacing: 8,
    children: const [
      Text("A"),
      Text("B"),
    ],
  ),
);
qcbq4gxm

qcbq4gxm2#

我注意到文档physics中提到了primary
默认为匹配的平台约定。此外,如果primary为false,则用户在没有足够的内容可滚动时无法滚动,而如果primary为true,则用户始终可以尝试滚动。
而下面所提到的是primary
如果为true,则滚动视图是可滚动的,即使它没有足够的内容来实际滚动。否则,默认情况下,用户只能滚动视图,如果它有足够的内容。请参阅physics。
只需添加primary: false,

import 'package:flutter/material.dart';

void main() {
  runApp(const DemoPage());
}

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Demo'),
        ),
        body: GridView.count(
          primary: false, // 👈👈👈
          crossAxisCount: 2,
          mainAxisSpacing: 8,
          crossAxisSpacing: 8,
          children: const [
            Text("A"),
            Text("B"),
          ],
        ),
      )
    );
  }
}

但是,一旦iPhone被侧转,这使得内容尺寸大于屏幕尺寸并可滚动,然后又转回到纵向,它似乎是可滚动的(反弹)出于某种原因(我的应用程序是固定为纵向,所以目前这不是一个问题)。

相关问题