【flutter】骰子游戏 |
您所在的位置：网站首页 › qq的骰子游戏图片 › 【flutter】骰子游戏 |
【flutter】骰子游戏
|
初始化界面
新建一个MaterialApp,其中有一个home:Scaffold脚手架作为整个页面。脚手架中有两个内容，其中一个为标题栏AppBar，另外一个为程序的主体body。 body中内容较多，为body单独设置一个class。 void main() { runApp( MaterialApp( home: Scaffold( backgroundColor: Colors.red, appBar: AppBar( title: Text('Dicee'), backgroundColor: Colors.red, ), body: DicePage(), ), ), ); } class DicePage extends StatelessWidget { @override Widget build(BuildContext context) { return Row(); } } 设置图片加载路径在pubspec.yaml文件中设置图片路径，只有设置之后才能在项目之中使用图片。在项目根目录下建立images文件夹。 flutter: assets: - images/ 设置语法检查忽略有一些语法检查会出现大量的波浪线，根据编辑器提示的名称配置到analysis_options.yaml文件中。 rules: prefer_const_literals_to_create_immutables: false 使用Expanded组件Expanded组件中的内容会自动尝试填充到屏幕的最大宽度。一行中可以有多个Expanded组件。 Expanded组件中的flex属性可以设置图片所占的比例。例如下面的例子中第一个图片占一份，第二个图片占两份。
TextButton是一个无边框的按钮，适合图片使用。 其中有一个必填的属性为onPressed:() {},可以指定一个匿名函数作为按钮点击时触发的函数。 void main() { runApp( MaterialApp( home: Scaffold( backgroundColor: Colors.red, appBar: AppBar( title: Text('Dicee'), backgroundColor: Colors.red, ), body: DicePage(), ), ), ); } class DicePage extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Row( children: [ Expanded( child: TextButton( onPressed: () { print('this is left button'); }, child: Image.asset('images/dice2.png'), ), ), Expanded( child: TextButton( onPressed: () { print('this is right button'); }, child: Image.asset('images/dice1.png'), ), ), ], ), ); } } 使用有状态组件有状态的组件可以更新组件的内容。无状态组件不可以更新组件的内容。 参考官方文档 复制相关内容，改为自己的类名。 class FavoriteWidget extends StatefulWidget { const FavoriteWidget({super.key}); @override State createState() => _FavoriteWidgetState(); } class _FavoriteWidgetState extends State { bool _isFavorited = true; int _favoriteCount = 41; // ··· }在自己的类中定义一个变量，在onPressed方法中更新状态。 更新状态的意思为把这个变量使用过的地方进行标记，并在下次渲染的时候更新相关的组件。 更新状态需要使用setState方法。 在图片路径中使用$变量名来更新图片。 class DicePage extends StatefulWidget { const DicePage({super.key}); @override State createState() => _DicePage(); } class _DicePage extends State { int leftDiceNumber = 5; @override Widget build(BuildContext context) { return Center( child: Row( children: [ Expanded( child: TextButton( onPressed: () { setState(() { leftDiceNumber = 1; }); }, child: Image.asset('images/dice$leftDiceNumber.png'), ), ), Expanded( child: TextButton( onPressed: () { print('this is right button'); }, child: Image.asset('images/dice1.png'), ), ), ], ), ); } } 使用随机数更新图片在images文件夹中有dice1.png-dice6.png 6张图片。 首先需要导入随机数库import ‘dart:math’; 写在main.dart文件的最顶部。 其次使用Random().nextInt(6) + 1;方法来获得一个随机数。 Random().nextInt(6)可以获得0-5之间的随机数，＋1可以获得0-6之间的随机数。 class DicePage extends StatefulWidget { const DicePage({super.key}); @override State createState() => _DicePage(); } class _DicePage extends State { int leftDiceNumber = 5; @override Widget build(BuildContext context) { return Center( child: Row( children: [ Expanded( child: TextButton( onPressed: () { setState(() { leftDiceNumber = Random().nextInt(6) + 1; }); }, child: Image.asset('images/dice$leftDiceNumber.png'), ), ), Expanded( child: TextButton( onPressed: () { print('this is right button'); }, child: Image.asset('images/dice1.png'), ), ), ], ), ); } } 同时更新两个图片点击其中一个按钮，可以随机更新左边和右边两张图片。要实现这一点可以使用一个函数，在函数里面同时更新左边的点数和右边的点数。把onPressed函数里面的内容抽出来，在类中定义一个函数。 void main() { runApp( MaterialApp( home: Scaffold( backgroundColor: Colors.red, appBar: AppBar( title: Text('Dicee'), backgroundColor: Colors.red, ), body: DicePage(), ), ), ); } class DicePage extends StatefulWidget { const DicePage({super.key}); @override State createState() => _DicePage(); } class _DicePage extends State { int leftDiceNumber = 1; int rightDiceNumber = 1; void changeDiceFace() { setState(() { leftDiceNumber = Random().nextInt(6) + 1; rightDiceNumber = Random().nextInt(6) + 1; }); } @override Widget build(BuildContext context) { return Center( child: Row( children: [ Expanded( child: TextButton( onPressed: () { changeDiceFace(); }, child: Image.asset('images/dice$leftDiceNumber.png'), ), ), Expanded( child: TextButton( onPressed: () { changeDiceFace(); }, child: Image.asset('images/dice$rightDiceNumber.png'), ), ), ], ), ); } } |
补充：Image类可以简写为一行Image.asset(‘images/dice2.png’)。
【本文地址】
今日新闻 |
推荐新闻 |