Flutter 关于 h5 的问题

[yuanyu28]

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

[Belmode]

为什么不问问神奇的海螺呢

[yuanyu28]

@Belmode 不仅问了神奇海螺还问了海绵宝宝

[liu731]

RotatedBox(quarterTurns: 1,....)

[x77]

不知道你是怎么理解 Flutter 的，如果用 Flutter 设计百度界面，那么 Flutter 框架提供了丰富的响应式设计的支援，旋转啥的只是小菜一碟，怎么转都能给你布局得整整齐齐的。

如果你是 Flutter 套壳 WebView 然后用 H5 网页设计百度界面那么就得走 JS 那套来做响应式，和 Flutter 基本没关系。

[yuanyu28]

@liu731 让我如何感谢你。。

[galenjiang]

@yuanyu28 这个能铺满屏幕吗？还要自己算屏幕尺寸吧？

[Belmode]

神奇的海螺，会把所有的依赖都告诉你

要在 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 项目中进行一些配置。请确保已经按照官方文档的说明进行了正确的配置。