NativeScript flexbox布局答案

【问题标题】：NativeScript flexboxlayoutNativeScript flexbox布局
【发布时间】：2020-09-15 23:24:15
【问题描述】：

我正在尝试创建一个包含两列的 flexbox 布局。在第一列中，我想放置一个图像，在第二列中我想要一个 listView。我想要这样的东西，其中绿色列代表图像。

这是我尝试过的，但它没有按预期工作，它在顶部显示图像，在其下方显示文本。

  <FlexboxLayout flexDirection="column">
        <StackLayout  width="1000" height="100%"  class="m-15" >
            <Image src="res://sideimage" horizontalAlignment="left"></Image>
        </StackLayout>

        <StackLayout >
            <ListView  [items]="dataList">
                <ng-template let-item="item">
                    <FlexboxLayout flexDirection="row">
                        <GridLayout  columns="auto,100" rows="auto,auto" width="2000" >
                            <Label class="confederacy" [nsRouterLink]="['/province', item.confederancy_name]" [text]= "item.confederancy_name" pageTransition="slideLeft" ></Label>
                            <Label class ="arrow-icon" text="&#xf0a9;" class="fas" col="1" row="0" ></Label>
                        </GridLayout>
                    </FlexboxLayout>
                </ng-template>
            </ListView>
        </StackLayout>


    </FlexboxLayout>

【问题讨论】：

标签： angular nativescript

【解决方案1】：

您必须将您的 flexDirection 更改为像 <FlexboxLayout flexDirection="row"> 这样的行。由于您将它作为列，它会将您的内部 StackLayouts 堆叠在一起，而不是像您想要的那样将它们并排放置。

【讨论】：

【解决方案2】：

我使用 gridlayout 来排序。

<GridLayout columns="auto,*" rows="*">
        <StackLayout  col="0" row="0" >
            <Image src="res://sideimage"  stretch="Fill" ></Image>
        </StackLayout>

        <StackLayout  col="1" row="0" >
            <ListView  [items]="dataList">
                <ng-template let-item="item">
                    <FlexboxLayout flexDirection="row">
                        <GridLayout  columns="auto,100" rows="auto,auto" width="200" >
                            <Label class="confederacy" [nsRouterLink]="['/province', item.conf_name]" [text]= "item.conf_name" pageTransition="slideLeft" ></Label>
                            <Label class ="arrow-icon" text="&#xf0a9;" class="fas" col="1" row="0" ></Label>
                        </GridLayout>
                    </FlexboxLayout>
                </ng-template>
            </ListView>
        </StackLayout>
      </GridLayout>

【讨论】：