无法将元素类型 'Question' 分配给列表类型 'Widget'

Question

我无法使用自己的 Class/Widget Question() 从 question.dart 到 main.dart（正文后错误位置第 3 行）：

import 'package:flutter/material.dart';
import './question.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  var questionIndex = 0;
  // State of function that process data to UI
  void _answerQuestion() {
    setState(() {
      questionIndex = questionIndex + 1;
    });
    print(questionIndex);
  }

  void _pangBawas() {
    setState(() {
      questionIndex = questionIndex - 1;
    });
    print(questionIndex);
  }

  // End of State
  // This section is responsible for builing UI
  @override
  Widget build(BuildContext context) {
    var questions = [
      'What\'s your favorite color?',
      'What\'s your favorite animal?',
      'What\'s your favorite food?',
      'What\'s your favorite color?',
      'What\'s your favorite dress?',
      'What\'s your favorite position?',
    ];
    // Start of UI
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First App'),
        ),
        body: Column(
          children: [
            Question( //ERROR: The element type 'Question' can't be assigned to the list type 'Widget'.
              questions[questionIndex],
            ),
            RaisedButton(
              child: Text('Answer 1'),
              onPressed: _answerQuestion,
            ),
            RaisedButton(
              child: Text('Answer 2'),
              onPressed: () => _pangBawas,
            ),
            RaisedButton(
                child: Text('Answer 3'),
                onPressed: () {
                  //....
                  print('Hi');
                }),
          ],
        ),
      ),
    );
    // End of UI
  }
}

这里没有错误，我只在 main.dart 文件

上使用 Question() 时出错

import 'package:/flutter/material.dart';

class Question extends StatelessWidget {
  final String questionText;

  Question(this.questionText);

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

Answer 1

您可以添加行程运算符来检查问题 class 返回的 Widget 是否为空。发生这种情况是因为列的子窗口小部件不能为空。

 body: Column(
      children: [
        Question(questions[questionIndex]) == null
            ? SizedBox()
            : Question(questions[questionIndex]),

这样，如果从问题 class 返回的小部件为空，则 Column 将创建一个 SizedBox 而不是 Container + Text。

Answer 2

利用插值解决了一些错误并在 UI 中向您显示错误。下面的代码工作得很好：

import 'package:flutter/material.dart';

class Question extends StatelessWidget {
  final String questiontext;
  Question(this.questiontext);
  @override
  Widget build(BuildContext context) {
    return Text("$questiontext");
  }
}

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  var questionIndex = 0;
  // State of function that process data to UI
  void _answerQuestion() {
    setState(() {
      questionIndex = questionIndex + 1;
    });
    print(questionIndex);
  }

  void _pangBawas() {
    setState(() {
      questionIndex = questionIndex - 1;
    });
    print(questionIndex);
  }

  // End of State
  // This section is responsible for builing UI
  @override
  Widget build(BuildContext context) {
    var questions = [
      'What\'s your favorite color?',
      'What\'s your favorite animal?',
      'What\'s your favorite food?',
      'What\'s your favorite color?',
      'What\'s your favorite dress?',
      'What\'s your favorite position?',
    ];
    // Start of UI
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First App'),
        ),
        body: Column(
          children: [
            Question(
              //ERROR: The element type 'Question' can't be assigned to the list type 'Widget'.
              "${questions[questionIndex]}",
            ),
            RaisedButton(
              child: Text('Answer 1'),
              onPressed: _answerQuestion,
            ),
            RaisedButton(
              child: Text('Answer 2'),
              onPressed: () => _pangBawas,
            ),
            RaisedButton(
                child: Text('Answer 3'),
                onPressed: () {
                  //....
                  print('Hi');
                }),
          ],
        ),
      ),
    );
    // End of UI
  }
}

无法将元素类型 'Question' 分配给列表类型 'Widget'

The element type 'Question' can't be assigned to the list type 'Widget'

constructor

widget

dart

flutter