Appcelerator：视图布局垂直中的标签布局复合

Question

我需要在图片上方放置标签。此图像位于布局 "vertical" 的视图中，我需要此 LABEL 以绝对方式将其放在图像的右上角。我该怎么做？

我的代码：

index.html

`<Alloy>
        <View class="col col-2">
                            <ImageView id="images" class="img-thumbnail"  />
                            <Label id="name"></Label>
                            <Label id="price"></Label>
        </View>
</Alloy>
`

    app.tss

    ".col-2":{
        layout: 'vertical',
        width: '49.25%',
        height: Ti.UI.SIZE,
    }
   ".badge":{
    top:0,
    right:0,
    backgroundColor:'green',
    color:'white',
    layout:'composite'
}

Alloy。钛 SDKA：7.0.0.GA

Answer 1

如果您想在图像上方的右上角显示标签并与该垂直布局中的其他视图一起显示，则可以将垂直布局包装在不同的视图中并在右上角显示图像，如下所示：

<Alloy>
    <View width="49.25%" height="Ti.UI.SIZE">

        <!-- now use full width on this view -->
        <View class="col col-2" width="Ti.UI.FILL">
            <ImageView id="images" class="img-thumbnail"  />
            <Label id="name"></Label>
            <Label id="price"></Label>
        </View>

        <Label text="Put your top-right label here" width="Ti.UI.SIZE" height="Ti.UI.SIZE" top="16" right="16" />
    </View>
</Alloy>

Appcelerator：视图布局垂直中的标签布局复合

Appcelerator: Label layout composite in View layout vertical

layout

appcelerator

composite