从侧面而不是屏幕底部输入飞镖编号字段（用于横向）

Posted 2023-02-23

【中文标题】从侧面而不是屏幕底部输入飞镖编号字段（用于横向）

【英文标题】：Dart number field entry from side instead of bottom of screen (for landscape)

【发布时间】：2019-01-08 08:14:21

【问题描述】：

我正在尝试为横向视图中的应用进行 pin 登录。 我正在使用 Dart/flutter，但无法弄清楚如何重新定位 textinput 键盘。

是否可以使用类似的东西，但强制键盘位于文本字段的 NEXT 而不是文本字段的下方？ How to create number input field in Flutter?

【参考方案1】：

键盘的位置和形状完全因设备而异。甚至还有浮动或分体键盘，无法修改系统键盘的位置。

我建议你在 Flutter 中构建一个“假”数字键盘小部件。这将使您完全控制键盘的位置和大小，以及显示的数字。对于简单的 PIN 输入，您甚至不需要将其连接到真正的 TextField，这让事情变得更加容易。

这是一个非常基本的例子：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyLoginPage(),
    );
  


class MyLoginPage extends StatefulWidget 
  @override
  State<StatefulWidget> createState() => MyLoginPageState();


class MyLoginPageState extends State<MyLoginPage> 
  String _pin = '';

  void _onKeyPressed(int key) 
    if (key == NumericalKeyboard.backspaceKey) 
      if (_pin.length > 0) 
        setState(() 
          _pin = _pin.substring(0, _pin.length - 1);
        );
      
     else 
      setState(() 
        _pin += key.toString();
      );
    
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('LOGIN'),
      ),
      body: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(child: _buildPage()),
          NumericalKeyboard(
            onKeyPressed: _onKeyPressed,
          )
        ],
      ),
    );
  

  Widget _buildPage() 
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Center(
        child: Container(
          decoration: BoxDecoration(border: Border.all()),
          width: 150.0,
          padding: EdgeInsets.all(4.0),
          child: Text(
            _pin,
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 32.0, letterSpacing: 2.0),
          ),
        ),
      ),
    );
  


typedef KeyboardCallback(int key);

class NumericalKeyboard extends StatelessWidget 
  const NumericalKeyboard(Key key, this.onKeyPressed) : super(key: key);

  static const backspaceKey = 42;
  static const clearKey = 69;

  final KeyboardCallback onKeyPressed;

  @override
  Widget build(BuildContext context) 
    return Material(
      color: Colors.grey[200],
      child: Table(
        defaultColumnWidth: IntrinsicColumnWidth(flex: 1.0),
        border: TableBorder.all(),
        children: [
          TableRow(
            children: [
              _buildNumberKey(1),
              _buildNumberKey(2),
              _buildNumberKey(3),
            ],
          ),
          TableRow(
            children: [
              _buildNumberKey(4),
              _buildNumberKey(5),
              _buildNumberKey(6),
            ],
          ),
          TableRow(
            children: [
              _buildNumberKey(7),
              _buildNumberKey(8),
              _buildNumberKey(9),
            ],
          ),
          TableRow(
            children: [
              Container(),
              _buildNumberKey(0),
              _buildKey(Icon(Icons.backspace), backspaceKey),
            ],
          )
        ],
      ),
    );
  

  Widget _buildNumberKey(int n) 
    return _buildKey(Text('$n'), n);
  

  Widget _buildKey(Widget icon, int key) 
    return IconButton(
      icon: icon,
      padding: EdgeInsets.all(16.0),
      onPressed: () => onKeyPressed(key),
    );
  

【讨论】：

我担心这就是答案。感谢您确认并举例说明如何更改它。