【问题标题】:Center items in RadListView in NativescriptNativescript 中 RadListView 中的中心项目
【发布时间】: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"
            height="100%" itemReorder="true" padding="10">
            <ng-template tkListItemTemplate let-item="item">
                <GridLayout>
                    <Label [text]="item" textAlignment="center" 
                        witdh="95%"
                        height="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 谢谢你,但这并不能解决问题

标签: angular nativescript radlistview


【解决方案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>

并且应该按预期工作

【讨论】:

猜你喜欢
  • 2018-06-13
  • 2019-02-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-06-22
  • 2012-11-21
相关资源
最近更新 更多