如何在线获取用户在dartpad上的输入?

时间:2019-07-13 04:20:59

标签: dart angular-dart dart-polymer dart-html dart-webui

如何在dartpad的控制台中获得用户输入?

每当我写

<!doctype html>
<html>
    <head>
        <title>Vertical Scroll in jquery vertical short</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable-min.js"></script>
        <link rel="stylesheet" href="style.css"/>
        <script>
            (function(){
                $(function(){
                   $(function() {
                       window.posY = 0;
                       window.posX = 0;
                       window.dragStart = false;
                       window.dragCon_el = null;
                       window.dragCon_left = 0;
                       window.dragCon_top = 0;
                      $("ol.default").sortable({
                          pullPlaceholder: false,
                          vertical: true,
                          group: 'item',
                          onDrag: function($item, position, _super, event) {
                              if (window.dragStart && position.top >= window.dragCon_el.get(0).scrollTop + window.dragCon_el.height() + window.dragCon_top) {
                                      window.dragCon_el.get(0).scrollTo(
                                          window.dragCon_el.get(0).scrollLeft + ((position.left - posX) - (window.dragCon_left * 2)),
                                          window.dragCon_el.get(0).scrollTop + ((position.top - posY) - (window.dragCon_top * 2))
                                      );
                                   window.posX = event.pageX;
                                   window.posY = event.pageY;
                               }
                          },
                          onDragStart: function($item, container, _super, event) {
                              let $container = $item.closest('.overflow');
                              window.dragStart = true;
                              window.posY = event.pageY;
                              window.posX = event.pageX;
                              window.dragCon_el = $container;
                              window.dragCon_top = $container.offset().top;
                              window.dragCon_left = $container.offset().left;
                          },
                          onDrop: function($item, container, _super, event) {
                              window.dragStart = false;
                          }
                      });
                    }); 
                });
            })(jQuery)
        </script>
    </head>
    <body>
        <div class="overflow">
          <ol class="default vertical">
            <li>elem1</li>
            <li>elem2</li>
            <li>elem3</li>
            <li>elem4</li>
            <li>elem5</li>
            <li>elem6</li>
            <li>elem7</li>
            <li>elem8</li>
            <li>elem9</li>
            <li>elem10</li>
          </ol>
        </div>

        <div class="overflow">
          <ol class="default vertical">
            <li>elem1</li>
            <li>elem2</li>
            <li>elem3</li>
            <li>elem4</li>
            <li>elem5</li>
            <li>elem6</li>
            <li>elem7</li>
            <li>elem8</li>
            <li>elem9</li>
            <li>elem10</li>
          </ol>
        </div>
    </body>
</html>

但是在这样的控制台窗口中却出现了异常

import 'dart:io';
void main() {
  stdout.write("What's your name? ");
  var name = stdin.readLineSync();
  print("Hi, $name!");
}

2 个答案:

答案 0 :(得分:0)

如DartPad手册中所述:https://dart.dev/tools/dartpad

  

DartPad支持dart:*与Web应用程序一起使用的库;它不支持dart:io或软件包中的库。如果要使用dart:io,请改用Dart SDK。如果要使用软件包,请获取该软件包支持的平台的SDK。

因此您不能使用stdin / stdout,因为它来自dart:io库。

要解决您的问题,可以在DartPad页面底部启用“显示Web内容”。在这里,您可以将HTML代码添加到您的项目中,并使用例如一个按钮。在Dart代码中添加一些逻辑,这些逻辑监听按钮并读取文本字段的值。

答案 1 :(得分:0)

遗憾的是,您不能使用 dart:io 等包中的库,因为 DartPad 仅支持与网络应用程序配合使用的库。

要使用这些库:

  1. 您可以下载 SDK

  1. 检查以下链接以在 VScode 上运行您的代码link