Angular2/Nativescript:可以将GridLayout列中包含的内容换到下一行吗？
Angular2/Nativescript是一种用于构建跨平台移动应用和Web应用的开发框架。它结合了Angular框架和Nativescript技术，提供了丰富的功能和工具来简化开发过程。
在Angular2/Nativescript中，可以使用GridLayout来创建灵活的布局。GridLayout是一种网格布局系统，可以将内容按照行和列进行排列。如果要将GridLayout列中包含的内容换到下一行，可以使用col属性来控制每个元素所占的列数。
例如，如果有一个GridLayout包含4个元素，每个元素占据1列，可以通过设置col属性为2来实现将每个元素换到下一行：
<GridLayout columns="*, *, *, *">
<Label col="2" text="Element 1"></Label>
<Label col="2" text="Element 2"></Label>
<Label col="2" text="Element 3"></Label>
<Label col="2" text="Element 4"></Label>
</GridLayout>在上面的例子中，GridLayout定义了4列，每个元素通过设置col属性为2，占据了2列。这样，每个元素都会换到下一行。
Angular2/Nativescript提供了丰富的布局和UI组件，可以满足各种应用场景的需求。如果需要更多关于Angular2/Nativescript的信息，可以参考腾讯云的相关产品和文档：
相关·内容
我遵循这个在Listview中执行浮动操作按钮。
因此，我在我的应用程序中添加了以下两个插件：
NativeScript 2.x
tns plugin add nativescript-floatingactionbutton@^2.2.7
NativeScript 3+
tns plugin add nativescript-floatingactionbutton
我在下面的html文件中添加了浮动操作按钮(FAB)：
编辑：
html页面：
<StackLayout class="parent">
<GridLayout rows="*, a
浏览 2提问于2017-07-20得票数 1
我正忙于Angular2/Nativescript项目，试图复制一个HTML表……我的做法是在Listview中添加两个模板，一个用于头，另一个用于从REST API获取的内容，它们总是不同的。这种方法的唯一问题是左对齐标题和内容，现在列不是从标题下开始的，而是稍微向右一点，所以弄清楚哪一列属于哪个标题会有点混乱。在Nativescript中有可能做到这一点吗？我也不知道如何添加边框来分隔表格/列表视图中的不同行和单元格……你知道我该怎么做吗？
我的代码：
<ListView [items]="stockTransactions" [itemTemplateSel
浏览 6提问于2017-03-08得票数 1
回答已采纳
我是NativeScript的新手，现在已经不知所措了。 我正在尝试将这个布局(如下图所示)放在一个骨架形式中，这样我就可以学习并填写细节。 从顶部开始，我似乎需要一个8行2列的网格。 <GridLayout rows="*, auto" columns="250, *">
<Label text="First Name" />
<Label text="Middle Initial" col="1" />
<TextField hint="
浏览 18提问于2019-05-30得票数 0
回答已采纳
我是Nativescript的新手，但我对ngFor有问题。我在一个带有ngFor的StackLayout中使用了这个GridLayout，问题是如何在StackLayout中设置动态列和行？太棒了。
<GridLayout columns="*,*,*" rows="{{ totalRows }}" class="grid-book">
<StackLayout *ngFor="let plan of plans; let i = index" row="0" col="0"
浏览 1提问于2018-11-14得票数 1
我对Nativescript和Angular非常陌生，这是我第一次尝试移动应用程序开发，所以请耐心等待。
我正在尝试创建一个基本的应用程序与Angular2和原生脚本。我想做的是，当应用程序启动时，在屏幕底部显示3个按钮(这些按钮是在初始化时动态创建的)。一旦您单击这些按钮中的任何一个，我希望此行向上移动，并出现第二行按钮。过渡应该是动画的。
在我尝试的第一种方法中，我无法将GridLayout添加到我的DockLayout。
home.html文件
<DockLayout #container stretchLastChild="false">
</Dock
浏览 0提问于2016-06-16得票数 1
我对iOS中的nativescript-IQKeyboardManager插件有一个问题(android工作得很好)，尝试了不同的方法来改变布局，但似乎没有什么效果。任何帮助都是非常感谢的！ ? 我尝试了不同的布局(Stacklayout，用ScrollView包装)，但都没能让它像预期的那样工作。 模板如下(使用nativescript-vue)： <template>
<Page class="page">
<GridLayout rows="auto, *, auto" class="m-y-
浏览 18提问于2019-09-11得票数 0
回答已采纳
我是NativeScript的新手，我正在尝试创建我的第一个应用程序。我创建了下面的，它看起来与我预期的不一样。
图像以应有的方式出现在屏幕的顶部，但是所有的标签都出现在它下面的行中，互相堆叠在一起。
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded">
<GridLayout columns="auto, *" rows="auto, *">
<Image row="0"
浏览 0提问于2015-07-25得票数 3
回答已采纳
1回答
我正在寻找一种在NativeScript中设置可点击图像的方法。我计划将5个图像放在一起，当一个图像被点击时，左边的图像应该改变它们的值。
我尝试过的：
<Label col="0" row="0" class="text-details segment-content" [text]="'RATING_AVG'|translate">
</Label>
<Label col="1" row="0" class="text
浏览 14提问于2017-08-23得票数 0
回答已采纳
我遵循了在我的安卓应用程序中使用带有ng2+nativescript的本地文本壁画的指导方针，因为每当我向下滚动不止一次，然后向上滚动时，它就会崩溃。我正在使用的组件是一个列表视图，它显示20个在线图像。urls是通过@ The指令从父组件传递的。但是，当我切换到FrescoDrawee时，就会呈现列表视图，但不呈现图像。
以下是组件的html
<GridLayout columns="*,*,*,*,*,*,*,*,*" height="100" class="item"
xmlns:nativescript-fr
浏览 0提问于2017-02-07得票数 0
回答已采纳
我创建了一个NativeScript应用程序，并直接从BottomNavigation的NativeScript站点剪切/粘贴代码，当我在安卓模拟器中运行它时，底部导航呈现在安卓屏幕左上角的一个小方框中(它不会像在iOS模拟器上那样占据屏幕并将导航放在底部。
我已经尝试了我能想到的所有方法，包括增加高度/宽度，添加列和行设置为*的网格布局等等。
有没有让这个在Android上渲染的秘诀呢？
我的代码直接来自BottomNavigation上的Nativescript页面：
<!-- The bottom tab UI is created via TabStrip (the contai
浏览 11提问于2021-06-10得票数 0
我正在开发一些本地语言的应用程序。最近，我发现我的应用程序更像是一个网站，而不是一个应用程序，因为导航是如何工作的。我有底部导航(atached -这个灰色有5个图标)，用来加载正确的视图。但当我点击主页或任何其他图标时，会加载新视图，但导航也会被“重新加载”。因此，它不会停留在原地，而是装载新的视图。我的问题是-有可能有静态的地脚架吗？我尝试了两个插件在市场上找到，但没有成功。谢谢你的帮助。
<Page class="page" loaded="loaded" xmlns:header="components/header" x
浏览 0提问于2018-04-09得票数 1
回答已采纳
我曾尝试创建一个NativeScript页面，它占据整个屏幕，但如果设备屏幕较小，则让用户滚动它。
我已经尝试了上面的两个代码，但在这样做的时候，TextView自动高度大小受到了限制。
第一个代码是所需的布局(但当键盘打开时没有滚动视图)：
<Page class="page"
xmlns="http://www.nativescript.org/tns.xsd" loaded="onLoaded" navigatedTo="onNavigatingTo">
<GridLayout rows=
浏览 0提问于2017-02-19得票数 0
回答已采纳
1回答
在我的带有棱角的NativeScript项目中，我正在制作一个带有滑出边导航条的页面。我能够使导航条工作，但出于某种原因，我现在有一个白色的空间，上面的内容，我真正想要那里，无法找到如何摆脱它。，这是代码和html：
.ts文件：
import { Component, OnInit, AfterViewInit, ViewChild, ChangeDetectorRef } from "@angular/core";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";
import { Rad
浏览 1提问于2019-01-23得票数 0
回答已采纳
1回答
在Nativescript5.0中为Android和iOS构建应用程序。由于某些原因，和标签似乎不能正常工作，或者我可能做错了。
<StackLayout>
<android>
<ActionBar class="header" flat="true">
<StackLayout orientation="vertical">
<app-eon-colors-top></app-eon-colors-top>
浏览 0提问于2019-02-18得票数 0
有没有办法在模式页面上实现带有粘性页眉和页脚的滚动视图？类似这样的
这是我已经准备好的，但是包含社交按钮的GridLayout正在被截断。
<Page xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onShownModally" class="test">
<StackLayout orietation= "veritcal" class="mainstack">
<GridLayout rows
浏览 11提问于2017-03-14得票数 0
回答已采纳
我正在用NativeScript编写一个使用角2的应用程序。
是否可以定义ng2组件在父布局中的位置？
例如，在我的test.component.ts中，html布局文件读取<Label text="-" row="6" col="2" colSpan="2"></Label>。然后我只需调用<test-comp></test-comp> -这很好，并创建了我想要的视图，但显然，我希望组件是可重用的。
因此，理想情况下，我希望能够从组件中删除行和col信息，然后将测试组件包括在父组件
浏览 0提问于2016-06-06得票数 1
回答已采纳
概述
Nativescript radListView在ios和android上都没有显示来自组件的绑定项。
操作栏和通常的ListView显示数据，但是radlistview不显示数据。控制台没有显示错误。但是我从下一个存储库中看到了RadListView可以工作->
环境
我的开发环境在下面。
操作系统: macOS塞拉利昂10.12.6
节点: v6.12.0
国家预防机制: 3.10.10
nativescript和其他内容可以在package.json看到
考虑
我觉得这个问题是关于..。
但我不能精炼。
角指令
初始化可观察数组
码
我在像下面这样的
浏览 9提问于2018-01-03得票数 1
回答已采纳
我有一个可观察的数组，其中包含一些信息。我希望根据数组中包含的数据动态地更改类。我试过：
#js
var pageData = new Observable({
locations: new ObservableArray([
{location: 'OR1'},
{location: 'OR2'},
{location: 'OR3'},
{location: 'WR1'},
{location: 'PO1'}
]),
浏览 1提问于2016-05-13得票数 0
回答已采纳
问题：
我有一个有角度的应用程序，需要在网格中显示一些项目。我正在使用一个RadListView来呈现列表，在过去几个月中升级了我的棱角、{N}和其他库依赖项之后，我注意到项目的RadListView呈现变得非常缓慢。我有多个“选项卡”，因此您可以看到不同类型的项，每当您切换“选项卡”时，它都需要用新的时间完全重新呈现列表。在进行一些升级之前(我曾希望这将提高应用程序的性能)，切换选项卡即使在呈现100+项时也不会有明显的滞后。现在，它需要几秒钟来加载，甚至24 (我切换到动态渲染滚动，以加快速度，但它几乎是不够好)。
平台信息：
ios (tns ios 5.2.0，5.3.1)角7
浏览 3提问于2019-04-12得票数 1
回答已采纳
我有一个带有RadListView组件的本地文本-vue应用程序来向用户显示数据。列表的每一行包含当前项的多个信息。当我点击一个按钮加载并显示列表时，UI冻结(快速硬件->短；慢硬件->长)。我发现加载/合并数据的代码部分运行时间很短，但UI元素的本地文本内部呈现或创建是问题所在。android控制台显示信息。
I/Choreographer: Skipped 430 frames! The application may be doing too much work on its main thread.
平台信息：
tns 5.2.0
5.2.1
nativesc
浏览 0提问于2019-04-26得票数 10
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
