我正在使用迷宮 pub 包： https ://pub.dev/packages/maze 。我想創建一個迷你游戲，它會計算從打開這個螢屏到到達終點線的時間。所以我嘗試在開始時設定計時器，但是當我想保存這些資料以共享首選項時，我得到了 00:00，而不是時間我顯示在螢屏上。
class MazeScreen extends StatefulWidget {
const MazeScreen({Key? key}) : super(key: key);
@override
_MazeScreenState createState() => _MazeScreenState();
}
class _MazeScreenState extends State<MazeScreen> {
Duration duration = Duration();
Timer? timer ;
@override
void initState() {
super.initState();
startTimer();
}
void reset() {
setState(() {
timer?.cancel();
});
}
void addTime() {
const addSeconds = 1;
setState(() {
final seconds = duration.inSeconds addSeconds;
duration = Duration(seconds: seconds);
});
}
void startTimer() {
timer = Timer.periodic(Duration(seconds: 1), (_) => addTime());
}
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
String twoDigits(int n) => n.toString().padLeft(2, '0');
final minutes = twoDigits(duration.inMinutes.remainder(60));
final seconds = twoDigits(duration.inSeconds.remainder(60));
return Scaffold(
body: Stack(children: <Widget>[
Container(
// Here the height of the container is 45% of our total height
height: size.height * .35,
decoration: const BoxDecoration(
color: Color(0xFF3d405b),
),
),
SafeArea(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
MemoryCard("time", "$minutes:$seconds"),
],
),
Expanded(
flex: 2,
child: Container(
alignment: AlignmentDirectional.center,
padding: const EdgeInsets.all(10.0),
child: const Text(
'Maze game',
style: TextStyle(
color: Color(0xFFe07a5f),
fontSize: 25.0,
fontStyle: FontStyle.italic,
),
),
),
),
Expanded(
flex: 9,
child: Stack(
children: [
Container(
margin: const EdgeInsets.symmetric(vertical: 20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.0),
color: const Color(0xFFf4f1de),
),
),
Maze(
player: MazeItem(
'assets/start.png',
ImageType.asset,
),
columns: 7,
rows: 7,
wallThickness: 3.0,
wallColor: const Color(0xFF81b29a),
finish: MazeItem(
'assets/finish.png',
ImageType.asset,
),
onFinish: () async {
reset();
final prefs = await SharedPreferences.getInstance();
await prefs.setString("mazeTimer", '$minutes:$seconds');
},
),
],
),
),
],
),
),
),
]),
);
}
}
當我這樣做時，我會收到 00:00。
uj5u.com熱心網友回復：
您需要將minute / second狀態作為變數進行處理，例如 handle duration，這是它們所屬的位置，因為它們代表狀態。
每次duration更新時計算它們。然后可以在此呼叫中顯示或使用這些計算值：
await prefs.setString("mazeTimer", ... );
被保存的原因00:00是該函式onFinish: ()在開始時被初始化一次，此時finalminute 和 second 的值實際上是00:00。
嘗試這樣的事情：
class _MazeScreenState extends State<MazeScreen> {
Duration duration = Duration();
Timer? timer ;
String minutes = '00'; // it may be better to store an int, not a String
String seconds = '00'; // it may be better to store an int, not a String
...
void addTime() {
const addSeconds = 1;
setState(() {
final seconds = duration.inSeconds addSeconds;
duration = Duration(seconds: seconds);
minutes = ... // ADD CALCULATION HERE
seconds = ... // ADD CALCULATION HERE
});
}
}
第二種方法是在這里計算分鐘和秒，但你最終會minutes / seconds在代碼中有多次，這是多余的：
onFinish: () async {
reset();
final prefs = await SharedPreferences.getInstance();
final min = ... // CALCULATE HERE
final sec= ... // CALCULATE HERE
await prefs.setString("mazeTimer", '$min:$sec');
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/489966.html
標籤：扑
上一篇：我想讓用戶需要TextField