在 App Inventor 中更改列表查看器格式

Question

我正在尝试使用 App Inventor 创建一个应用程序，它允许您查看来自服务器的文件并下载和共享它们。

我创建了 3 个列表查看器，一个用于打开文件，第二个用于共享文件，最后一个用于下载文件。它看起来像这样：

但我希望将所有这些都放在同一列中，就像这个应用程序所做的那样：

有人知道我必须做什么才能创建这样的格式吗？

谢谢。

Answer 1

最后感谢 www.jquerymobile.com 和 Taifun 的一些教程，我可以创建一个与我正在寻找的界面相似的界面。我还实现了如何恢复用户选择的索引。我这里 post jquery 代码：

<!DOCTYPE html> 
<html> 
<head> 
    <title>0</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <style>
    .split-custom-wrapper {
    /* position wrapper on the right of the listitem */
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}

.split-custom-button {
    position: relative;
    float: right;   /* allow multiple links stacked on the right */
    height: 100%;
    margin:0;
    min-width:3em;
    /* remove boxshadow and border */
    border:none;
    moz-border-radius: 0;
    webkit-border-radius: 0;
    border-radius: 0;
    moz-box-shadow: none;
    webkit-box-shadow: none;
    box-shadow: none;
}

.split-custom-button span.ui-btn-inner {
    /* position icons in center of listitem*/
    position: relative;
    margin-top:50%;
    margin-left:50%;
    /* compensation for icon dimensions */
    top:11px; 
    left:-12px;
    height:40%; /* stay within boundaries of list item */
}
    </style>
</head> 
<body> 

<div data-role="page">  
    <div data-role="content">   
    <div id="searchPickPlace">
    <script>
    // get the table to display from the window.AppInventor object and split at new line
    var urlArray = window.AppInventor.getWebViewString().split("\n");
    // split at comma

    var doc = document;
    var fragment = doc.createDocumentFragment();
    document.write('<ul data-role="listview" data-filter="true">');
    for(i=0;i<(urlArray.length-1);i++){   
      j = i + 1; //+1 because app invetor array start at position 1
      var rowArray = urlArray[i].split(",");
        html = '<li> \
                <a id="R_'+j+'" onClick="reply_click(this.id)" href="#">\
                    <h3>'+rowArray[1]+" "+j+'</h3>\
                    <p>description</p>\
                </a>\
                <div class="split-custom-wrapper">\
                    <a id="D_'+j+'" onClick="reply_click(this.id)" href="#" data-role="button" class="split-custom-button" data-icon="arrow-d" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>\
                    <a id="S_'+j+'" onClick="reply_click(this.id)" href="#" data-role="button" class="split-custom-button" data-icon="gear" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>\
                </div>\
            </li>';
        document.write(html);
    }
    document.write('</ul>');

    function reply_click(clicked_id)
    {
        //alert(clicked_id);
        window.document.title = clicked_id;
        setTimeout(function(){window.document.title = "0";}, 500);  
    }

    </script>
    </div>
    </div><!-- content -->
</div><!-- /page -->

</body>
</html>

使用这段代码我得到了这个界面：

当您单击一个按钮时，文本标签会更改为您单击的带有前缀的索引编号，具体取决于您单击的是主区域还是其他按钮。文本标签只会在不到一秒的时间内发生变化，因此如果在此期间您再次单击，界面将不会收到单击。我认为这非常适合我想做的事情，因为我不希望任何人向按钮发送垃圾邮件，但如果想要一个可以向按钮发送垃圾邮件的应用程序，则必须找出其他解决方案。

为此，您需要一个时钟。在这个例子中，我从我的网站上获得了 table，但您可以创建自己的 table，其中包含一个文本变量，用逗号分隔列，每行用“\n”分隔。我 post 应用程序开发者在此处屏蔽：

我知道如果有人能找到更好的解决方案，我愿意听取新的建议。

谢谢

在 App Inventor 中更改列表查看器格式

Changing listviewer format in App Inventor

app-inventor