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