样式

在 NativeScript 中，您可以像在使用层叠样式表 (CSS) 的 Web 应用程序中一样，通过更改 JavaScript/Typescript 中视图的 style 属性来设置 UI 的样式。对于 CSS 样式，NativeScript 支持 Tailwind 或 SASS 等工具。

与 DOM 样式对象类似，每个 View 实例都公开了一个 style 属性，该属性包含视图的所有样式属性。当视图显示时，其所有样式属性都会应用到底层的原生组件。

应用 CSS 样式 ​

在 NativeScript 中，CSS 样式可以在 4 个不同的级别上设置

• 应用级 CSS：应用于每个应用程序页面
• 页面特定 CSS：应用于页面的 UI 视图

• 内联 CSS：直接应用于 UI 视图
• 平台特定 CSS

与 Web 开发一样，如果在不同级别声明了 CSS，则所有 CSS 都会被应用。内联 CSS 具有最高优先级，而应用程序 CSS 具有最低优先级。

应用级 CSS ​

当应用程序启动时，NativeScript 会检查文件 app.css 是否存在。如果存在，则加载并使用其中包含的所有 CSS 样式，应用于所有应用程序页面。此文件是存储将在多个页面上使用的样式的便捷位置。

要更改加载应用级 CSS 的文件的名称，请使用 Application.setCssFileName('style.css')。您需要在应用程序启动之前进行更改，通常在 app.(js|ts) 文件中，如下所示

您还可以使用 getCssFileName() 方法检查应用级 CSS 文件的名称，如下所示

import { Application } from '@nativescript/core'
const fileName = Application.getCssFileName()
console.log(`fileName ${fileName}`)

页面特定 CSS ​

当页面的 XML 声明文件加载时，NativeScript 会查找具有相同名称的 CSS 文件（如果存在），读取找到的任何 CSS 样式，并自动加载并将其应用于页面。例如，名为 mypage.xml 的页面将自动加载 mypage.css 中的任何 CSS。CSS 文件必须与 XML 文件位于同一文件夹中才能自动应用。

如果在页面上导入任何自定义组件，则这些组件的 CSS 也会应用于页面。最佳实践是为自定义组件的 CSS 设置范围，以便组件样式不会“泄漏”到页面上。 /// flavor plain

<StackLayout class="my-component">
  <Label text="Custom component layout" class="label" />
</StackLayout>

/* GOOD: This will ONLY apply to the custom component */
.my-component .label {
  color: blue;
}

/* BAD: This will apply to the custom component AND potentially to the page where the component is used */
.label {
  color: blue;
}

您还可以使用页面的 css 属性覆盖文件中指定的 CSS 样式

page.css = 'button { color: red }'

///

/// flavor angular

在 Angular 应用程序中，所有内容都是组件，因此，添加一些仅应用于一个组件的 CSS 代码是一项非常常见的任务。在 NativeScript-Angular 应用程序中添加组件特定 CSS 涉及使用组件的 styles 或 styleUrls 属性。

