到目前为止,当我需要在小部件中使用条件语句时,我已经做了以下工作(使用中心和容器作为简化的虚拟示例):

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),
      ],
    );
  },
);

非常整洁,因为你可以在几个小部件中重用你的颜色选择器函数。

其他回答

在这种情况下,我建议使用三元操作符:

条件?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逻辑时,有时保留它更容易读懂。

我更喜欢使用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),
)

这是解决方案。 我已经修好了。下面是代码

child: _status(data[index]["status"]),

Widget _status(status) {
  if (status == "3") {
    return Text('Process');
  } else if(status == "1") {
    return Text('Order');
  } else {
    return Text("Waiting");
  }
}

更好的方法

 Column(
        children: [
            if (firstCondition == true) ...[
              DayScreen(),
            ] else if(secondCondition == true)...[
              StatsScreen(),
            ], else...[
              StatsScreen(),
            ],
        ],
     ),

除了三元操作符,如果需要在条件语句之前执行操作,还可以使用Builder小部件。

    Builder(builder: (context) {
      /// some operation here ...
      if(someCondition) {
        return Text('A');
      }
      else {
        return Text('B');
      } 
    })