---
title: '聲明式UI vs 命令式UI'
tags: Flutter
disqus: hackmd
---

# 聲明式UI vs 命令式UI

**目錄：**

[TOC]

## 命令式UI

- 注重於描述怎麼做，我們需要像下達命令一樣，手動處理每一項UI的更新

如果UI的複雜度足夠高的話，就會引發一系列問題，諸如：

- 可維護性差：需要編寫大量的代碼邏輯來處理UI變化，這會使代碼變得臃腫、複雜、難以維護。
- 可複用性差：UI的設計與更新邏輯耦合在一起，導致只能在當前程序使用，難以復用。
- 健壯性差：UI元素之間的關聯度高，每個細微的改動都可能一系列未知的連鎖反應。

var count = 0
        
let label = UILabel()

// "+"號按钮
let plusBtn = UIButton()
plusBtn.rx.tap
    .bind {
        count += 1
        label.text = count
    }
    .disposed(by: disposeBag)

// "-"號按钮
let minusBtn = UIButton()
minusBtn.rx.tap
    .bind {
        count -= 1
        label.text = count
    }
    .disposed(by: disposeBag)

## 聲明式

- 注重於做什麼，具體怎麼做我們不關心

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          // 数字
          Text(
            _count.toString(),
            style: const TextStyle(fontSize: 48),
          ),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              // +"号按钮
              ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _count++;
                    });
                  },
                  child: const Text("+")),
              // "-"号按钮
              ElevatedButton(
                  onPressed: () {
                    setState(() {
                      if (_count == 0) return;
                      _count--;
                    });
                  },
                  child: const Text("-"))
            ],
          ),
        ],
      ),
    );
  }
}

- 在這樣的代碼中，我們幾乎看不到任何操作UI更新的代碼，而這正是聲明式UI的特點，它注重於描述做什麼，而不是怎麼做，開發者只需要關注UI應該如何呈現，而不需要關心UI的具體實現過程。

## 舉例

我們可以用一個點奶茶的例子來做個比喻：

當我們用命令式UI的思維方式去點一杯奶茶，相當於我們需要告訴製作者，沖一杯奶茶必須按照煮水、沖茶、加牛奶、加糖這幾個步驟，一步步來完成，也即我們需要明確每一個步驟，從而使得我們的想法具體而可操作。

而當我們用聲明式UI的思維方式去點一杯奶茶，則相當於我們只需要告訴製作者，我需要一杯“溫度適中、口感濃郁、有一點點甜味”的奶茶，而不必關心具體的製作步驟和操作細節。