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

Question

我试图使一个在景观视图中的应用程序的引脚登录。我正在使用Dart/flutter，无法找出如何重新定位文本输入键盘。

是否可以使用类似的方式，但强制键盘位于文本字段旁边而不是文本字段下面？如何在颤振中创建数字输入字段？

Answer 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),
    );
  }
}