Question

背景

我正在构建一个应用程序来帮助小学老师。该应用程序允许用户从字母表中选择字母，当他们继续进入下一个屏幕时，他们选择的字母应显示为可翻转的卡片。一侧有字母，另一侧有图像。这些卡应占据整个屏幕，并且用户可以滑动到下一张卡。

问题

当用户选择多个字母时，它们将被输入到列表中。当他们点击按钮以移动到下一个屏幕（带有可翻转卡）时，会收到以下错误消息：

“类型'_InternalLinkedHashMap>'不是类型'列表'的子类型”

代码

下面是字母选择屏幕的代码：

import 'package:flutter/material.dart';
import 'package:project_teacher/pages/allcards.dart';

class ChooseLetters extends StatefulWidget {
  @override
  _ChooseLettersState createState() => _ChooseLettersState();
}

class _ChooseLettersState extends State<ChooseLetters> {

  List<String> alphabets = ['a','b','c','d','e','f',
    'g','h','i','j','k','l','m','n','o','p',
    'q','r','s','t','u','v','w','x','y','z'],

      selection = [];

  List alphabetCards = [AlphabetCard(),BAlphabetCard(),CAlphabetCard(),DAlphabetCard(),EAlphabetCard(),FAlphabetCard(),
    GAlphabetCard(),HAlphabetCard(),IAlphabetCard(),JAlphabetCard(),KAlphabetCard(),LAlphabetCard(),MAlphabetCard(),NAlphabetCard(),OAlphabetCard(),PAlphabetCard(),
    QAlphabetCard(),RAlphabetCard(),SAlphabetCard(),TAlphabetCard(),UAlphabetCard(),VAlphabetCard(),WAlphabetCard(),XAlphabetCard(),YAlphabetCard(),ZAlphabetCard()],

      selectionCards = [];

  @override
  void initState(){
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.bottomLeft,
                end: Alignment.topRight,
                colors: [Colors.blueGrey[300], Colors.blueGrey])
        ),
        padding:EdgeInsets.all(15),
        alignment: Alignment.center,
        child:GridView.builder(
          gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount:4,
            mainAxisSpacing: 10, crossAxisSpacing: 10,
          ),
          itemCount:alphabetCards.length,
          itemBuilder:(con,ind){
            return InkWell(
              onTap:(){
                setState((){
                  if(selectionCards.contains(alphabetCards[ind]))
                    selectionCards.remove(alphabetCards[ind]);
                  else
                    selectionCards.add(alphabetCards[ind]);
                });
                print(selectionCards);
              },
              child: Container(
                  padding:EdgeInsets.all(10),
                  alignment:Alignment.center,
                  decoration:BoxDecoration(
                      color:selectionCards.contains(alphabetCards[ind]) ? Colors.orange : Colors.white,
                      borderRadius:BorderRadius.circular(0)
                  ),
                  child:Text(alphabets[ind],
                      style: TextStyle(
                          color:Colors.black,
                          fontSize: 50
                      )
                  )
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
          onPressed: () {
            Navigator.pushNamed(context, '/tabbedcards', arguments: {
              'selectionOfCards': selectionCards
            });
          },
        backgroundColor: Colors.red,
      ),
    );
  }

}

这是可翻转式卡片屏幕的代码：

import 'package:flutter/material.dart';

class TabbedCards extends StatefulWidget {

  @override
  _TabbedCardsState createState() => _TabbedCardsState();
}

class _TabbedCardsState extends State<TabbedCards> {

  List selectionOfCards;

  @override
  Widget build(BuildContext context) {

    selectionOfCards = ModalRoute.of(context).settings.arguments;

    return MaterialApp(
      home: DefaultTabController(
        length: selectionOfCards.length,
        child: Scaffold(
          body: TabBarView(
            children: selectionOfCards
          ),
        ),
      ),
    );
  }
}

感谢您阅读和提供任何帮助。

Answer 1

您只需进行一些更改即可使其正常工作。

List<String> alphabets = ['a','b','c','d','e','f',
    'g','h','i','j','k','l','m','n','o','p',
    'q','r','s','t','u','v','w','x','y','z'],

      selection = [];

在这里，您尝试创建字符串列表并添加selection = []吗？

List<String> alphabets = ['a','b','c','d','e','f',
        'g','h','i','j','k','l','m','n','o','p',
        'q','r','s','t','u','v','w','x','y','z'];

