windows-runtime - 一行多列 WinJS 布局

Question

我是 WinJS 开发的新手，找不到类似于以下布局的任何好的示例：

理想情况下，每个项目都是基于百分比的，这样我就可以有一个包含 3 或 4 个“列”的布局。谁能指出我正确的方向？谢谢！

Answer 1

如果您想要选择、分组、排序等丰富的功能，请使用@Louis_PIG 回答的解决方案。如果您需要像这样非常基本的水平布局，请使用disply:-ms-flexboxCSS 显示属性。如果您创建一个 div 并设置它，那么它的所有子级都将水平布局。然后，您可以对孩子及其大小和位置进行各种控制。您可以设置它们的相对宽度、平均分配它们、拉伸它们等等。有关flexbox 的大量信息，请参阅此内容。

这是一个示例 flexbox...

<!-- HTML snippet -->    
<div class="flex">
    <div></div>
    <div></div>
    <div></div>
</div

/* CSS snippet */
.flex {
    display: -ms-flexbox;
}

Answer 2

您可能正在寻找GridLayout.maxRow房产。

---

<!-- This doesn't work, see NOTE below -->
<div data-win-control="WinJS.UI.ListView"
 data-win-options="{layout: {type: WinJS.UI.GridLayout, maxRows: value}}">
</div>

参考：http: //msdn.microsoft.com/en-us/library/windows/apps/br211750.aspx

注意：上面的代码段不起作用，但更新后的Javascript代码应该可以用于相同的目的。

---

假设您正在尝试显示更多项目，但您只想viewport容纳 3 或 4 个项目，具体取决于屏幕的宽度。然后您可以使用 CSS Media Query 将不同的样式应用于不同的屏幕宽度。或者，您可以在运行时根据屏幕大小计算项目的大小并更新ListView.itemTempalte. 您能否提供更多关于您正在寻找什么的信息？

不过，在我自己看来，WinJS.UI.ListView控件引入了“全景”视图，通常故意留下一些“还有更多要滚动”的迹象。因此，在 中显示“固定”数量的项目ListView可能不是可取的，因为用户可能不知道在viewport.

更新：

正如@rattrick1 指出的那样，上面的HTML代码片段不起作用，即使它与 MSDN 上的代码相同。我修改了由创建的默认应用程序中的代码，Visual Studio它仍然显示 2 行。如果有人能指出上面的问题是什么，那就太好了！

所以我尝试设置属性Javascript，它对我有用：

在App1\pages\groupedItems\groupedItems.js

    _initializeLayout: function (listView, viewState) {
            listView.itemDataSource = Data.items.dataSource;
            listView.groupDataSource = Data.groups.dataSource;
            listView.layout = new ui.GridLayout();
            // limit the List View to display only 1 row
            listView.layout.maxRows = 1;
    }

如果这不起作用，请告诉我。