Question

如何在横向模式下打开全屏键盘，如所附屏幕快照中的键盘一样。

我尝试在TextField中添加SingleChildScrollView，但是对对话框不起作用，并且TextFields被键盘隐藏了。

编辑：

我使用的是底页纸，TextField在纵向模式下聚焦时效果很好，如下图所示：

但在横向模式TextField中隐藏在键盘后面。

Answer 1

也许为时已晚，但它可以帮助将来的某个人。

基本上，这个想法是有正常的纵向输入字段，但是当设备旋转并打开键盘时，我们希望显示输入字段，这将占据页面上其他内容顶部的整个屏幕空间（使用 Stack为了那个原因）。所以实际上有两个输入字段是同步的。此外，在横向上，我们不想显示应用栏，因为它占用大量空间。

为了检测键盘是否打开，我使用了 flutter_keyboard_visibility 插件。

最终结果如下：

横向模式

人像模式

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var _keyboardShown = false;
  var _portraitController = TextEditingController();
  var _landscapeController = TextEditingController();

  var _focusNodeLandscape = FocusNode();

  @override
  void initState() {
    var keyboardVisibilityController = KeyboardVisibilityController();

    // Listen for changes
    keyboardVisibilityController.onChange.listen((bool visible) {
      setState(() {
        _keyboardShown = visible;
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    _portraitController.dispose();
    _landscapeController.dispose();
    _focusNodeLandscape.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // Build app bar according to orientation and keyboard visibility
        appBar: buildAppBar(),
        body: Stack(children: [
          Column(
            children: [
              Expanded(
                child: Container(
                  color: Colors.grey[400],
                ),
              ),
              // Input field for portrait mode
              Container(
                color: Colors.grey[600],
                child: TextField(
                  controller: _portraitController,
                  onChanged: (String text) {
                    _landscapeController.text = text;
                  },
                ),
              ),
            ],
          ),
          // Possible landscape fullscreen input
          buildLandscapeFullscreenInput()
        ]));
  }

  Widget buildAppBar() {
    if (MediaQuery.of(context).orientation == Orientation.landscape &&
        _keyboardShown) {
      return null;
    } else {
      return AppBar(
        title: Text("Landscape fullscreen keyboard PoC"),
      );
    }
  }

  Widget buildLandscapeFullscreenInput() {
    if (MediaQuery.of(context).orientation == Orientation.landscape &&
        _keyboardShown) {
      // set focus to landscape fs input
      _focusNodeLandscape.requestFocus();

      return Container(
        color: Colors.grey[300],
        child: Padding(
          padding: EdgeInsets.only(
              left: 3,
              right: 3,
              top: MediaQuery.of(context).padding.top,
              bottom: 3),
          child: Row(
            children: [
              // landscape fs input
              Expanded(
                child: TextField(
                  controller: _landscapeController,
                  onChanged: (String text) {
                    _portraitController.text = text;
                  },
                  keyboardType: TextInputType.multiline,
                  maxLines: 99999,
                  autofocus: true,
                  focusNode: _focusNodeLandscape,
                ),
              ),
              // by clicking on button we dismiss keyboard
              KeyboardDismissOnTap(
                child: Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                  child: Container(
                    color: Colors.grey[500],
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 16, vertical: 8),
                      child: Text(
                        "Done",
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      );
    } else {
      // un focus landscape fs input
      _focusNodeLandscape.unfocus();
      return Container();
    }
  }
}

Flutter-如何在横向模式下打开全屏键盘

1 个答案: