如何在横向模式下打开全屏键盘，如所附屏幕截图中的那样。
我尝试在SingleChildScrollView 中添加我的TextFields，但它不适用于对话框，并且我的TextFields 被键盘隐藏。
编辑：
我使用的是底片，TextField 在纵向模式下对焦时工作得非常好，如下面的屏幕所示：
但在横向模式下TextField 隐藏在键盘后面。
【问题讨论】：
标签： flutter keyboard flutter-layout
也许为时已晚，但它可以帮助将来的人。
基本上，这个想法是有一个正常的纵向输入字段，但是当设备旋转和键盘打开时，我们想要显示输入字段，它将占据页面上其他内容顶部的整个屏幕空间（使用 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();
}
}
}
【讨论】：
首先，创建一个显示全屏对话框的方法。
void showFullScreenKeyboard(BuildContext context,TextEditingController txtCtrl){
showDialog(context: context, builder:(context) {
return Scaffold(
body: Column(
children: [
Expanded(child: Container()),
Row(
children: [
const SizedBox(width: 10),
Expanded(
child: TextField(
decoration: const InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
),
maxLines: null,
autofocus: true,
controller: txtCtrl,
),
),
TextButton(onPressed: () {
pop(context);
}, child: const Text('Done')),
const SizedBox(width: 200),
],
)
],
)
);
},); }
然后，在所需的 TextField 小部件中实现此方法。 根据您的意愿使用文本字段的 onTap() 或 GestureDector 。
GestureDetector(
onTap: () {
showFullScreenKeyboard(context,txtCustomerFeedbacks);
},
child: textFieldContainer(TextField(
enabled: false,
controller: txtCustomerFeedbacks,
maxLines: 5,
decoration: InputDecoration(
border: InputBorder.none,
label: Text(language=='EN'?'Feedback':en2my['Feedback']!)
),
)),
),
【讨论】：