如何在 Flutter 中创建数字输入框? - 飞镖

在 Flutter 中创建数字输入框是一个常见的需求，本文将介绍如何在 Flutter 中创建数字输入框。

使用 TextField

在 Flutter 中，可以使用 TextField 控件来创建数字输入框。在 TextField 中，可以使用 keyboardType 属性来指定输入的键盘类型。

例如，要创建一个只允许输入数字的输入框，可以使用 keyboardType: TextInputType.number 属性：

TextField(
  decoration: InputDecoration(labelText: '请输入一个数字'),
  keyboardType: TextInputType.number,
),

然后就可以在输入框中输入数字了。

添加验证

如果需要验证用户输入的数字是否合法，可以使用 validator 属性来添加验证函数。该函数会在用户提交输入框中的值时被调用。如果返回的结果为 null，则表示数据是合法的；否则，返回的结果就是错误提示信息。

例如，下面的代码使用 validator 来验证用户输入的数字是否在 1 到 100 之间：

TextFormField(
  decoration: InputDecoration(labelText: '请输入一个数字'),
  keyboardType: TextInputType.number,
  validator: (value) {
    if (value == null || value.isEmpty) {
      return '请输入一个数字';
    }
    final n = int.tryParse(value);
    if (n == null) {
      return '请输入一个有效的数字';
    }
    if (n < 1 || n > 100) {
      return '请输入在 1 到 100 之间的数字';
    }
    return null;
  },
),

完整代码

以下是一个完整的示例代码，包括一个只允许输入数字的输入框，并添加了验证逻辑：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('数字输入框')),
        body: _buildBody(context),
      ),
    );
  }

  Widget _buildBody(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Form(
        child: Column(
          children: [
            TextFormField(
              decoration: InputDecoration(labelText: '请输入一个数字'),
              keyboardType: TextInputType.number,
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return '请输入一个数字';
                }
                final n = int.tryParse(value);
                if (n == null) {
                  return '请输入一个有效的数字';
                }
                if (n < 1 || n > 100) {
                  return '请输入在 1 到 100 之间的数字';
                }
                return null;
              },
            ),
          ],
        ),
      ),
    );
  }
}

在使用时，只需要将 _buildBody 函数返回的 Widget 插入到你的页面中即可。