到目前为止，当我需要在小部件中使用条件语句时，我已经做了以下工作(使用中心和容器作为简化的虚拟示例):
new Center(
child: condition == true ? new Container() : new Container()
)
虽然当我尝试使用if/else语句时，它会导致一个死亡代码警告:
new Center(
child:
if(condition == true){
new Container();
}else{
new Container();
}
)
有趣的是，我尝试了一个switch case语句，它给了我同样的警告，因此我不能运行代码。我做错了什么，或者它是这样的，不能使用if/else或开关语句而不颤振认为有死代码?
当前回答
我更喜欢使用Map<String, Widget>
Map<String, Widget> pageSelector = {
"login": Text("Login"),
"home": Text("Home"),
}
在build函数中，我像这样将键传递给map
new Center(
child: pageSelector["here pass the key"] ?? Text("some default widget"),
)
或者另一种解决方案是使用简单的函数
Widget conditionalWidget(int numberToCheck){
switch(numberToCheck){
case 0: return Text("zero widget");
case 1: return Text("one widget");
case 2: return Text("two widget");
case 3: return Text("three widget");
default: return Text("default widget");
}
在构建函数中传递要检查的小部件的编号或任何其他参数
new Center(
child: conditionalWidget(pageNumber),
)
其他回答
在我看来，最好和最干净的方式，我更喜欢的是创建一个helper类型定义函数类coditional_widget.dart。
typedef IfWidget = List<Widget> Function(bool, Widget);
typedef IfElseWidget = Widget Function(bool, Widget, Widget);
typedef ElseEmptyWidget = Widget Function(bool, Widget);
IfWidget ifTrueWidget =
(bool condition, Widget child) => [if (condition) child];
IfElseWidget ifElseWidget =
(bool condition, Widget isTrueChild, Widget isFalseChild) =>
condition ? isTrueChild : isFalseChild;
ElseEmptyWidget elseEmptyWidget = (bool condition, Widget isTrueChild) =>
condition ? isTrueChild : const SizedBox.shrink();
如何使用
// IfWidget
** Row/ Column / Wrap child etc.
children: <Widget>[
...ifWidget(title != null, Text('Only Display for True Conditon')),
]
// elseEmptyWidget
** Row/ Column / Wrap child etc.
children: <Widget>[
elseEmptyWidget(title!=null,Text('Only Display for True Conditon')),
]
// ifElseWidget
** Row/ Column / Wrap child etc.
children: <Widget>[
ifElseWidget(true,Text('Only Display for True Conditon'),Text('Only Display for false Conditon')),
]
这只是几个你可以添加更多的
简单的方法:
使用Builder小部件
Center(
child: Builder(
builder: (context) {
if (a == b) {
return const Widget1();
} else {
return const Widget2();
}
},
),
)
最简单的方法:
// the ternary operator:
<conditon>
? Widget1(...)
: Widget2(...)
// Or:
if (condition)
Widget1(...)
// With else/ if else
if (condition1)
Widget1(...)
else if (condition2)
Widget2(...)
else
Widget3(...),
如果你想在一个条件下呈现多个小部件，你可以使用扩展操作符(为此，你必须在行，列或堆栈小部件中):
if (condition) ...[
Widget1(...),
Widget2(...),
],
// with else / else if:
if (condition1) ...[
Widget1(...),
Widget2(...),
]
else if(condition2)...[
Widget3(...),
Widget4(...),
]
else ...[
Widget3(...),
Widget4(...),
],
为了记录，Dart 2.3增加了在Collection字面量中使用if/else语句的能力。这是现在完成以下方式:
return Column(children: <Widget>[
Text("hello"),
if (condition)
Text("should not render if false"),
Text("world")
],);
颤振问题#28181 -内联条件渲染列表
编辑:我不再推荐我在下面发布的解决方案，因为我意识到使用这种方法，生成了真实结果的子结果和虚假结果的子结果，但只使用了一个，这不必要地降低了代码的速度。
之前的回答:
在我的应用程序中，我创建了一个WidgetChooser小部件，这样我就可以在没有条件逻辑的小部件之间进行选择:
WidgetChooser(
condition: true,
trueChild: Text('This widget appears if the condition is true.'),
falseChild: Text('This widget appears if the condition is false.'),
);
这是WidgetChooser小部件的源代码:
import 'package:flutter/widgets.dart';
class WidgetChooser extends StatelessWidget {
final bool condition;
final Widget trueChild;
final Widget falseChild;
WidgetChooser({@required this.condition, @required this.trueChild, @required this.falseChild});
@override
Widget build(BuildContext context) {
if (condition) {
return trueChild;
} else {
return falseChild;
}
}
}
