0

我正在尝试在 xml 中设置如下网格布局

layout: `<GridLayout row="0" rows="*, 2*, *">
              <GridLayout width="57%" row="0" horizontalAlignment="center" verticalAlignment="center">
                <Label class="lobster-regular carousel-item-head" text="Welcome to Payments App" textWrap="true"></Label>
              </GridLayout>
              <GridLayout class="carousel-item-circle" row="1" horizontalAlignment="center" verticalAlignment="center">
                <Label class="fa carousel-item-icon" text="&#xf19c;" textWrap="true"></Label>
              </GridLayout>
              <GridLayout width="49%" row="2" horizontalAlignment="center" verticalAlignment="center">
                <Label class="opensans-regular carousel-item-desc" text="Let's see a quick overview of our features." textWrap="true"></Label>
              </GridLayout>
            </GridLayout>
            `,

所以我从 js 创建了一个滚动视图，并尝试向其中添加内容，如下所示。但它给出了stackerror。

我还发现https://play.nativescript.org/?template=play-js&id=sRSad7&v=162在这里他们实现了同样的事情。但很难理解。

但是当我尝试类似的事情时，我无法这样做，这是我的项目链接。https://play.nativescript.org/?template=play-js&id=GbN2TT 

const myScroll = new ScrollView();
  myScroll.orientation = "vertical";

  console.log(homeViewModel.layout);
  myScroll.content = homeViewModel.layout;

请给我详细的建议和答案或替代方案来实现这一目标。

4

1 回答 1

0

使用UI 生成器

const layout = `<GridLayout row="0" rows="*, 2*, *">
              <GridLayout width="57%" row="0" horizontalAlignment="center" verticalAlignment="center">
                <Label class="lobster-regular carousel-item-head" text="Welcome to Payments App" textWrap="true"></Label>
              </GridLayout>
              <GridLayout class="carousel-item-circle" row="1" horizontalAlignment="center" verticalAlignment="center">
                <Label class="fa carousel-item-icon" text="&#xf19c;" textWrap="true"></Label>
              </GridLayout>
              <GridLayout width="49%" row="2" horizontalAlignment="center" verticalAlignment="center">
                <Label class="opensans-regular carousel-item-desc" text="Let's see a quick overview of our features." textWrap="true"></Label>
              </GridLayout>
            </GridLayout>
            `;

const builder = require("tns-core-modules/ui/builder");
const gridLayout = builder.parse(layout);
myScroll.content = gridLayout;
于 2019-09-09T15:00:54.590 回答