我想隨機化顯示的影像，并用布林值檢查，用過的“卡片”不再顯示，直到整個甲板被消耗掉。
這是我的“卡片類”，我在串列中指定了所有卡片：
import 'dart:math';
import 'dart:ui';
List<String> cardlist = [
'assets/images/card-1.png',
'assets/images/card-2.png',
'assets/images/card-3.png',
'assets/images/card-4.png',
'assets/images/card-5.png',
'assets/images/card-6.png',
'assets/images/card-7.png',
'assets/images/card-8.png',
'assets/images/card-9.png',
'assets/images/card-10.png',
'assets/images/card-11.png',
'assets/images/card-12.png',
'assets/images/card-13.png',
'assets/images/card-14.png',
'assets/images/card-15.png',
'assets/images/card-16.png',
'assets/images/card-17.png',
'assets/images/card-18.png',
'assets/images/card-19.png',
'assets/images/card-20.png',
'assets/images/card-21.png',
'assets/images/card-22.png',
'assets/images/card-23.png',
'assets/images/card-24.png',
'assets/images/card-25.png',
'assets/images/card-26.png',
'assets/images/card-27.png',
'assets/images/card-28.png',
'assets/images/card-29.png',
'assets/images/card-30.png',
'assets/images/card-31.png',
'assets/images/card-32.png',
'assets/images/card-33.png',
'assets/images/card-34.png',
'assets/images/card-35.png',
'assets/images/card-36.png',
'assets/images/card-37.png',
'assets/images/card-38.png',
'assets/images/card-39.png',
'assets/images/card-40.png',
'assets/images/card-41.png',
'assets/images/card-42.png',
'assets/images/card-43.png',
'assets/images/card-44.png',
'assets/images/card-45.png',
'assets/images/card-46.png',
'assets/images/card-47.png',
'assets/images/card-48.png',
'assets/images/card-49.png',
'assets/images/card-50.png',
'assets/images/card-51.png',
'assets/images/card-52.png',
'assets/images/card-53.png',
'assets/images/card-54.png',
'assets/images/card-55.png'
];
Random Randomizer = Random();
int randomIndex = random.nextInt(cardlist.length);
Image randomImage = cardlist[cardlist];
因為實際上 Main.dart 上只能顯示 1 張卡片，點擊時會翻轉。我想在“丟棄”一個新的顯示后讓它成為這樣，代碼如下：
import 'package:flutter/material.dart';
import 'dart:math'; // wegen PI berechnung n?tig
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
//declare the isBack bool
bool isBack = true;
double angle = 0;
void _flip() {
setState(() {
angle = (angle pi) % (2 * pi);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF292a3e),
body: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: _flip,
child: TweenAnimationBuilder(
tween: Tween<double>(begin: 0, end: angle),
duration: Duration(seconds: 1),
builder: (BuildContext context, double val, __) {
//isBack wert wird geswithced
if (val >= (pi / 2)) {
isBack = false;
} else {
isBack = true;
}
return (Transform(
//Karte wird vom Center geflipped
alignment: Alignment.center,
transform: Matrix4.identity()
..setEntry(3, 2, 0.001)
..rotateY(val),
child: Container(
width: 309,
height: 474,
child: isBack
? Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage("assets/images/back.png"),
),
),
) //Rückseite hier displayed
: Transform(
alignment: Alignment.center,
transform: Matrix4.identity()
..rotateY(
pi), // horizontaler flip
child: Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage("assets/images/card-1.png"),
),
),
child: Center(
child: Text(
"Hello You",
style: TextStyle(
fontSize: 30.0,
),
),
),
),
)
),
));
}),
)
],
),
),
),
);
}
}
uj5u.com熱心網友回復：
對于初學者，您可以通過像這樣宣告該串列來節省一點螢屏空間。
final cardList =
List<String>.generate(55, (index) => 'assets/images/card-${index 1}.png');
如果我了解您的問題，您只想生成一個隨機影像并確保它們在全部使用之前不會從串列中重復，對嗎？
如果是這樣，我會復制該串列并對其進行處理，并洗掉所有使用的條目。
List<String> availableImages = [...cardList]; // modifiable list
然后這個函式應該回傳一個沒有被使用過的隨機影像，如果它們都被使用過，則重置串列。
AssetImage getRandomImage() {
if (availableImages.length == 0) {
availableImages = [...cardList]; // resetting if all images have been used
}
final random = Random();
int randomIndex = random.nextInt(availableImages.length);
final asset = availableImages[randomIndex];
availableImages.remove(asset); // removing image so it doesn't get used again until all images have been used
return AssetImage(asset);
}
然后你可以傳入getRandomImage()你的DecorationImage而不是你現在擁有的硬編碼值。
這至少應該讓你朝著正確的方向前進。
根據@jamesdlin 的建議進行編輯
使用 Dartsshuffle方法你可以做這樣的事情。
List<String> availableImages = [...cardList]..shuffle(); // shuffled copy of list
getRandomImage可以像這樣實作。
int index = 0;
AssetImage getRandomImage() {
if (index == 54) {
availableImages.shuffle();
index = 0;
} // re-shuffling and resetting index if all images have been used
final asset = availableImages[index];
index ;
return AssetImage(asset);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/455282.html
上一篇：如果它們不在發送的陣列Rails5API中，則洗掉現有記錄
下一篇：如何添加按鈕以顯示此影像？