我有一个用户可以选择的单词列表,一旦选择了一个单词,便将其按选择的顺序移动到另一个组中,并在其所在的位置放置一个占位符:
我使用有状态小部件来实现此目的,方法是保留一个在第一组和第二组中呈现的所选单词的列表(如果已经选择了它们),则卡片的颜色变为灰色:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Example(words: 'Lorem ipsum dolor sit amet'.split(' ')),
);
}
}
class Example extends StatefulWidget {
const Example({Key key, @required this.words}) : super(key: key);
@override
_ExampleState createState() => _ExampleState();
final List<String> words;
}
class _ExampleState extends State<Example> {
final List<String> selected = <String>[];
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(width: 0.3)),
),
height: 42,
),
Wrap(
children: _buildSelected(),
)
],
),
SizedBox(height: 20),
Wrap(
alignment: WrapAlignment.center,
children: _buildWords(),
),
],
),
),
),
);
}
List<Widget> _buildWords() => widget.words
.map(
(word) => Card(
elevation: 3,
color: selected.contains(word) ? Colors.grey[300] : null,
child: InkWell(
onTap: selected.contains(word)
? null
: () {
setState(() => selected.add(word));
},
child: Container(
padding: EdgeInsets.all(8.0),
child: Text(
word,
style: TextStyle(
fontSize: 15,
color: selected.contains(word) ? Colors.grey[300] : null,
),
),
),
),
),
)
.toList();
List<Widget> _buildSelected() {
return selected
.map(
(word) => Card(
child: InkWell(
onTap: () {
setState(() => selected.remove(word));
},
child: Container(
padding: EdgeInsets.all(8.0),
child: Text(word, style: TextStyle(fontSize: 15)),
),
),
),
)
.toList();
}
}
但是我希望它们在移动时看起来像,而不只是消失而出现在另一个地方。