为什么我的 if-Condition 后面的 return 有红色下划线？我在主体的堆栈小部件中引用 if

Question

这是错误：

lib/main.dart:728:16：错误：意外的令牌 'return'。 return文本('Passt!');

lib/main.dart:728:37: 错误：在此之前需要“}”。 return文本('Passt!');

class Screen2 extends StatelessWidget {
  final String title;

  const Screen2(this.title);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Warum du das noch erledigen solltest?'),
            backgroundColor: Colors.transparent),
        body: Stack(
          children: <Widget>[
            if(title == 'Milchprodukt') {
               return Text('Passt!')
},
            Align(
                alignment: Alignment.center,
                child: Text('\nClick here',
                    style: TextStyle(color: Colors.blue[700], fontSize: 30))),
            Align(
                alignment: Alignment(0, 0.1),
                child: Text(
                  '\n(Wenn du die genauen Zusammenhänge verstehen willst)',
                  style: TextStyle(fontSize: 15),
                  textAlign: TextAlign.center,
                ))
          ],
        ),
        backgroundColor: Colors.orange[200]);
  }
}

Answer 1

对于 if，您不应在小部件主体内使用方括号。另外，如果小部件有子部件，则不应使用 return 关键字。这是固定代码： class Screen2 扩展了 StatelessWidget {

  final String title;

  const Screen2(this.title);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Warum du das noch erledigen solltest?'),
            backgroundColor: Colors.transparent),
        body: Stack(
          children: <Widget>[
            if(title == 'Milchprodukt') 
               Text('Passt!')
,
            Align(
                alignment: Alignment.center,
                child: Text('\nClick here',
                    style: TextStyle(color: Colors.blue[700], fontSize: 30))),
            Align(
                alignment: Alignment(0, 0.1),
                child: Text(
                  '\n(Wenn du die genauen Zusammenhänge verstehen willst)',
                  style: TextStyle(fontSize: 15),
                  textAlign: TextAlign.center,
                ))
          ],
        ),
        backgroundColor: Colors.orange[200]);
  }
}

Answer 2

if(variable=='some value')
Text('Hello'),

只需从 Text() 小部件中删除 return 即可。

Answer 3

在：

children: <Widget>[
  if(title == 'Milchprodukt') {
    return Text('Passt!')
  },
  ...
],

您正在使用 集合-if。这与 if 语句不同。集合-if 和集合-for 的主体只能包含 elements，不能包含语句（例如 return）。您也不能将花括号 ({ ... }) 与它们一起使用，因为它们用于对语句进行分组。

您应该只使用：

children: <Widget>[
  if(title == 'Milchprodukt')
    Text('Passt!'),
  ...
],

我强烈推荐阅读 https://medium.com/dartlang/making-dart-a-better-language-for-ui-f1ccaf9f546c，其中解释了 collection-if 和 collection-for 的动机和设计。

为什么我的 if-Condition 后面的 return 有红色下划线？我在主体的堆栈小部件中引用 if

Why is the return after my if-Condition underlined in red? I refer to the if in the stack widget in the body

flutter

flutter-web

这是错误：