Flutter 关于 h5 的问题

303 天前
 yuanyu28

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

990 次点击
所在节点    程序员
7 条回复
Belmode
303 天前
为什么不问问神奇的海螺呢
yuanyu28
302 天前
@Belmode 不仅问了神奇海螺还问了海绵宝宝
liu731
302 天前
RotatedBox(quarterTurns: 1,....)
x77
302 天前
不知道你是怎么理解 Flutter 的,如果用 Flutter 设计百度界面,那么 Flutter 框架提供了丰富的响应式设计的支援,旋转啥的只是小菜一碟,怎么转都能给你布局得整整齐齐的。

如果你是 Flutter 套壳 WebView 然后用 H5 网页设计百度界面那么就得走 JS 那套来做响应式,和 Flutter 基本没关系。
yuanyu28
302 天前
@liu731 让我如何感谢你。。
galenjiang
302 天前
@yuanyu28 这个能铺满屏幕吗?还要自己算屏幕尺寸吧?
Belmode
302 天前
神奇的海螺,会把所有的依赖都告诉你

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/956505

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX