到目前为止，当我需要在小部件中使用条件语句时，我已经做了以下工作(使用中心和容器作为简化的虚拟示例):
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),
)
其他回答
像这样做
Widget showIf(bool shouldShow, Widget widget) {
if (shouldShow) {
return widget;
} else {
return Container();
}}
所以当你想用条件来展示某物的时候你会说
Column(children: [showIf(myConditionIsTrue, myComplexWidget)])
我发现使用条件逻辑构建Flutter UI的一个简单方法是将逻辑保持在UI之外。下面是一个返回两种不同颜色的函数:
Color getColor(int selector) {
if (selector % 2 == 0) {
return Colors.blue;
} else {
return Colors.blueGrey;
}
}
下面的函数用于设置CircleAvatar的背景。
new ListView.builder(
itemCount: users.length,
itemBuilder: (BuildContext context, int index) {
return new Column(
children: <Widget>[
new ListTile(
leading: new CircleAvatar(
backgroundColor: getColor(index),
child: new Text(users[index].name[0])
),
title: new Text(users[index].login),
subtitle: new Text(users[index].name),
),
new Divider(height: 2.0),
],
);
},
);
非常整洁，因为你可以在几个小部件中重用你的颜色选择器函数。
如果你使用小部件列表，你可以使用这个:
class HomePage extends StatelessWidget {
bool notNull(Object o) => o != null;
@override
Widget build(BuildContext context) {
var condition = true;
return Scaffold(
appBar: AppBar(
title: Text("Provider Demo"),
),
body: Center(
child: Column(
children: <Widget>[
condition? Text("True"): null,
Container(
height: 300,
width: MediaQuery.of(context).size.width,
child: Text("Test")
)
].where(notNull).toList(),
)),
);
}
}
在这种情况下，我建议使用三元操作符:
条件?Container(): Center()
并尽量避免使用如下形式的代码:
if (condition)返回A否则返回B
这比三元运算符更冗长。
但如果需要更多的逻辑，你还可以:
使用Builder小部件
Builder小部件是为了允许在需要子小部件时使用闭包:
一个柏拉图式的小部件，它调用闭包来获取它的子小部件。
任何时候你需要逻辑来构建小部件都很方便，它避免了创建专用函数的需要。
你使用Builder小部件作为子组件，你在它的Builder方法中提供你的逻辑:
Center(
child: Builder(
builder: (context) {
// any logic needed...
final condition = _whateverLogicNeeded();
return condition
? Container();
: Center();
}
)
)
Builder为保存创建逻辑提供了一个方便的地方。它比atreeon提出的直接匿名函数更直接。
我也同意逻辑应该从UI代码中提取出来，但当它真的是UI逻辑时，有时保留它更容易读懂。
child: Container(
child: isFile == true ?
Image.network(pathfile, width: 300, height: 200, fit: BoxFit.cover) :
Text(message.subject.toString(), style: TextStyle(color: Colors.white),
),
),
