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

如何在横向模式下打开全屏键盘，如所附屏幕截图中所示

我尝试在

SingleChildScrollView

中添加我的

TextField

s，但对对话框无效，我的

TextFields

被键盘隐藏

编辑：

我使用的是一张底片，

TextField

在纵向模式下对焦时效果非常好，如下屏幕所示：

但在横向模式下，

TextField

隐藏在键盘后面

---

也许现在已经很晚了，但它可以帮助将来的人

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

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

以下是最终结果：

横向模式

纵向模式

类主页扩展StatefulWidget{
主页（{Key}）：超级（Key:Key）；
@凌驾
_HomePageState createState（）=>\u HomePageState（）；
}
类_HomePageState扩展状态{
var _键盘显示=错误；
var _controller=TextEditingController（）；
var_landscapeController=TextEditingController（）；
var_focusnodescape=FocusNode（）；
@凌驾
void initState（）{
var keyboardVisibilityController=keyboardVisibilityController（）；
//倾听变化
Keyboard VisibilityController.onChange.listen（（布尔可见）{
设置状态（）{
_键盘显示=可见；
});
});
super.initState（）；
}
@凌驾
无效处置（）{
_dispose（）；
_landscapeController.dispose（）；
_focusnodescape.dispose（）；
super.dispose（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
//根据方向和键盘可见性构建应用程序栏
appBar:buildAppBar（），
主体：堆栈（子对象：[
纵队(
儿童：[
扩大(
子：容器(
颜色：颜色。灰色[400]，
),
),
//纵向模式的输入字段
容器(
颜色：颜色。灰色[600]，
孩子：TextField(
控制器：\ u控制器，
onChanged:（字符串文本）{
_landscapeController.text=文本；
},
),
),
],
),
//可能的横向全屏输入
buildLandscapeFullscreenInput（）
]));
}
Widget buildAppBar（）{
if（MediaQuery.of（context）.orientation==orientation.scape&&
_键盘（如图所示）{
返回null；
}否则{
返回AppBar(
标题：文本（“横向全屏键盘PoC”），
);
}
}
Widget buildLandscapeFullscreenInput（）{
if（MediaQuery.of（context）.orientation==orientation.scape&&
_键盘（如图所示）{
//将焦点设置为横向fs输入
_focusnodescape.requestFocus（）；
返回容器(
颜色：颜色。灰色[300]，
孩子：填充(
填充：仅限边缘设置(
左:3,，
右:3,，
top:MediaQuery.of（context）.padding.top，
底部：3），
孩子：排(
儿童：[
//横向fs输入
扩大(
孩子：TextField(
控制器：_景观控制器，
onChanged:（字符串文本）{
_@controller.text=文本；
},
键盘类型：TextInputType.multiline，
maxLines:99999，
自动对焦：对，
focusNode:_focusNode景观，
),
),
//通过点击按钮，我们可以关闭键盘
键盘断开(
孩子：填充(
衬垫：
常数边集对称（水平：16，垂直：8），
子：容器(
颜色：颜色。灰色[500]，
孩子：填充(
填充：const EdgeInsets.symmetric(
水平：16，垂直：8），
子：文本(
“完成”，
),
),
),
),
)
],
),
),
);
}否则{
//联合国重点领域财政司司长投入
_focusnodescape.unfocus（）；
返回容器（）；
}
}
}

也许已经很晚了，但它可以帮助将来的人

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

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

以下是最终结果：

横向模式

纵向模式

类主页扩展StatefulWidget{
主页（{Key}）：超级（Key:Key）；
@凌驾
_HomePageState createState（）=>\u HomePageState（）；
}
类_HomePageState扩展状态{
var _键盘显示=错误；
var _controller=TextEditingController（）；
var_landscapeController=TextEditingC
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();
    }
  }
}