如何在Flutter Widget(Center Widget)的子属性中使用条件语句

到目前为止,每当我需要在Widget中使用条件语句时,我已经完成了以下操作(使用Center和Containers作为简化的虚拟示例):

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或switch语句而没有颤抖？

在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);
}

实际上，您可以在Dart / Flutter中使用if/else和switch和任何其他内联语句。

使用立即匿名功能

class StatmentExample extends StatelessWidget {
  Widget build(BuildContext context) {
    return Text((() {
      if(true){
        return "tis true";}

      return "anything but true";
    })());
  }
}

即将您的语句包装在一个函数中

(() {
  // your code here
}())

我强烈建议不要在您的UI“标记”中直接添加太多逻辑，但是我发现Dart中的类型推断需要一点工作，因此有时在类似情况下很有用。

使用三元运算符

condition? Text("True"): null,

在集合中使用If或For语句或散布运算符

children: [
  ...manyItems,
  oneItem,
  if(canIKickIt)
    ...kickTheCan
  for (item in items)
    Text(item)

使用方法

child: getWidget()

Widget getWidget() {
  if (x > 5) ...
  //more logic here and return a Widget

重新定义switch语句

作为三元运算符的另一种选择，您可以创建switch语句的函数版本，例如下面的帖子/sf/ask/17360801/。

  child: case2(myInput,
  {
    1: Text("Its one"),
    2: Text("Its two"),
  }, Text("Default"));

我发现使用条件逻辑构建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: [
        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),
      ],
    );
  },
);

非常整洁，因为您可以在几个小部件中重复使用颜色选择器功能。

这是解决方案。我已经解决了。这是代码

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");
  }
}