设置平台特定属性后强制重新绘制视图

时间:2019-09-23 15:06:13

标签: nativescript nativescript-vue

我有the following hack可以为我拥有的各种元素绘制阴影:

<template>
    <Page>
        <TabView>
            <TabViewItem title="Tab 1">
                <StackLayout @loaded="addShadow">
                    <Label text="This box does have a shadow." />
                </StackLayout>
            </TabViewItem>
            <TabViewItem title="Tab 2">
                <StackLayout>
                    <Label text="This box doesn't have a shadow." />
                </StackLayout>
            </TabViewItem>
        </TabView>
    </Page>
</template>

<script>
    export default {
        methods: {
            addShadow(event) {
                if (event.object.ios) {
                    event.object.ios.layer.masksToBounds = false;
                    event.object.ios.layer.shadowOpacity = 0.5;
                    event.object.ios.layer.shadowRadius = 5.0;
                    event.object.ios.layer.shadowColor = new Color('#000000').ios.CGColor;
                    event.object.ios.layer.shadowOffset = CGSizeMake(0.0, 2.0);
                }
            }
        }
    }
</script>

<style scoped>

StackLayout {
    background: #ffffff;
    padding: 16;
    margin: 16;
}

</style>

但是,虽然阴影看起来很完美,但是在首次访问该选项卡时它最初不会出现。我必须先访问第二个选项卡,然后才返回到第一个选项卡,才绘制阴影。

我认为这是因为添加阴影后我需要调用一些东西来重绘图层,但是我不知道该怎么做。我已经尝试过event.object.ios.layer.setNeedsDisplay(),但没有效果。

如何确保阴影显示在第一个选项卡上?

0 个答案:

没有答案