Nativescript内部堆栈布局

大家好，我正在尝试制作内部堆栈布局，但是第二个堆栈布局位于第一个堆栈布局的顶部，因此我看不到第二个堆栈布局是否应该使用css处理，如果是，或者是否有其他方法

这是我的代码

<StackLayout orientation="horizontal">
    <StackLayout width="500">
         <GridLayout columns="50, *" rows="*" width="500" height="50" 
         verticalAlignment="top">
               <Label text="Name" row="0" col="0" backgroundColor="red">
               </Label>
               <Label text="Fol" row="0" col="1" class="alignRight" 
               backgroundColor="blue"></Label>
         </GridLayout>
    </StackLayout>

      <StackLayout orientation="horizontal" width="500" height="180"> 
           <Image src="http://lorempixel.com/400/200" width="500" left="10" 
           top="30">
           </Image>
      </StackLayout>
</StackLayout>

---

谢谢

首先，我会删除

宽度

以查看页面的显示方式<代码>500是一个非常大的值。只有大型平板电脑才能支持这一点。 作为一个例子，首先我会尝试以下方法：

<GridLayout columns="auto, auto">
    <GridLayout col="0" columns="50, *" rows="*" verticalAlignment="top">
          <Label text="Name" row="0" col="0" backgroundColor="red">
          </Label>
          <Label text="Fol" row="0" col="1" class="alignRight" 
               backgroundColor="blue"></Label>
    </GridLayout>
    <Image col="1" src="http://lorempixel.com/400/200" left="10" op="30">
    </Image>      
</GridLayout>

---

看到两部分水平对齐后，您可以开始调整宽度

您已经将两个内部堆栈布局的宽度设置为500-因此它假设您的屏幕至少为1000宽-我认为没有任何手机设备（这是dip）-因此NS删除了第二个SL。我认为如果您将宽度设置为每个50%，并删除Gridlayout的宽度=500，则应该可以工作。个人建议，这不是一个有效的布局。NS很慢，如果你使用这样的布局，它会变得更慢。谢谢你的快速回复。你说这不是有效的布局，有效的方法是什么？我是nativescript新手，我想听听你的看法。基本上，你想减少嵌套布局的数量-例如，你用文本“Name”标记的标签是3层。我没有仔细查看您的布局，但我打赌它可以通过单个网格布局完成。看看你能不能做到。。。