动画制作纸牌从一个地方移动到另一个地方

时间:2019-10-24 01:58:59

标签: flutter

我有一个用户可以选择的单词列表,一旦选择了一个单词,便将其按选择的顺序移动到另一个组中,并在其所在的位置放置一个占位符:

enter image description here

我使用有状态小部件来实现此目的,方法是保留一个在第一组和第二组中呈现的所选单词的列表(如果已经选择了它们),则卡片的颜色变为灰色:

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();
  }
}

但是我希望它们在移动时看起来像,而不只是消失而出现在另一个地方。

0 个答案:

没有答案