@Component({
    selector: 'list-test',
    styleUrls: ['style.css'],
    template: ...

// Or

@Component({
    selector: 'list-test',
    styles: ['.third { background-color: lime; }'],
    template: ...

///

添加 CSS 字符串 ​

此代码段会向当前样式集添加新的样式。当您需要向元素添加一小段 CSS 代码（例如，出于测试目的）时，这非常有用

page.addCss('button {background-color: blue}')

添加 CSS 文件 ​

此代码段会向当前样式集添加新的 CSS 样式。但是，此方法会从文件中读取它们。它对于在文件中组织样式并在多个页面中重用它们很有用。

page.addCssFile(cssFileName)

内联 CSS ​

与 HTML 类似，可以在 XML 标记中为 UI 视图内联定义 CSS

<button text="inline style" style="background-color: green;"></button>

平台特定 CSS ​

NativeScript 约定使应用平台特定 CSS 变得容易，可以通过单独的样式表或内联声明来实现。有关 NativeScript 用于针对特定平台和屏幕尺寸的文件名的基于约定的规则概述，请参阅文档中的本文。

有 4 种主要方法可以针对 iOS 或 Android 的样式

/// flavor plain

1. 平台特定样式表 (<file-name>.ios.css、<file-name>.android.css)
2. 平台特定标记块 (<ios> ... </ios>、<android> ... </android>)
3. 平台特定属性 (<Label ios:style="..." android:style="...")
4. 平台特定 CSS 规则 (.ns-ios .mystyle { ... }、.ns-android .mystyle { ... })

///

/// flavor angular

1. 平台特定样式表 (styles.component.ios.css、styles.component.android.css)
2. 平台特定标记块 (<ios> ... </ios>、<android> ... </android>)
3. 平台特定属性 (<Label ios:style="..." android:style="...")
4. 平台特定 CSS 规则 (:host-content(.ns-ios) .mystyle { ... }、:host-context(.ns-android) .mystyle { ... })

///

在 NativeScript 中管理平台无关和平台特定样式的最常见和最易维护的模式是使用多个样式表和 CSS 导入。

/// flavor plain 使用此模式，页面有 3 个单独的样式表：通用、iOS 和 Android。例如，对于页面 myPage.xml，您将有 3 个样式表

1. myPage-common.css
2. myPage.ios.css
3. myPage.android.css

然后，在 myPage.ios.css 和 myPage.android.css 中，您将从 myPage-common.css 导入共享的通用样式

/* Import shared style rules */
@import './myPage-common.css';

/* Add iOS/Android specific rules (if any) */
.mystyle { ... }

///

/// flavor angular 使用此模式，页面（或组件）有 3 个单独的样式表：通用、iOS 和 Android。例如，对于页面 home.component.html，您将有 3 个样式表

1. home-common.css
2. home.component.ios.css
3. home.component.android.css

然后，在 home.component.ios.css 和 home.component.android.css 中，您将从 home-common.css 导入共享的通用样式

/* Import shared style rules */
@import './home-common.css';

/* Add iOS/Android specific rules (if any) */
.mystyle { ... }

///

在构建时，NativeScript 将自动导入通用样式并根据目标构建平台选择正确的 iOS 或 Android 样式表。

支持的 CSS 属性 ​

此属性列表可以在 CSS 中或通过每个视图的 style 属性设置

使用 CSS 访问 NativeScript 视图属性 ​

您还可以设置不属于 CSS 规范的 NativeScript 组件属性值。例如

StackLayout {
   orientation: horizontal;
}

此功能仅限于具有简单类型（如字符串、数字和布尔值）的属性，并且将设置类似于通过 XML 或 HTML 中的模板标记在您的模板标记中声明组件标记的本地属性值。不支持 CSS 继承。

NativeScript 特定的 CSS 属性 ​

在移动开发的上下文中，有一些属性是移动特定的（有时甚至平台特定的，例如 Android 或 iOS）。在 NativeScript 中，这些特色属性仍然可以通过代码（内联、JavaScript 和 TypeScript）和 CSS 属性访问。以下是这些属性的列表

在 Android 上向视图添加阴影 ​

在 Android 上，要向视图实例添加阴影，请使用 androidElevation 属性。

<StackLayout class="home-panel">
  <TextView
    class="tvElevation"
    editable="false"
    textWrap="true"
    text="TextView"
  ></TextView>
  <Label androidElevation="5" class="sampleLabel" textWrap="true" text="Label"></Label>
  <Button androidElevation="7" class="sampleButton" text="Button"></Button>
</StackLayout>

.tvElevation {
  android-elevation: 5;
}

还有一个 androidDynamicElevationOffset 属性，允许在发生 tap 或 touch 等事件时设置阴影。

示例

<StackLayout class="home-panel">
  <Button
    androidElevation="7"
    androidDynamicElevationOffset="8"
    class="sampleButton"
    text="Button"
  ></Button>
  <Button class="sampleButton2" text="Button"></Button>
</StackLayout>

.sampleButton2 {
  background-color: lightcyan;
  android-elevation: 7;
  android-dynamic-elevation-offset: 7;
}

.btn-no-elevation {
  android-elevation: 0;
}

支持的 CSS 选择器 ​

目前 NativeScript 支持 CSS 选择器语法 的以下子集。

• 类型选择器
• 类选择器
• ID 选择器
• 分层选择器
• 属性选择器
• 伪选择器

类型选择器 ​

与 CSS 元素选择器 一样，NativeScript 中的类型选择器选择给定类型的全部视图。类型选择器不区分大小写，因此您可以同时使用 button 和 Button。

button { background-color: gray }

类选择器 ​

类选择器 选择具有给定类的全部视图。类使用视图的 className 属性设置。

<Label className="title"></Label>

.title {
  font-size: 32;
}

import { Label } from '@nativescript/core'
const label = new Label()
label.className = 'title'

ID 选择器 ​

Id 选择器 选择具有给定 id 的全部视图。id 使用视图的 id 属性设置。

<Button id="login-button"></Button>

#login-button {
  background-color: blue;
}

import { Button } from '@nativescript/core'
const btn = new Button()
btn.id = 'login-button'

分层选择器（CSS 组合器） ​

CSS 选择器可以包含多个简单选择器，并且可以在选择器之间包含组合器符号。

• （空格） - 后代选择器。例如，以下代码将选择 StackLayout 内的所有按钮，无论其层级如何。

<StackLayout>
    <WrapLayout>
        <Button id="login-button" testAttr='flower' />
    </WrapLayout>
</StackLayout>

StackLayout Button {
  background-color: blue;
}

• (>) - 直接子元素选择器。使用前面的示例，如果 CSS 更改为

StackLayout > Button {
  background-color: blue;
}

则不会应用 background-color 规则。为了应用选择器，需要删除 WrapLayout 元素，以便 Button 成为 StackLayout 的直接子元素。

• (+) - 相邻兄弟选择器，允许选择指定元素的所有兄弟元素。

按类进行直接兄弟测试 ​

<StackLayout class="layout-class">
  <Label text="Direct sibling test by id"></Label>
  <Button class="test-child" text="First Button"></Button>
  <Button class="test-child-2" text="Second Button"></Button>
</StackLayout>

.layout-class .test-child + .test-child-2 {
  background-color: green;
}

按 ID 进行直接兄弟测试 ​

<StackLayout class="layout-class">
  <Label text="Direct sibling test by id"></Label>
  <Button id="test-child" text="First Button"></Button>
  <Button id="test-child-2" text="Second Button"></Button>
</StackLayout>

.layout-class #test-child + #test-child-2 {
  background-color: green;
}

按类型进行直接兄弟测试 ​

<StackLayout class="direct-sibling--type">
  <Label text="Direct sibling by type"></Label>
  <Button text="Test Button"></Button>
  <Label text="Test Label"></Label>
  <Button text="Test Button"></Button>
  <Label text="Test Label"></Label>
  <Button text="Test Button"></Button>
  <Label text="Test Label"></Label>
</StackLayout>

StackLayout Button + Label {
  background-color: green;
  color: white;
}

属性选择器 ​

<Button testAttr="flower"></Button>

button[testAttr] {
  background-color: blue;
}

此选择器将选择所有具有属性 testAttr 和某些值的按钮。

此外，还支持一些更高级的场景

• button[testAttr='flower'] {...} - 将在每个具有 testAttr 属性且属性值恰好为 flower 的按钮上应用 CSS。
• button[testAttr~='flower'] {...} - 选择所有具有 testAttr 属性的按钮，该属性包含一个用空格分隔的单词列表，其中一个单词是“flower”。
• button[testAttr|='flower'] {...} - 选择所有具有 testAttr 属性值的按钮，该属性值以“flower”开头。该值必须是一个完整的单词，要么单独存在，如 btn['testAttr'] = 'flower'，要么后跟连字符 (-)，如 btn['testAttr'] = 'flower-house'。
• button[testAttr^='flower'] {...} - 选择所有具有 testAttr 属性值的按钮，该属性值以“flower”开头。该值不必是一个完整的单词。
• button[testAttr$='flower'] {...} - 选择所有具有 testAttr 属性值的按钮，该属性值以“flower”结尾。该值不必是一个完整的单词。
• button[testAttr*='flo'] {...} - 选择所有具有 testAttr 属性值的按钮，该属性值包含“flo”。该值不必是一个完整的单词。

属性选择器可以单独使用，也可以与所有类型的 CSS 选择器组合使用。

<Button id="login-button" testAttr="flower"></Button>
<Label testAttr="some value"></Label>

#login-button[testAttr='flower'] {
  background-color: blue;
}
[testAttr] {
  color: white;
}

伪选择器 ​

伪选择器或伪类用于定义元素的特殊状态。目前，NativeScript 仅支持 :highlighted 伪选择器。

<Button testAttr="flower"></Button>

button:highlighted {
  background-color: red;
  color: gray;
}

根视图 CSS 类 ​

为了实现灵活的样式和主题，NativeScript 提供了以下 CSS 类，可以将其添加到应用程序中的根视图以用于特定状态。

• .ns-root - 分配给应用程序根视图的类
• .ns-modal - 分配给模态根视图的类
• .ns-android、.ns-ios - 指定应用程序平台的类
• .ns-phone、.ns-tablet - 指定设备类型的类
• .ns-portrait、.ns-landscape、.ns-unknown - 指定应用程序方向的类
• .ns-light、.ns-dark - 指定系统外观的类。

支持的测量单位 ​

NativeScript 支持 DIPs（设备独立像素）、pixels（通过后缀 px）和 percentages（对宽度、高度和边距的部分支持）作为测量单位。

NativeScript 推荐的测量单位是 DIP。所有可测量的属性（例如宽度、高度、边距、填充、边框宽度等）都支持 DIPs。字体大小始终以 DIP 为单位测量。

.myLabel {
  font-size: 28;
  width: 200;
  height: 30;
}

设备独立像素 (DIPs) 等于设备屏幕像素除以设备屏幕比例（密度）。

下面是如何获取设备屏幕大小的示例

import { Screen } from '@nativescript/core'

const scale = Screen.mainScreen.scale
const widthPixels = Screen.mainScreen.widthPixels
const heightPixels = Screen.mainScreen.heightPixels
const widthDIPs = Screen.mainScreen.widthDIPs // DIPs === pixels/scale (e.g. 1024 pixels / 2x scale = 512 DIPs)
const heightDIPs = Screen.mainScreen.heightDIPs

NativeScript 支持宽度、高度和边距的百分比值。百分比值是根据父元素的大小计算的。这意味着，如果您在具有默认 orientation='vertical' 的 StackLayout 中放置两个高度为 '50%' 的按钮，它们将垂直填充整个 StackLayout。marginLeft = '5%' 将等于父元素的宽度。

使用 CSS 变量 ​

NativeScript 支持 CSS 变量（也称为自定义属性或级联变量），以便通过应用中使用的 CSS 重用值。

CSS 变量从父视图级联到子视图。

声明变量

/* Define --my-custom-color as a global value */
.ns-root {
  --my-custom-color: black;
}

/* In landscape mode change the value to blue */
.ns-landscape {
  --my-custom-color: blue;
}

从子元素覆盖变量

/* Change --my-custom-color to green for elements below */
.ns-root .override-color {
  --my-custom-color: green;
}

使用变量

.using-variable {
  color: var(--my-custom-color);
}

--my-undefined-value 的默认值为黑色。在横向模式下，它将为蓝色。如果父元素具有类 override-color，则其值为绿色。

使用回退值

.using-variable {
  color: var(--my-undefined-value, yellow);
}

--my-undefined-value 的颜色将回退到黄色，因为 --my-undefined-value 未定义。

使用嵌套回退值

.using-variable {
  color: var(--my-undefined-value, var(--my-custom-color, yellow));
}

使用 CSS calc() ​

NativeScript 支持 CSS calc() 函数来对 CSS 值执行简单的计算。

语法

element {
  width: calc(100% * 1.25); /* width: 125% */
}

与 CSS 变量一起使用

element {
    --my-variable: 10:
    width: calc(100% * var(--my-variable)); /* width: 125% */
}

导入 CSS ​

@import CSS 规则允许您从本地文件导入 CSS。此规则必须位于所有其他类型规则之前。

@import url('~/your-style.css');