【发布时间】：2023-03-27 11:50:01
【问题描述】：
我正在尝试调整单词以按正确的顺序构成句子。 Like this. 或者像 Duolingo 语句 examples. （无需拖放，只需 lists 和/或 maps）
句子：
static String mySentence = "My cat is black";
static List<String> correctWords = mySentence.split(" ");
static List<String> shuffleWords = [...correctWords]..shuffle();
绿色部分： shuffleWidgetList。 shuffleWords 中的每个单词都添加了一个小部件。
List<Widget> shuffleWidgetList = [];
generateShuffleWidgets() {
for (int i = 0; i < shuffleWords.length; i++) {
shuffleWidgetList.add(shuffleWordWidget(shuffleWords[i]));
}
}
蓝色部分： answerWidgetList.
List<Widget> answerWidgetList = [];
白色部分：用按钮检查答案。
我正在比较单词列表 (List<String>) correctWords 和 answerWords。
onTap: () {
if (IterableEquality().equals(correctWords, answerWords)) {
print("correct");
} else {
print("wrong");
}
},
步骤：
1. 在绿色部分，我从列表中选择一个单词。我点击的项目被添加到answerWidgetList（蓝色部分）。并从shuffleWidgetList（绿色部分）中删除。
onTap: () {
setState(() {
shuffleWidgetList.remove(shuffleWordWidget(word));
//not necessary remove. Look at Problem 1.a
answerWidgetList.add(answerWordWidget(word));
answerWords.add(word);
});
},
2.单击蓝色部分中的单词会将其添加到shuffleWidgetList（绿色部分）中的旧位置。并从answerWidgetList（蓝色部分）中删除。
onTap: () {
setState(() {
shuffleWidgetList.add(shuffleWordWidget(word)); //Problem 1.b
answerWidgetList.remove(answerWordWidget(word)); //Problem 2
answerWords.remove(word);
});
},
问题：
1.a.当我单击shuffleWidgetList 中的项目时，如何更改shuffleWordWidget 的文本颜色？
我试过了：在shuffleWidgetList（绿色部分）点击时不需要删除该项目。文本应该是透明的 (to keep the widget size) 并且不会被再次点击。为此，我将bool clicked=false; 添加到shuffleWordWidget。单击时，onTap() 会更新为 true，但 color 不会更新。像这样：
shuffleWordWidget(String word) {
bool clicked = false;
return InkWell(
child: Container(
color: clicked == false ? Colors.white54 : Colors.grey,
child: Text(
word,
style: TextStyle(fontSize: 12,color:clicked == false ? Colors.black : Colors.transparent ),
),
),
onTap: () {
if (clicked == false) {
setState(() {
...
clicked = true;
});
}
},
);
}
1.b.当在answerWidgetList 中单击项目时，如何将shuffleWidgetList 添加到其旧位置？
老地方；如果用户点击answerWidgetList（蓝色部分）中的一个单词，它应该是shuffleWidgetList（绿色部分）中的同一个单词clicked=false;。
2。当我单击answerWidgetList 中的项目时，如何从answerWidgetList 中删除项目？
answerWidgetList.remove(answerWordWidget(word)); 不起作用。
我的方法可能完全错误。您还可以提出不同的解决方案。
完整代码：
import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Sentence Creation',
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
static String mySentence = "My cat is black";
static List<String> correctWords = mySentence.split(" ");
static List<String> shuffleWords = [...correctWords]..shuffle();
List<String> answerWords = [];
List<Widget> shuffleWidgetList = [];
List<Widget> answerWidgetList = [];
generateShuffleWidgets() {
for (int i = 0; i < shuffleWords.length; i++) {
shuffleWidgetList.add(shuffleWordWidget(shuffleWords[i]));
}
}
@override
void initState() {
super.initState();
generateShuffleWidgets();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
flex: 2,
child: Container(
color: Colors.blue,
child: Center(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: answerWidgetList,
),
),
)),
Expanded(
child: Container(
color: Colors.green,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: shuffleWidgetList,
),
),
),
SizedBox(
height: 50,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
child: Center(child: Text("Check")),
onTap: () {
if (IterableEquality().equals(correctWords, answerWords)) {
print("correct");
} else {
print("wrong");
}
print("correct list: $correctWords");
print("answer list: $answerWords");
},
),
),
)
],
),
);
}
shuffleWordWidget(String word) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: InkWell(
child: Container(
color: Colors.white54,
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Text(
word,
style: TextStyle(fontSize: 12),
),
),
),
onTap: () {
setState(() {
shuffleWidgetList.remove(shuffleWordWidget(word));
//not necessary remove. Look at Problem 1.a
answerWidgetList.add(answerWordWidget(word));
answerWords.add(word);
});
},
),
);
}
answerWordWidget(String word) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: InkWell(
child: Container(
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Text(
word,
style: TextStyle(fontSize: 12),
),
),
),
onTap: () {
setState(() {
shuffleWidgetList.add(shuffleWordWidget(word)); //Problem 1.b
answerWidgetList.remove(answerWordWidget(word)); //Problem 2
answerWords.remove(word);
});
},
),
);
}
}
【问题讨论】：