到目前为止，当我需要在小部件中使用条件语句时，我已经做了以下工作(使用中心和容器作为简化的虚拟示例):
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或开关语句而不颤振认为有死代码?
当前回答
最简单的方法:
// 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(...),
],
其他回答
编辑:我不再推荐我在下面发布的解决方案，因为我意识到使用这种方法，生成了真实结果的子结果和虚假结果的子结果，但只使用了一个，这不必要地降低了代码的速度。
之前的回答:
在我的应用程序中，我创建了一个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;
}
}
}
有一个按钮
bool _paused = false;
CupertinoButton(
child: _paused ? Text('Play') : Text('Pause'),
color: Colors.blue,
onPressed: () {
setState(() {
_paused = !_paused;
});
},
),
在Flutter中，条件渲染可以通过附带条款包轻松完成。 它有一组全面的条件小部件和构建器，可以生成可读性更强、更简单的条件语句代码。
API和helper包括但不限于:
条件小部件和构建器:
ConditionWidget(
condition: starred,
widget: Icon(
Icons.favorite
),
fallback: fallbackWidget
)
ConditionBuilder(
condition: (_) => someCondition,
trueBuilder: (_) => trueWidget,
fallbackBuilder: (_) => fallbackWidget
)
开关机箱条件:
SwitchCaseBuilder.widget<String>(
context: context,
condition: (_) => '1',
caseBuilders: {'1': (_) => someWidget(), '2': (_) => someWidget()},
fallbackBuilder: (_) => fallbackWidget,
);
甚至是一个有条件的父小部件
ConditionalWrap(
shouldWrap: shouldWrapChildInParent,
child: Container(),
parentBuilder: (child) => Container(
child: child,
),
)
API支持单个或多个小部件呈现。 欢迎你试一试。
这是一篇很棒的文章和对话。我尝试使用如上所述的三元运算符。但是代码没有工作，导致了前面提到的错误。
Column(children: [ condition? Text("True"): null,],);
上面的三元例子是miss leading。Dart将响应一个错误，返回的是null而不是小部件。你不能返回null。正确的方法是返回一个小部件:
Column(children: [ condition? Text("True"): Text("false"),],);
为了让三元函数正常工作，您需要返回一个Widget。如果你不想返回任何东西，你可以返回一个空容器。
Column(children: [ condition? Text("True"): Container(),],);
祝你好运。
****您还可以使用此方法****来使用条件
int _moneyCounter = 0;
void _rainMoney(){
setState(() {
_moneyCounter += 100;
});
}
new Expanded(
child: new Center(
child: new Text('\$$_moneyCounter',
style:new TextStyle(
color: _moneyCounter > 1000 ? Colors.blue : Colors.amberAccent,
fontSize: 47,
fontWeight: FontWeight.w800
)
),
)
),