现在为窗口小部件列表提供类型。

  List<Widget> alphabetCards = [
    AlphabetCard(),
    BAlphabetCard(),
    CAlphabetCard(),
    DAlphabetCard(),
    EAlphabetCard(),
     ....
  ];
  List<Widget> selectionCards = <Widget>[];

现在如下更改标签视图。

class _TabbedCardsState extends State<TabbedCards> {
  Map<String, List> selectionOfCards;
  List<Widget> data;

  @override
  Widget build(BuildContext context) {
    selectionOfCards = ModalRoute.of(context).settings.arguments;
    data = selectionOfCards['selectionOfCards'];
    print(data.toString());
    return MaterialApp(
      home: DefaultTabController(
        length: data.length,
        child: Scaffold(
          body: TabBarView(
            children: data,
          ),
        ),
      ),
    );
  }
}

完整的演示代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {'/tabbedcards': (context) => TabbedCards()},
      home: ChooseLetters(),
    );
  }
}

class ChooseLetters extends StatefulWidget {
  @override
  _ChooseLettersState createState() => _ChooseLettersState();
}

class _ChooseLettersState extends State<ChooseLetters> {
  List<String> alphabets = [
    'a',
    'b',
    'c',
    'd',
    'e',
    'f',
    'g',
    'h',
    'i',
    'j',
    'k',
    'l',
    'm',
    'n',
    'o',
    'p',
    'q',
    'r',
    's',
    't',
    'u',
    'v',
    'w',
    'x',
    'y',
    'z'
  ];

  List<Widget> alphabetCards = [
    AlphabetCard(),
    BAlphabetCard(),
    CAlphabetCard(),
    DAlphabetCard(),
    EAlphabetCard(),
  ];
  List<Widget> selectionCards = <Widget>[];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.bottomLeft,
                end: Alignment.topRight,
                colors: [Colors.blueGrey[300], Colors.blueGrey])),
        padding: EdgeInsets.all(15),
        alignment: Alignment.center,
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
          ),
          itemCount: alphabetCards.length,
          itemBuilder: (con, ind) {
            return InkWell(
              onTap: () {
                setState(() {
                  print("print ${alphabetCards[ind].toString()}");
                  if (selectionCards.contains(alphabetCards[ind]))
                    selectionCards.remove(alphabetCards[ind]);
                  else
                    selectionCards.add(alphabetCards[ind]);
                });
                print(selectionCards);
              },
              child: Container(
                  padding: EdgeInsets.all(10),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      color: selectionCards.contains(alphabetCards[ind])
                          ? Colors.orange
                          : Colors.white,
                      borderRadius: BorderRadius.circular(0)),
                  child: Text(alphabets[ind],
                      style: TextStyle(color: Colors.black, fontSize: 50))),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.pushNamed(context, '/tabbedcards',
              arguments: {'selectionOfCards': selectionCards});
        },
        backgroundColor: Colors.red,
      ),
    );
  }
}

class AlphabetCard extends StatelessWidget {
  const AlphabetCard({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(" A hello"),
    );
  }
}

class BAlphabetCard extends StatelessWidget {
  const BAlphabetCard({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(" B hello"),
    );
  }
}

class CAlphabetCard extends StatelessWidget {
  const CAlphabetCard({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(" C hello"),
    );
  }
}

class DAlphabetCard extends StatelessWidget {
  const DAlphabetCard({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(" D hello"),
    );
  }
}

class EAlphabetCard extends StatelessWidget {
  const EAlphabetCard({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(" E hello"),
    );
  }
}

class TabbedCards extends StatefulWidget {
  @override
  _TabbedCardsState createState() => _TabbedCardsState();
}

class _TabbedCardsState extends State<TabbedCards> {
  Map<String, List> selectionOfCards;
  List<Widget> data;

  @override
  Widget build(BuildContext context) {
    selectionOfCards = ModalRoute.of(context).settings.arguments;
    data = selectionOfCards['selectionOfCards'];
    print(data.toString());
    return MaterialApp(
      home: DefaultTabController(
        length: data.length,
        child: Scaffold(
          body: TabBarView(
            children: data,
          ),
        ),
      ),
    );
  }
}

Answer 2

更改此：

List selectionCards

对此：

Map selectionCards

您在ModalRoute.of(context).settings.arguments处获取的参数的类型为Map

如何解决错误：类型'_InternalLinkedHashMap <String，List <dynamic >>'不是类型'List <dynamic>'的子类型

2 个答案: