在 TextFormField 内,我使用以下内容来显示数字键盘,并且仅允许不带小数的数字:
keyboardType: TextInputType.numberWithOptions(decimal:false),
inputFormatters: [
FilteredTextInputFormatter.digitsOnly,
FilteredTextInputFormatter.singleLineFormatter,
]
在手机上效果很好,但是我在 10 英寸 Android 平板电脑上进行测试,我看到数字键盘位于右侧,算术运算键盘位于左侧,变得无用且不方便。
怎样才能只显示数字键盘?
在 Flutter 中,键盘的显示,包括其布局和附加面板(例如您所看到的算术运算键盘),主要由操作系统控制,并且可能会因设备而异。特别是对于 Android,数字键盘的外观可能因设备和 Android 版本而异,不幸的是,Flutter 不提供对键盘 UI 的这些方面的直接控制。
但是,您可以考虑采取几种方法来尝试管理或缓解此问题:
自定义键盘:在您的应用程序中实现自定义数字键盘。这使您可以完全控制键盘布局和功能。这实施起来可能比较复杂,但可以确保在所有设备上获得一致的用户体验。
第三方软件包:探索可能提供对键盘外观更精细的控制或提供自定义键盘解决方案的第三方软件包。例如,像 flutter_keyboard_visibility 或 Keyboard_actions 这样的包可以用来增强键盘交互,尽管它们可能无法直接解决隐藏操作面板的具体问题。
向用户反馈:如果自定义键盘解决方案不合适,并且没有第三方选项足够,请考虑提供用户指导或反馈。例如,如果由于设备的默认行为而无法避免使用操作面板,您可以指导用户如何最好地使用可用界面,或者在可行的情况下提供应用程序设置以在不同的输入法之间切换。
以下是如何开始在 Flutter 中实现简单的自定义数字键盘的基本示例,您可以根据自己的具体需求进行扩展:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(home: NumericKeyboardExample()));
}
class NumericKeyboardExample extends StatefulWidget {
@override
_NumericKeyboardExampleState createState() => _NumericKeyboardExampleState();
}
class _NumericKeyboardExampleState extends State<NumericKeyboardExample> {
String input = '';
void _handleKeyPress(String key) {
setState(() {
input += key; // Append key to the current input string
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Custom Numeric Keyboard"),
),
body: Column(
children: [
Expanded(
child: Container(
alignment: Alignment.centerRight,
padding: EdgeInsets.all(20),
child: Text(input, style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
),
),
GridView.count(
shrinkWrap: true,
crossAxisCount: 3,
childAspectRatio: 2,
padding: EdgeInsets.all(20),
children: List.generate(9, (index) {
return ElevatedButton(
onPressed: () => _handleKeyPress('${index + 1}'),
child: Text('${index + 1}', style: TextStyle(fontSize: 20)),
);
})
..add(
ElevatedButton(
onPressed: () => setState(() {
input = input.substring(0, input.length - 1); // Implement backspace
}),
child: Icon(Icons.backspace),
),
)
..add(
ElevatedButton(
onPressed: () => _handleKeyPress('0'),
child: Text('0', style: TextStyle(fontSize: 20)),
),
)
..add(
ElevatedButton(
onPressed: () => setState(() {
input = ''; // Clear input
}),
child: Icon(Icons.clear),
),
),
),
],
),
);
}
}