📜  Flutter – 有条件地输出小部件(1)

📅  最后修改于: 2023-12-03 15:00:47.552000             🧑  作者: Mango

Flutter – 有条件地输出小部件

在Flutter中,需要有一个方法来根据条件有条件地输出小部件。Flutter提供了几种技术来实现这一点。本文将介绍其中的两种方法。

方法一:条件运算符

条件运算符是用于简单情况下的最佳选择。该运算符是三元运算符,形式为condition ? expr1 : expr2。如果条件为true,则对表达式1求值,否则对表达式2求值。

// 示例代码
Widget build(BuildContext context) {
    final bool isShowText = true;

    return Container(
        child: isShowText ? Text('Hello') : CircularProgressIndicator(),
    );
}

在上面的示例中,显示的小部件将根据isShowText变量的值而改变。

方法二:条件语句

当需要检查多个条件时,条件运算符就失去了优势。在这种情况下,使用条件语句是比较好的选择。Flutter提供了if-else, switch-case和assert等条件语句。

2.1. if-else语句

在下面的示例中,我们使用if -else语句根据变量isDarkTheme的值显示不同的小部件。

// 示例代码
Widget build(BuildContext context) {
    final bool isDarkTheme = true;

    Widget widget;
    if (isDarkTheme) {
        widget = Text('Dark Theme');
    } else {
        widget = Text('Light Theme');
    }

    return Container(
        child: widget,
    );
}

在上面的示例中,如果isDarkTheme为true,则显示“Dark Theme”,否则显示“Light Theme”。

2.2. switch-case语句

switch-case语句是一种更通用的条件语句。它允许我们根据选项表达式的值来计算哪个分支应该执行。

在下面的示例中,我们使用switch-case语句根据数字变量value的值来显示不同的小部件。

// 示例代码
Widget build(BuildContext context) {
    final int value = 3;

    Widget widget;
    switch (value) {
        case 1:
            widget = Text('One');
            break;
        case 2:
            widget = Text('Two');
            break;
        case 3:
            widget = Text('Three');
            break;
        default:
            widget = SizedBox.shrink();
    }

    return Container(
        child: widget,
    );
}

在上面的示例中,如果value为1、2或3,则显示相应的文本,否则显示空框。

结论

在Flutter中,我们可以使用条件运算符和条件语句来有条件地输出小部件。条件运算符适用于简单情况,而条件语句适用于更复杂的情况。不管使用哪种方法,我们都可以在Flutter中轻松地根据条件输出小部件。