我有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()
,但没有效果。
如何确保阴影显示在第一个选项卡上?