代码之家 › 专栏 › 技术社区 › Mena

如何仅在移动浏览器上为Flutter网络应用程序启用缩放+滚动?

flutter

Mena · 技术社区 · 2 年前

我已经建立并发布了一个Flutter网络应用程序,并在桌面和桌面上进行了测试;移动浏览器。由于屏幕尺寸较小,在移动浏览器上访问该应用程序时,其设计显得更小,我正试图像所有其他流行网站一样,使用捏2个手指的手势进行缩放。

我尝试过使用许多插件,包括:(所有插件都支持Web和移动平台)

但是,问题是,当我作为应用程序在移动设备上运行时,缩放效果很好,但当我在桌面浏览器上运行时会出现错误。鼠标现在滚动进行缩放,我无法再向下滚动页面。

import 'package:flutter/material.dart';
import 'package:pinch_to_zoom_scrollable/pinch_to_zoom_scrollable.dart';
import 'package:flutter/foundation.dart' show kIsWeb;

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child:kIsWeb?content():PinchToZoomScrollableWidget(child: content())
      ),
    );
  }

  Widget content(){
    return Column(
        children: [
          Container(color:)
         Container(color: Colors.green,width: 100,height: 100,),
         Container(color: Colors.green,width: 100,height: 100,),
         Container(color: Colors.green,width: 100,height: 100,),
         Container(color: Colors.green,width: 100,height: 100,),
         Container(color: Colors.green,width: 100,height: 100,),
         Container(color: Colors.green,width: 100,height: 100,),
         Container(color: Colors.green,width: 100,height: 100,),
          const SizedBox(
            height: 16,
          )
        ],
    );
  }

如何在移动浏览器上查看时只添加缩放功能,而不扰乱其他平台?为什么Flutter默认情况下不支持这种正常行为?

1 回复 | 直到 2 年前

Mena 2 年前

我能够使用两个插件的组合找到一个变通解决方案:

这样,我只在移动浏览器中访问网络应用程序时激活缩放功能。

注意:以下代码质量和结构仅用于演示目的,不应在实际应用中使用。发展

import 'package:flutter/material.dart';
import 'package:pinch_to_zoom_scrollable/pinch_to_zoom_scrollable.dart';
import 'package:platform_detector/platform_detector.dart';

class _MyHomePageState extends State<MyHomePage> {
  int myFlag = 0;

  @override
  void initState() {
    if (isAndroidOs() || isIOS()) {
      myFlag = 1;
    } else {
      if (isAndroidApp()) {
        myFlag = 2;
      } else {
        if (isWindowsWeb() || isLinuxWeb() || isMacOsWeb()) {
          myFlag = 4;
        }
      }
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return myFlag == 0
        ? PinchToZoomScrollableWidget(
            child: content(),
            resetDuration: Duration(minutes: 5),
          )
        : content();
  }

  Widget content() {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
          child: Column(
        children: [
          Container(color: Colors.green,width: 100,height: 100,),
          Container(color: Colors.green,width: 100,height: 100,),
          Container(color: Colors.green,width: 100,height: 100,),
          Container(color: Colors.green,width: 100,height: 100,),
          Container(color: Colors.green,width: 100,height: 100,),
          Container(color: Colors.green,width: 100,height: 100,),
          Container(color: Colors.green,width: 100,height: 100,),
          const SizedBox(
            height: 16,
          )
        ],
      )),
    );
  }