Flutter:如何使web视图大小适合屏幕？
Flutter:如何使web视图大小适合屏幕？
提问于 2020-05-31 15:45:27
我是新来的，
尝试在flutter中使用web视图，但web视图的大小大于屏幕。
我想让网页大小适合手机屏幕的大小。
我怎么能做到这一点？
下面是我现在得到的信息：
我想看看：
下面是我的代码：
导入'package:flutter/material.dart'；
导入'package:flutter_webview_plugin/flutter_webview_plugin.dart'；
class CoursesInformation extends StatefulWidget {
@override
_WebViewExampleState createState() => _WebViewExampleState();
}
class _WebViewExampleState extends State<CoursesInformation> {
TextEditingController controller = TextEditingController();
FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
var urlString = "https://shoham.biu.ac.il/BiuCoursesViewer/MainPage.aspx";
launchUrl() {
setState(() {
urlString = controller.text;
flutterWebviewPlugin.reloadUrl(urlString);
flutterWebviewPlugin.launch(urlString,
rect: new Rect.fromLTWH(
0.0,
0.0,
MediaQuery.of(context).size.width,
300.0));
});
}
@override
void initState() {
super.initState();
flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged wvs) {
print(wvs.type);
});
}
@override
Widget build(BuildContext context) {
return Directionality(
textDirection: TextDirection.rtl,
child: WebviewScaffold(
appBar: AppBar(
title: Text('מידע על קורסים'),
centerTitle: true
),
url: urlString,
withZoom: true,
scrollBar: true,
withJavascript: true,
useWideViewPort: true,
withLocalStorage: true,
));
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2020-05-31 18:35:20
您可以尝试my plugin flutter_inappwebview，它是一个Flutter插件，允许您添加内联WebViews或打开应用内浏览器窗口，它有许多事件、方法和选项来控制WebViews。
在您的例子中，您可以启用DESKTOP模式(就像在Chrome等普通浏览器上一样)。通过选项preferredContentMode: UserPreferredContentMode.DESKTOP
以下是您的URL的示例：
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(new MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
InAppWebViewController webView;
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('InAppWebView Example'),
),
body: Container(
child: Column(children: <Widget>[
Expanded(
child: InAppWebView(
initialUrl:
"https://shoham.biu.ac.il/BiuCoursesViewer/MainPage.aspx",
initialHeaders: {},
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
debuggingEnabled: true,
preferredContentMode: UserPreferredContentMode.DESKTOP),
),
onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
},
onLoadStart: (InAppWebViewController controller, String url) {
},
onLoadStop: (InAppWebViewController controller, String url) async {
},
))
])),
),
);
}
}下面是截图：
Stack Overflow用户
发布于 2020-05-31 16:04:22
删除
useWideViewPort: true,请访问https://pub.dev/documentation/flutter_webview_plugin/latest/阅读更多文档
现在看起来像是
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62113082
复制相关文章
相似问题
腾讯云开发者
