Nativescript 内部 StackLayout答案

【问题标题】：Nativescript inner StackLayoutNativescript 内部 StackLayout
【发布时间】：2017-12-04 09:18:25
【问题描述】：

大家好，我正在尝试制作内部 StackLayouts，但第二个位于第一个之上，因此我看不到第二个 StackLayout，我应该使用 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>

谢谢

【问题讨论】：

您已将内部 StackLayout 的宽度设置为 500 - 所以它假设您的屏幕至少有 1000 宽 - 我认为没有任何电话设备是（这是 dip） - 所以 NS下降第二个 SL。我认为如果您将宽度设置为每个 50% 并删除 Gridlayout 的 width=500 - 它应该可以工作。个人建议，这不是一个有效的布局。 NS 很慢，如果你使用这样的布局会变慢。
感谢您的快速回复您说这不是有效的布局，有效的方法是什么？我是 nativescript 的新手，我想听听你的意见。
基本上你想减少嵌套布局的数量 - 例如您带有文本“名称”的标签是 3 层。我没有仔细查看您的布局 - 但我敢打赌它可以通过单个 Gridlayout 完成。看看你能不能做到……

标签： nativescript

【解决方案1】：

首先我会删除widths 以查看页面的显示方式。 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>

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

【讨论】：