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

 

posted on 2024-11-01 10:17  koushr  阅读(12)  评论(0编辑  收藏  举报

导航