我是 Flutter 新手,
尝试在flutter中使用web view,但是web view的尺寸比屏幕大。
我想让网页大小适合手机屏幕大小。
我该怎么做?
这是我现在得到的:
我想看:
这是我的代码:
导入'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,
));
}
}
最佳答案
你可以试试我的插件flutter_inappwebview ,这是一个 Flutter 插件,允许您添加内联 WebViews 或打开应用内浏览器窗口,并且有很多事件、方法和选项来控制 WebViews。
在您的情况下,您可以启用 DESKTOP
通过选项 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 {
},
))
])),
),
);
}
}
这是截图:
关于Flutter:如何使 Web View 大小适合屏幕?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62113082/