Flutter 如何在widget里面使用if-else

小半 • 2024年3月2日下午6:01 • 前端开发 • 阅读 322

if-else经常在方法或者函数中使用，但是在flutter的widget中使用会报错。当然条件简单的，我们用三元运算符就能搞定，但是如果条件复杂，为了代码清晰，我们还是要用if-else。下面以一个点赞功能作为例子。

错误的使用方式：

Flutter 如何在widget里面使用if-else — image.png

接下来，看正确的使用方法：

三元运算符（这里就不多说了，大部分人都知道）
使用排列运算符
使用方法

排列运算符

排列运算符（…）用于将多个值插入集合。它在Dart 2.3中引入。排列运算符必须位于集合widget内部，如 Column， Row等。

body: Center(
    child: Column(
      children:  [
        if(isLiked) ...[
          const Icon(
          Icons.thumb_up,
          size: 40,
          color: Colors.yellow,
          )
        ]else ...[
          const Icon(
          Icons.thumb_up,
          size: 40,
          )
        ]
      ]   ,
    ),
    ),

在Column中，如果isLiked变量为true，我们将显示已点赞图标。否则，我们将显示未点赞图标。

我们也可以只使用if：

body: Center(
    child: Column(
      children:  [
        const Icon(
        Icons.thumb_up,
        size: 40,
        ),
        if(isLiked) ...[
          const Icon(
          Icons.thumb_up,
          size: 40,
          color: Colors.yellow
          )
        ]
      ]   ,
    ),
  ),

多条件的情况我们也可以这样子写：

 body: Center(
    child: Column(
      children:  [
        if(isLiked) ...[
          // widget
        ] else if(isShowNum) ...[
          //widget
        ] else ...[
          //widget
        ]
      ]   ,
    ),
  ),

使用方法

在方法中编写条件语句会产生更清晰的代码。

import 'package:flutter/material.dart';
class TestWidget extends StatefulWidget {
  const TestWidget({Key? key}) : super(key: key);

  @override
  State<TestWidget> createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  bool isLiked = false;
  bool isShowNum = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('使用if-else')),
      body: Center(
        child: getLikedStatus(),
      ),
    );
  }

  Widget getLikedStatus() {
    if(isLiked){
      return const Icon(
        Icons.thumb_up,
        size: 40,
        color: Colors.yellow
      );
    }else {
      return const Icon(
        Icons.thumb_up,
        size: 40
      );
    }
  }
}