• 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(
               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),
                      ),
                    ]),
                  ]),
            ),
          ),
        );
      }
    }
    
  • 相关阅读:
    智能算法:遗传算法
    matlab中画一条折线时怎样显示出每个点折点的数值
    灰色系统模型
    图论中TSP问题的LINGO求解与应用
    图论中最短路算法与程序实现
    图论中最优树问题的LINGO求解
    Hexo博客NexT主题美化之评论系统
    IN612L支持2.4G及蓝牙5.0全协议的SoC芯片替换NRF52832/NRF52840
    超低功耗蓝牙5.0芯片PHY6202替代NRF51822/NRF51802/NRF52832
    NRF51802多协议低功耗蓝牙/2.4G系统级芯片对比NRF51822差异
  • 原文地址:https://www.cnblogs.com/zwvista/p/14613042.html
Copyright © 2020-2023  润新知