从文本输入框获取数字

本课属于 Coddy Flutter 学习旅程的“让应用具有交互性”单元。第 25 课，共 34 课。

字段始终保存一个 String，即使显示的是数字：'12' 是文本，而 '12' * 7 并不等于 84。要用它进行计算，就把它转换成 int：

int.tryParse('12')    // 12
int.tryParse('hello') // null

null 表示“没有值”：'hello' 不是数字，所以没有值。结果的类型是 int?，可以是 int，也可以是 null。在计算之前，用 ?? 为它提供一个可用的值：

int age = int.tryParse(value) ?? 0;

可以把 a ?? b 理解为“a，或者当 a 为 null 时取 b”。还有一种不带“try”的 int.parse，但遇到不是数字的文本时，它会报错并停止应用，而人们输入的内容五花八门。

在手机上，keyboardType: TextInputType.number 会打开数字键盘，因此人们很少会输入字母。

挑战

中等

让输入框打开数字键盘。
在 onChanged 中，使用 int.tryParse 将文本转换为 int，如果文本不是数字，则使用 0，并将结果保存在 _age 中。
年龄为 5 时，显示 That is 35 in dog years：年龄乘以 7。

亲手试试

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _ageText = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dog Years')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              decoration: const InputDecoration(
                labelText: 'Your age',
                border: OutlineInputBorder(),
              ),
              onChanged: (String value) {
                setState(() {
                  _ageText = value;
                });
              },
            ),
            const SizedBox(height: 24),
            Text('That is ? in dog years', style: const TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}