angular - NativeScript flexbox布局

Question

我正在尝试创建一个包含两列的 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>

标签： angularnativescript

Answer 1

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