V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yuanyu28
V2EX  ›  程序员

Flutter 关于 h5 的问题

  •  
  •   yuanyu28 · 2023-07-13 16:23:50 +08:00 · 1161 次点击
    这是一个创建于 506 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如百度界面,我加载出百度然后旋转 90°铺满屏幕,要怎么实现,研究了一下午没什么头绪

    7 条回复    2023-07-13 17:03:11 +08:00
    Belmode
        1
    Belmode  
       2023-07-13 16:28:25 +08:00
    为什么不问问神奇的海螺呢
    yuanyu28
        2
    yuanyu28  
    OP
       2023-07-13 16:38:47 +08:00
    @Belmode 不仅问了神奇海螺还问了海绵宝宝
    liu731
        3
    liu731  
       2023-07-13 16:40:23 +08:00   ❤️ 1
    RotatedBox(quarterTurns: 1,....)
    x77
        4
    x77  
       2023-07-13 16:46:19 +08:00
    不知道你是怎么理解 Flutter 的,如果用 Flutter 设计百度界面,那么 Flutter 框架提供了丰富的响应式设计的支援,旋转啥的只是小菜一碟,怎么转都能给你布局得整整齐齐的。

    如果你是 Flutter 套壳 WebView 然后用 H5 网页设计百度界面那么就得走 JS 那套来做响应式,和 Flutter 基本没关系。
    yuanyu28
        5
    yuanyu28  
    OP
       2023-07-13 16:51:55 +08:00
    @liu731 让我如何感谢你。。
    galenjiang
        6
    galenjiang  
       2023-07-13 17:01:02 +08:00
    @yuanyu28 这个能铺满屏幕吗?还要自己算屏幕尺寸吧?
    Belmode
        7
    Belmode  
       2023-07-13 17:03:11 +08:00
    神奇的海螺,会把所有的依赖都告诉你

    要在 Flutter 中实现加载百度页面并旋转 90°以铺满屏幕,可以使用 Flutter 的 Webview 插件。下面是一个示例代码,演示如何实现这个需求:

    首先,确保已在项目的 pubspec.yaml 文件中添加了 webview_flutter 依赖:

    yaml
    dependencies:
    flutter:
    sdk: flutter
    webview_flutter: ^2.0.0
    然后,在你的 Flutter 页面中导入 Webview 插件:

    dart
    import 'package:webview_flutter/webview_flutter.dart';
    在你的页面组件类中,添加一个旋转状态变量和一个 Webview 控制器变量:

    dart
    bool isRotated = false;
    WebViewController? _webViewController;
    在页面的构建方法中,创建一个 Webview 组件,并用一个 Container 包装它作为容器:

    dart
    Container(
    width: isRotated ? MediaQuery.of(context).size.height : MediaQuery.of(context).size.width,
    height: isRotated ? MediaQuery.of(context).size.width : MediaQuery.of(context).size.height,
    child: RotatedBox(
    quarterTurns: isRotated ? 1 : 0,
    child: WebView(
    initialUrl: 'https://www.baidu.com', // 加载百度页面
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (controller) {
    _webViewController = controller; // 保存 Webview 控制器
    },
    ),
    ),
    ),
    最后,在需要的时候调用旋转方法来切换旋转状态:

    dart
    void rotateScreen() {
    setState(() {
    isRotated = !isRotated;
    });
    }
    以上代码将会创建一个在屏幕上加载百度页面的 Webview ,并根据 isRotated 变量的值来决定是否旋转 90°。你可以在需要的时候调用 rotateScreen() 方法来切换旋转状态。

    注意:为了使用 WebView 插件,需要在 Android 和 iOS 项目中进行一些配置。请确保已经按照官方文档的说明进行了正确的配置。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2602 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 18ms · UTC 04:09 · PVG 12:09 · LAX 20:09 · JFK 23:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.