溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了如何用Flutter做桌上彈球，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
首先看一下我們要實現的效果：
結合動圖演示，列出最終目標如下：
運用的主要技術點：Canvas和CustomPaint API。
運行平臺：Android、iOS
源碼地址：
Github Gitee
功能拆解
首先拆解前文中所列出的6個實現目標，顯而易見，要實現它們，我們需要：
邊界判定；
初始運動方向生成器；
定向移動位置更新器。
功能實現
接下來，我們逐步實現功能拆解中所列舉的6個具體功能。
隨機顏色生成器
隨機顏色生成器在程序啟動、單擊屏幕和自動變色中使用。在Flutter中，我們可以通過Color類對紅、綠、藍和透明度分別定義，來定義某個唯一的顏色，數值范圍是0-255。對于透明度，0表示完全透明，255表示完全不透明。
對于隨機數值，我們使用Random類生成0-255之間的隨機整數。
隨機顏色生成器則主要使用上述兩個類來實現，具體代碼片段如下：
Color _color = Color.fromARGB(0, 0, 0, 0);
// 改變小球顏色
void changeColor() {
_color = Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255),Random().nextInt(255));
}隨機位置生成器
隨機位置生成器在程序啟動時使用。要生成隨機位置，方法依然是使用Random類，但要注意隨機值范圍。通常我們需要小球出現的位置在屏幕內，因此，我們需要生成兩次隨機數，分別表示小球初始位置的x和y軸坐標。坐標值分別小于屏幕橫向尺寸和縱向尺寸。當然，它們都要大于0。
另外，我們還需要分別獲取屏幕的寬高。
因此，具體代碼實現如下：
[獲取屏幕寬高]
double screenX, screenY;
@override
Widget build(BuildContext context) {
screenX = MediaQuery.of(context).size.width;
screenY = MediaQuery.of(context).size.height;
...
}[生成隨機位置]
double _x = 0, _y = 0;
// 生成小球初始位置和大小
void generateBall() {
_x = Random().nextDouble() * screenX;
_y = Random().nextDouble() * screenY;
}隨機尺寸生成器
隨機尺寸生成器在程序啟動時使用。完成了之前兩種隨機值的生成，到了尺寸這里，就很輕車熟路了。由于隨機尺寸和隨機位置都在程序啟動時調用，且操作對象都是小球，我們將其實現都放在generateBall()方法中。最終代碼如下：
double _x = 0, _y = 0, _size = 0;
// 生成小球初始位置和大小
void generateBall() {
_size = Random().nextDouble() * (screenY - screenX).abs();
_x = Random().nextDouble() * screenX;
_y = Random().nextDouble() * screenY;
}小球繪制邏輯
要在界面上繪制小球，我們需要使用CustomPaint組件。而CustomPaint組件需要一個CustomPainter實例。小球的繪制工作主要在繼承了CustomPainter的類中。我們直接看代碼：
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class Ball extends CustomPainter {
Paint _paint;
double _x, _y, _size;
Ball(double x, double y, double size, Color color) {
_paint = new Paint();
_paint.isAntiAlias = true;
_paint.color = color;
this._x = x;
this._y = y;
this._size = size;
}
@override
void paint(Canvas canvas, Size size) {
canvas.drawOval(Rect.fromCenter(center: Offset(_x, _y), width: _size, height: _size), _paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return oldDelegate != this;
}
}通過閱讀上面的代碼，可以發現，整個Ball類除了構造方法外，只有兩個override的方法，可以說是很簡單了。
在構造方法中，我們初始化了_paint對象，它是可以看做是“畫筆”；
在paint()方法中，我們調用canvas對象的drawOval方法畫圓，表示小球。canvas可以看做是“畫板”；
shouldRepaint()方法表示在刷新布局的時是否需要重繪，只有在返回true時會發生重繪，這里我們讓程序自行判斷就可以了。
我們將上述代碼保存為ball.dart備用。
注意，這里面無論是位置、顏色還有尺寸，都沒有寫固定的值。是因為該類只負責“畫圓”，而具體畫什么樣的圓，則交給該類的使用者來定義，也就是main.dart。
在main.dart中，我們將App設置為全屏，并添加全屏尺寸的CustomPaint組件，組件內放置Ball對象。
@override
Widget build(BuildContext context) {
screenX = MediaQuery.of(context).size.width;
screenY = MediaQuery.of(context).size.height;
return Scaffold(
body: GestureDetector(
child: Container(
width: double.infinity,
height: double.infinity,
child: CustomPaint(painter: Ball(_x, _y, _size, _color))),
onTap: () {
// 改變小球顏色
changeColor();
},
onDoubleTap: () {
// 暫停/恢復移動
_keep_move = !_keep_move;
},
onLongPress: () {
// 自動改變小球顏色
_auto_change_color = !_auto_change_color;
},
));
}上述代碼中，GestureDetector組件負責接收用戶點擊事件，其中的_keep_move、_auto_change_color都是布爾類型變量，是小球移動和自動變色功能的開關。
接下來，我們在initState()方法中調用之前的隨機位置生成器、隨機尺寸生成器和隨機顏色生成器，賦值_x、_y、_size和_color。
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
generateBall();
changeColor();
calculateMoveAngle();
startMove();
});
}這里面，calculateMoveAngle()和startMove()方法分別對應初始運動方向生成器以及開始運動并定期更新UI的方法。除了這兩個方法外，如果現在運行程序的話，應該可以看到一個靜態的小球出現在屏幕上了，并且隨著每次重新運行程序，小球的樣式和位置都將發生變化。
接下來，我們就來讓小球動起來吧！
小球運動邏輯
要讓小球準確無誤地運動，我們需要遵循以下步驟：首先生成一個隨機的運動方向；然后以60FPS的頻率，每次在運動方向上前進5個像素的步長（當然，你可以自定義）；最后還要注意邊界判定，在小球到達屏幕邊緣時正確轉向。
下面我們逐個實現。
初始運動方向生成器
既然是隨機方向，那么平面上360度范圍內任何一個角度都有可能。因此，我們這里需要先生成0-360范圍內的值。然后根據三角函數和運動方向的速度，計算出橫、縱坐標的速度。其實很簡單，就是勾股定理。
double _step_x, _step_y, _angle;
// 計算小球初始移動角度（方向）
void calculateMoveAngle() {
_angle = Random().nextDouble() * 360;
_step_x = sin(_angle) * _speed;
_step_y = cos(_angle) * _speed;
}我們這里把運動速度（_speed）看做是三角形的斜邊，橫、縱坐標的移動速度（_step_x、_step_y）看做是三角形的直角邊即可。沒記錯的話，都是初中幾何知識，不會很難理解。
定向移動位置更新器
前文說到，我們將以60FPS的刷新率更新界面，這也就意味著，每隔大約16ms刷新一次小球位置。因為只有小球的運動，才能讓人感到界面在“更新”。這一步驟，我們用到Timer類。并將更新器在initState()方法中調用，以便程序啟動后，小球即刻運動，也就是前文代碼中見到的startMove()方法。
// 開始移動
void startMove() {
Timer.periodic(Duration(milliseconds: 16), (timer) {
moveBall();
setState(() {});
});
}
// 小球移動
void moveBall() {
_x += _step_x;
_y += _step_y;
}到此為止，小球已經可以開始沿著某個隨機方向移動了。但很快，它將移出屏幕。
邊界判定
顯然，小球每前進一步，都要做屏幕邊界判定，以防小球移出屏幕范圍。而邊界判定在moveBall()方法中實現似乎是最恰當的。
我們可以輕松地總結出小球移動的規律，當小球移動到屏幕邊緣時，我們只需讓其反向運動即可。比如，小球以3的速度移動并接觸屏幕的右邊緣，接下來，仍以3的速度移動并朝向屏幕的左邊緣。
水平方向如此，垂直方向亦如此。
因此，我們的邊界判定邏輯如下：
// 帶有便捷判定的小球移動
void moveBall() {
if (_x >= screenX || _x <= 0) {
_step_x = 0 - _step_x;
}
_x += _step_x;
if (_y >= screenY || _y <= 0) {
_step_y = 0 - _step_y;
}
_y += _step_y;
}用戶手勢監聽器
最后，配合用戶手勢及相關的布爾變量，在每次刷新小球位置時實現變色和暫停移動。
繼續修改moveBall()方法：
// 帶有便捷判定的小球移動
void moveBall() {
if (_keep_move) {
if (_x >= screenX || _x <= 0) {
_step_x = 0 - _step_x;
}
_x += _step_x;
if (_y >= screenY || _y <= 0) {
_step_y = 0 - _step_y;
}
_y += _step_y;
if (_auto_change_color) {
changeColor();
}
}
}到此，程序全部實現完成。下面放上完整的main.dart代碼：
import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'ball.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
SystemChrome.setEnabledSystemUIOverlays([]);
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: BounceBall(),
);
}
}
class BounceBall extends StatefulWidget {
@override
_BounceBallState createState() => _BounceBallState();
}
class _BounceBallState extends State<BounceBall> {
final double _speed = 5;
double _x = 0, _y = 0, _size = 0;
double _step_x, _step_y, _angle;
Color _color = Color.fromARGB(0, 0, 0, 0);
bool _auto_change_color = false;
bool _keep_move = true;
double screenX, screenY;
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
generateBall();
changeColor();
calculateMoveAngle();
startMove();
});
}
@override
Widget build(BuildContext context) {
screenX = MediaQuery.of(context).size.width;
screenY = MediaQuery.of(context).size.height;
return Scaffold(
body: GestureDetector(
child: Container(
width: double.infinity,
height: double.infinity,
child: CustomPaint(painter: Ball(_x, _y, _size, _color))),
onTap: () {
// 改變小球顏色
changeColor();
},
onDoubleTap: () {
// 暫停/恢復移動
_keep_move = !_keep_move;
},
onLongPress: () {
// 自動改變小球顏色
_auto_change_color = !_auto_change_color;
},
));
}
// 開始移動
void startMove() {
Timer.periodic(Duration(milliseconds: 16), (timer) {
moveBall();
setState(() {});
});
}
// 改變小球顏色
void changeColor() {
_color = Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255),
Random().nextInt(255));
}
// 生成小球初始位置和大小
void generateBall() {
_size = Random().nextDouble() * (screenY - screenX).abs();
_x = Random().nextDouble() * screenX;
_y = Random().nextDouble() * screenY;
}
// 計算小球初始移動角度（方向）
void calculateMoveAngle() {
_angle = Random().nextDouble() * 360;
_step_x = sin(_angle) * _speed;
_step_y = cos(_angle) * _speed;
}
// 帶有便捷判定的小球移動
void moveBall() {
if (_keep_move) {
if (_x >= screenX || _x <= 0) {
_step_x = 0 - _step_x;
}
_x += _step_x;
if (_y >= screenY || _y <= 0) {
_step_y = 0 - _step_y;
}
_y += _step_y;
if (_auto_change_color) {
changeColor();
}
}
}
}讓我們一起讓這個程序跑起來吧！
看完上述內容，是不是對如何用Flutter做桌上彈球有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
