Nativescript 中 RadListView 中的中心项目

Posted 2023-04-13

【中文标题】Nativescript 中 RadListView 中的中心项目

【英文标题】：Center items in RadListView in Nativescript

【发布时间】：2019-12-30 13:20:48

【问题描述】：

我无法在 nativescript-angular 应用程序的屏幕中间将 RadViewList 的元素居中。 在 Playground 中查看：https://play.nativescript.org/?template=play-ng&id=ZFOHYN&v=4

我尝试了几种方法都没有结果：FlexBoxLayout、horizo​​ntalAlignment 和 verticalAligmnent、内联 css、css 显示 flex..

在 Playground 中查看：https://play.nativescript.org/?template=play-ng&id=ZFOHYN&v=4

---

<StackLayout class="page">
    <GridLayout tkExampleTitle tkToggleNavButton>
        <RadListView col="1" [items]="name" 
            selectionBehavior="LongPress"
            multipleSelection="true" reorderMode="Drag" 
            backgroundColor="gray"
             itemReorder="true" padding="10">
            <ng-template tkListItemTemplate let-item="item">
                <GridLayout>
                    <Label [text]="item" textAlignment="center" 
                        witdh="95%"
                         margin="5px" padding="15px"
                        backgroundColor="red" fontSize="30"></Label>
                </GridLayout>
            </ng-template>

            <ListViewGridLayout tkListViewLayout 
                 scrollDirection="Vertical"
                ios:itemHeight="250" spanCount="5"> 
            </ListViewGridLayout>
        </RadListView>
    </GridLayout>
</StackLayout>

---

元素停留在左上角！！

【问题讨论】：

...另外，Label 中存在拼写错误——它显示的是 witdh="95%" 而不是 width。

@Tim 谢谢你，但这并不能解决问题

【参考方案1】：

尝试将这样的垂直对齐添加到您的内部网格中：

<GridLayout class="vcenter">
...

在你的样式表中有这个：

.vcenter 
    vertical-align: center;

【讨论】：

@tsaadi vertical-align: center 确实有效，但您不应该明确设置 RadListView 的高度。您在 Playground 示例中将其设置为 100%。此外，您可能需要删除外部 StackLayout，这是不必要的，或者如果您想堆叠项目，您可以删除 GridLayout 并在 StackLayout 上分配垂直中心如果您仍然遇到问题，请提交更新的示例。

@Manoj 我想要做的是将标签精确地居中在 RadViewList 中，它必须具有明确的高度。换句话说（使用操场或查看屏幕截图）在 RadViewList（灰色）内将标签（红色）居中。操场：play.nativescript.org/?template=play-ng&id=acMEE0&v=2 截图：ibb.co/tXq9QqV

【参考方案2】：

请删除此行

 <ListViewGridLayout tkListViewLayout scrollDirection="Vertical" ios:itemHeight="250" spanCount="5"> 
 </ListViewGridLayout>

并且应该按预期工作

【讨论】：

这一行对应用程序很重要，它定义了特定的项目布局。 docs.nativescript.org/ui/professional-ui-components/ListView/…

好吧，您明确要求将其保留在 ios 的左侧，使用：ios:itemHeight="250" spanCount="5"。删除 spanCount="5"，它会在中心