flutter第九篇：实现一个打字游戏

需求是：在屏幕上半部分，有很多框慢慢从上往下降，框里面是10以内的加法题，如6+3=?。在屏幕下半部分，有1到9这9个数所组成的3行3列的虚拟键盘。交互是如果点击8，那么和为8的加法题框消失。

先做布局，在屏幕底部搞一个3*3的虚拟键盘。

3*3的表格用GridView做，单元格里放TextButton。需求：键盘的宽度跟屏幕的宽度一样，键盘的高度等于屏幕高度的1/3。

GridView生成的格子默认是正方形的，可以设置childAspectRatio来修改宽高比，如设为5/2，那么单元格将变成长方形的。

为了让GridView的高度等于元素自己的高度，需要把shrinkWrap设置为true。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Stack(
        children: [
          const Positioned(
            child: Text("2+3=?"),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: GridView.count(
              crossAxisCount: 3,
              shrinkWrap: true,
              childAspectRatio: 5 / 3,
              children: List.generate(9, (i) {
                return TextButton(
                    onPressed: () {},
                    style: ButtonStyle(
                        shape: WidgetStateProperty.all(
                          const RoundedRectangleBorder(
                              // borderRadius: BorderRadius.all(Radius.circular(10))
                              ),
                        ),
                        backgroundColor:
                            WidgetStateProperty.all(Colors.primaries[i])),
                    child: Text("${i + 1}"));
              }),
            ),
          )
        ],
      ),
    );
  }
}