1

我正在使用 Flutter 和 webview_flutter 包开发应用程序。

使用默认配置，我在屏幕底部得到一个白框。

在此处输入图像描述

当我把这段代码放到脚手架上时：

resizeToAvoidBottomInset: true

它消失了：

在此处输入图像描述

但在这种情况下，Webview 在打开虚拟键盘时不会自动调整大小。

在此处输入图像描述

如果我不使用“resizeToAvoidBottomInset：true”它会调整大小，但会出现第一张图片中的白框。

还有其他方法可以清除那个白框吗？

我的代码：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter/services.dart';

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  final Completer<WebViewController> _controller =
  Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([]);
    return Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: null,
      body: Builder(builder: (BuildContext context) {
        return WebView(
          userAgent: "random",
          initialUrl: 'https://www.2harf.com',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
          onPageStarted: (String url) {
            print('Page started loading: $url');
          },
          onPageFinished: (String url) {
            print('Page finished loading: $url');
          },
          gestureNavigationEnabled: false,
        );
      })
    );
  }
4

2 回答 2

0

如果您的应用不是全屏的，请使用

    SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
于 2020-04-25T11:57:54.883 回答
0

如果您有一个 FocusNode 附加到您使用的文本输入小部件，您可以收听它。保留一个本地布尔值，您将其附加到脚手架的 resizeToAvoidBottomInset 参数。现在当 FocusNode 有焦点时（这当然与键盘显示不同，但它有效）将参数设置为 true。您可以使用以下 main.dart 启动 Flutter 项目：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIOverlays([]);

  runApp(ResizeWithoutWhitespace());
}

class ResizeWithoutWhitespace extends StatefulWidget {
  @override
  _ResizeWithoutWhitespaceState createState() =>
      _ResizeWithoutWhitespaceState();
}

class _ResizeWithoutWhitespaceState extends State<ResizeWithoutWhitespace> {
  final TextEditingController _controller = TextEditingController();
  final FocusNode _focusNode = FocusNode();

  bool resizeBottom = false;

  @override
  void didChangeDependencies() {
    _focusNode.addListener(_setResizeScaffold);
    super.didChangeDependencies();
  }

  void _setResizeScaffold() {
    setState(() {
      resizeBottom = _focusNode.hasFocus;
    });
  }

  @override
  void dispose() {
    _focusNode.removeListener(_setResizeScaffold);
    _focusNode?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _focusNode.unfocus();
      },
      child: Scaffold(
        resizeToAvoidBottomInset: resizeBottom,
        body: Column(
          children: <Widget>[
            Expanded(
              child: Container(
                margin: EdgeInsets.symmetric(vertical: 32),
                child: Text(
                  'Resize Without Whitespace',
                  textScaleFactor: 1.6,
                ),
              ),
            ),
            TextField(
              focusNode: _focusNode,
              textAlign: TextAlign.center,
              autofocus: false,
              controller: _controller,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                enabledBorder: OutlineInputBorder(),
              ),
            ),
            Container(
              width: double.maxFinite,
              color: Colors.blue,
              padding: EdgeInsets.symmetric(vertical: 32),
              child: RaisedButton(
                child: Text('Button'),
                onPressed: () {
                  print('button pressed');
                  _focusNode.unfocus();
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

本例中的 GestureDetector Widget 确保 FocusNode 失去焦点。对于使用 onTap 的每个其他小部件，您还需要以编程方式取消 FocusNode 的焦点。

这并不完美。用户仍然可以在不点击应用程序的情况下关闭键盘，然后 FocusNode 不会失去焦点。所以你需要使用像https://pub.dev/packages/flutter_keyboard_visibility这样的包来监听它。当然，如果该包运行良好，您可能不再需要收听 FocusNode，这将使这更容易。

实际上，这一切都应该是不必要的，因为 Flutter 团队必须解决这个问题（https://github.com/flutter/flutter/issues/23913）

于 2020-07-24T10:44:15.633 回答