在 NativeScript 应用中添加 Material Design CardView

如今，卡片（也称为 CardView）是移动用户界面中最受欢迎的组件之一。

单个卡片通常用于以视觉上独特的方式显示有关单个组件或主题的信息。来自 Google 的 Material Design 系统已成为引人入胜的 UI 的黄金标准，因此能够在您的 NativeScript 应用中利用这些组件比以往任何时候都更受欢迎。

虽然 NativeScript 团队（以及我们的社区）正在努力实现对 Material Design 的完全支持，但其他一些人开始用各种 NativeScript 插件来填补这一空白，这非常方便。例如，来自 Brad Martin 的 nativescript-cardview 插件。此插件为Android 和 iOS 都实现了 Material Design CardView 组件。

是的，我们很快将在 NativeScript 中围绕 Material Design 支持发布一个更大的公告！🤫

给我看一些代码

与任何其他 NativeScript 插件一样，您可以使用一个简单的命令来安装它

tns plugin add nativescript-cardview

如果您正在开发纯 JavaScript 或纯 TypeScript（而不是 Angular 或 Vue.js），请确保将相应的命名空间添加到您的 <Page> 元素中，如下所示

<Page xmlns:Card="nativescript-cardview">

您的标记应包含一个布局容器和 CardView 组件。类似于这样

<StackLayout class="p-20">
    <Card:CardView>
        <StackLayout>
            <Label text="Hello World!" />
        </StackLayout>
    </Card:CardView>
</StackLayout>

提示：如果您使用的是 Angular，可以在 这里 查看一些类似的示例代码。

这将导致一个看起来像这样的 UI

等等，对我来说它看起来不像卡片。看起来我们需要添加一些 CSS 来调味。💃

让我们在我们的 <CardView> 和 <StackLayout> 元素上添加一些 class 属性

<Card:CardView class="cardStyle">
    <StackLayout class="cardContent">

并将其与我们 app.css 文件中的关联样式结合起来

.page {
    background-color: rgb(237, 237, 237);
}

.cardStyle {
    background-color: #fff;
    color: rgb(43, 43, 43);
}

.cardContent {
    padding: 20;
    font-weight: bold;
    font-size: 30;
}

稍微修改一下我们的文本，并添加一张可爱的猫咪图片 🐈

<Label text="Hello Kitteh!" class="m-b-10" />
<Image src="https://placekitten.com/200/200" />

...我们得到了一些看起来像我们一直期待的卡片 UI 的东西！

自定义属性

关于 nativescript-cardview 插件 的一个棘手之处在于，iOS 和 Android 实现都有单独的独特属性。

您可以对元素应用 radius 来自定义 border-radius。（这实际上在两个平台上都以相同的方式工作）。

厚颜无耻地从插件文档中提取，以下是平台特定的属性（都是可选的）

Android 特定

elevation int（将其视为卡片后面“阴影”的强度）

ripple bool（将其设置为“true”以在您点击卡片时显示涟漪动作）

iOS 特定

shadowOffsetWidth int（设置阴影的 x 位置）

shadowOffsetHeight int（设置阴影的 y 位置）

shadowColor string（设置阴影的颜色）

shadowOpacity int（设置阴影的不透明度）

shadowRadius int（设置阴影的半径 - 与卡片本身的半径不同）

{N} 插件 FTW 🔌

您可以在 NativeScript 市场中 发现几乎任何场景的插件（更不用说 应用模板 和 代码示例！）