ReactiveX 學習筆記（35）使用 RxDart + RxCommand 進行 GUI 編程

課題

1. 程式界面由3個文本編輯框和1個文本標簽組成，
2. 要求文本標簽實時顯示3個文本編輯框所輸入的數字之和，
3. 文本編輯框輸入的不是合法數字時，將其值視為0，
4. 3個文本編輯框的初值分別為1，2，3，

創建工程

Flutter 安裝完畢之后執行以下命令創建工程

flutter create rx_example

打開 Android Studio，File / Open…
選擇 rx_example 檔案夾以打開 Flutter 工程，

添加依賴

打開 pubspec.yaml 檔案，在 dependencies: 下添加對 RxDart 和 RxCommand 的依賴

dependencies:
  flutter:
    sdk: flutter
  rxdart: 0.25.0
  rx_command: ^5.3.0

點擊 Pub get 下載所依賴的包

ViewModel

在 lib 檔案夾下添加 rx_example_viewmodel.dart 檔案，內容如下

import 'package:rx_command/rx_command.dart';
import 'package:rxdart/rxdart.dart';

class RxExampleViewModel {
  final number1 = RxCommand.createSync((String v) => v, initialLastResult: "1");
  final number2 = RxCommand.createSync((String v) => v, initialLastResult: "2");
  final number3 = RxCommand.createSync((String v) => v, initialLastResult: "3");
  RxCommand<void, String> result;

  RxExampleViewModel() {
    int f(String s) => int.tryParse(s) ?? 0;
    result = RxCommand.createFromStream((_) => CombineLatestStream.combine3(
        number1.startWith(number1.lastResult),
        number2.startWith(number2.lastResult),
        number3.startWith(number3.lastResult),
        (String a, String b, String c) => (f(a) + f(b) + f(c)).toString()));
    result(result.lastResult);
  }
}

Main

最后打開 main.dart，將內容改為

import 'package:flutter/material.dart';
import 'package:rx_example/rx_example_viewmodel.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RxExamplePage(title: 'Rx Example Page'),
    );
  }
}

class RxExamplePage extends StatefulWidget {
  RxExamplePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _RxExamplePageState createState() => _RxExamplePageState();
}

class _RxExamplePageState extends State<RxExamplePage> {
  final vm = RxExampleViewModel();
  TextEditingController number1Ctrl;
  TextEditingController number2Ctrl;
  TextEditingController number3Ctrl;

  _RxExamplePageState() {
    number1Ctrl = TextEditingController(text: vm.number1.lastResult);
    number2Ctrl = TextEditingController(text: vm.number2.lastResult);
    number3Ctrl = TextEditingController(text: vm.number3.lastResult);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          width: 150,
          child: Table(
              columnWidths: {0: FractionColumnWidth(.2)},
              defaultVerticalAlignment: TableCellVerticalAlignment.middle,
              children: [
                TableRow(children: [
                  Container(),
                  TextField(
                      controller: number1Ctrl,
                      textAlign: TextAlign.end,
                      onChanged: vm.number1)
                ]),
                TableRow(children: [
                  Container(),
                  TextField(
                      controller: number2Ctrl,
                      textAlign: TextAlign.end,
                      onChanged: vm.number2)
                ]),
                TableRow(children: [
                  Center(child: Text("+")),
                  TextField(
                      controller: number3Ctrl,
                      textAlign: TextAlign.end,
                      onChanged: vm.number3)
                ]),
                TableRow(children: [
                  Center(child: Text("=")),
                  StreamBuilder(
                    stream: vm.result,
                    builder: (context, snapshot) =>
                        Text(vm.result.lastResult, textAlign: TextAlign.end),
                  ),
                ]),
              ]),
        ),
      ),
    );
  }
}