到目前为止，当我需要在小部件中使用条件语句时，我已经做了以下工作(使用中心和容器作为简化的虚拟示例):
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或开关语句而不颤振认为有死代码?
当前回答
我发现使用条件逻辑构建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),
],
);
},
);
非常整洁，因为你可以在几个小部件中重用你的颜色选择器函数。
其他回答
Flutter Widget可以在不破坏代码树的情况下有条件地用父元素包装子树
import 'package:flutter/widgets.dart';
/// Conditionally wrap a subtree with a parent widget without breaking the code tree.
///
/// [condition]: the condition depending on which the subtree [child] is wrapped with the parent.
/// [child]: The subtree that should always be build.
/// [conditionalBuilder]: builds the parent with the subtree [child].
///
/// ___________
/// Usage:
/// ```dart
/// return ConditionalParentWidget(
/// condition: shouldIncludeParent,
/// child: Widget1(
/// child: Widget2(
/// child: Widget3(),
/// ),
/// ),
/// conditionalBuilder: (Widget child) => SomeParentWidget(child: child),
///);
/// ```
///
/// ___________
/// Instead of:
/// ```dart
/// Widget child = Widget1(
/// child: Widget2(
/// child: Widget3(),
/// ),
/// );
///
/// return shouldIncludeParent ? SomeParentWidget(child: child) : child;
/// ```
///
class ConditionalParentWidget extends StatelessWidget {
const ConditionalParentWidget({
Key key,
@required this.condition,
@required this.child,
@required this.conditionalBuilder,
}) : super(key: key);
final Widget child;
final bool condition;
final Widget Function(Widget child) conditionalBuilder;
@override
Widget build(BuildContext context) {
return condition ? this.conditionalBuilder(this.child) : this.child;
}
}
在Dart中，if/else和switch是语句而不是表达式。它们不返回值，所以不能将它们传递给构造函数参数。如果您的构建方法中有很多条件逻辑，那么尝试简化它是一个很好的实践。例如，您可以将自包含逻辑移动到方法，并使用if/else语句来初始化稍后使用的局部变量。
使用方法和if/else
Widget _buildChild() {
if (condition) {
return ...
}
return ...
}
Widget build(BuildContext context) {
return new Container(child: _buildChild());
}
使用if/else
Widget build(BuildContext context) {
Widget child;
if (condition) {
child = ...
} else {
child = ...
}
return new Container(child: child);
}
你可以简单地使用条件语句a==b?c: d
例如:
Container(
color: Colors.white,
child: ('condition')
? Widget1(...)
: Widget2(...)
)
我希望你明白了。
假设如果没有其他条件，你可以使用sizebox .shrink()
Container(
color: Colors.white,
child: ('condition')
? Widget1(...)
: SizedBox.shrink()
)
如果是列，不需要写?:运算符
Column(
children: <Widget>[
if('condition')
Widget1(...),
],
)
我个人使用if/else语句在子语句中使用这种block语句。它只支持Dart 2.3.0以上版本。
If / else
Column(
children: [
if (_selectedIndex == 0) ...[
DayScreen(),
] else ...[
StatsScreen(),
],
],
),
If / else If
Column(
children: [
if (_selectedIndex == 0) ...[
DayScreen(),
] else if(_selectedIndex == 1)...[
StatsScreen(),
],
],
),
多部件示例
Column(
children: [
if (_selectedIndex == 0) ...[
DayScreen(),
AboutScreen(),
InfoScreen(),
] else if(_selectedIndex == 1)...[
HomeScreen(),
StatsScreen(),
],
],
),
这是一篇很棒的文章和对话。我尝试使用如上所述的三元运算符。但是代码没有工作，导致了前面提到的错误。
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(),],);
祝你好运。
