不使用resizeToAvoidBottomInset清除白盒:false [英] Clearing whitebox without using resizeToAvoidBottomInset: false

问题描述

我正在使用Flutter和webview_flutter软件包开发应用程序.

I'm developing application with Flutter and webview_flutter package.

在默认配置下，我在屏幕底部 处出现一个白框.

With default configuration I'm getting a white box at bottom of screen.

当我将此代码放到Scaffold上时:

When I put this code to Scaffold:

resizeToAvoidBottomInset: true

它消失了:

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

But in that case Webview not auto resizing when virtual keyboard openned.

如果我不使用"resizeToAvoidBottomInset:true"，它将调整大小，但在第一张图片中出现白框.

If i don't use "resizeToAvoidBottomInset: true" it resizing but white box in the first picture appears.

还有另一种清除白框的方法吗?

Is there an another way to clear that white box?

我的代码:

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,
        );
      })
    );
  }

推荐答案

如果在使用的文本输入小部件上附加了FocusNode，则可以收听它.保留一个附加到支架的resizeToAvoidBottomInset参数的本地布尔值.现在，当FocusNode具有焦点时(这当然与显示的键盘不同，但是可以工作)，将参数设置为true. 您可以使用以下main.dart启动Flutter项目:

If you have a FocusNode attached to the text input widget you use, you can listen to it. Keep a local boolean which you attach to the resizeToAvoidBottomInset parameter of the scaffold. And now when the FocusNode has focus (this is of course not the same as the keyboard showing, but it works) set the parameter to true. You can start a Flutter project with the following main.dart:

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小部件可确保FocusNode失去焦点.对于使用onTap的所有其他小部件，您还需要以编程方式使FocusNode失去焦点.

The GestureDetector Widget in this example makes sure the FocusNode loses focus. And for every other widget that consumes an onTap you also need to programmatically unfocus the FocusNode.

这不是完美的.用户仍然可以在不点击应用程序的情况下关闭键盘，然后FocusNode不会失去焦点.因此，您需要使用 https://pub.dev/packages/flutter_keyboard_visibility 之类的包来收听为了那个原因.当然，如果该程序包运行良好，则您可能不再需要收听FocusNode，这将使此操作变得更容易.

It's not perfect. The user can still dismiss the keyboard without tapping in the app and then the FocusNode doesn't lose focus. So you need to use a package like https://pub.dev/packages/flutter_keyboard_visibility to also listen for that. Of course if that package works well enough you might not need to listen to the FocusNode anymore which will make this easier.

实际上，这一切都没有必要，因为Flutter团队必须解决此问题 ( https://github.com/flutter/flutter/issues/23913 )

In reality this should all be unnecessary as the Flutter team has to fix this issue (https://github.com/flutter/flutter/issues/23913)

这篇关于不使用resizeToAvoidBottomInset清除白盒:false的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！